前の関連記事：linuxBean14.04(11)Bracketsの拡張機能をインストール
Responsive Design Tool for Brackets - YouTubeを見て面白そうと思ってResponse for Brackets - original拡張機能をBracketsにインストールしました。レスポンシブWebデザインというのもこのビデオを見て初めて知りました。まずこのビデオの通りやってみることにしました。
レスポンシブWebデザインとは?
Media Queriesで、画面サイズ別にCSSを切り替える方法 [ホームページ作成] All About
この解説がわかりやすかったです。
ユーザの閲覧環境に合わせたデザイン、ということのようですがそんなことは昔からやられていたことなのにどうしていまさら？、と思ったのですがCSS3がでてからCSSだけで細かく場合分けができるようになったのを契機に、2008年後半頃からレスポンシブWebデザイン、と銘打たれたようです。(Responsive web design - Wikipedia, the free encyclopedia)
Bracketsに拡張機能をインストールするだけで機能を体験できると思ったのですが、どんなhtmlファイルででもResponsive Modeになるわけではないようです。
少なくともBracketsのインストール時についてくるGetting StartedというデモサイトではResponsive Modeを選択しても何も変化がありません。
Responsive Design Tool for Bracketsのデモサイトをダウンロードする
brimelow/Response-for-Bracketsにデモウェブサイトも用意されていたのでそれをダウンロードしてResponsive Design Tool for Brackets - YouTubeを再現できるようにします。
Response for Brackets - original
まずはこの拡張機能をインストール。
brimelow/Response-for-Brackets · GitHubの右にある「Download ZIP」ボタンをクリック。
ダウンロードしたResponse-for-Brackets-master.zipをファイルマネージャで右クリック、ここでファイルを展開。
Response-for-Brackets-masterフォルダの中のdemo websiteがデモウェブサイトです。
これをBracketsで開きます。
Bracketsのファイル→フォルダーを開く。
先ほどダウンロードしたdemo websiteフォルダを選択して「開く」。
デモウェブサイトがBracketsに読み込まれました。
index.htmlをダブルクリックして開きます。
Response→Responsive Mode。
おお、ビデオと同じようなレスポンシブモードになりました。
index2.htmlでも同じようになりました。
レスポンシブモードのままライブプレビューも使えます。
ただし、レスポンシブモードのプレビュー画面はライブプレビューにはならず、リロードするか？、と質問されます。
Yesボタンをクリックするとレスポンシブモードのプレビュー画面にも変更が反映されます。
Responsive Modeの切替はhtmlファイルを開いているときしかできません。
Responsive Meta Tagを加えるとResponsive Modeにできる
Responsive Modeにできるサイトとできないサイトの違いは何でしょうか？
当たり前すぎることなのかレスポンシブWebデザインで検索してでてくるページを読んでも答えは見つけられませんでした。
とりあえずdemo siteのindex.htmlをにらみつけてみると8行目が浮き上がってきました。
<head>
<title>
Icon Design Feed 2
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
早速この部分をGetting Startedのindex.htmlに移植しようとしたのですが、権限がないといわれて保存できません。保存していない状態でResponsive Modeにしても何も反応がありません。
作業中ファイルのところにあるGetting Startedのindex.htmlファイルを右クリック→OSで表示。
/opt/brackets/samples/ja/にあるGetting Startedをホームフォルダのどこかにコピーします。
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>BRACKETS をはじめる前に</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An interactive getting started guide for Brackets.">
8行目を挿入して保存。ビンゴ!
Getting Startedのサイトでレスポンシブモードになりました。
cssフォルダが生成されてその中にmedia-queries.cssファイルが生成されています。
media-queries.cssファイルにはレスポンシブデザインの内容が追記されるので最初は何も入力されていません。
<meta name="viewport" content="width=device-width, initial-scale=1.0">レスポンシブモードにできるこのタグはResponsive Meta Tagというものとわかりました。
Responsive Meta Tag | CSS-Tricksに解説がありました。
レスポンシブデザインにしていないページにはこのレスポンシブメタダグは使うな、と書いてありますね。
理由も書いてありますが私の英語力ではよくわかりませんでした。
レスポンシブWebデザインをする
幅が800pxになったときの条件設定をしてみます。
レスポンシブモードのプレビュー画面のルーラーをドラッグして800pxにします。
+ボタンをクリック。
800pxのバーが出現しました。
media-queries.cssをみると800pxのときの項目ができています。
この条件を消す場合はこの項目を消去すればよいようです。
プレビュー画面のバーは一旦レスポンシブモードをやめないと消えませんでした。
Inspect Modeでhtmlコードがプレビューのどの部分に該当するのかを知る
brimelow/Response-for-Brackets · GitHubからダウンロードしたデモサイトのhtmlファイルはHTMLHintでエラーが指摘されます。
index.htmlのレポートパネルを見てみます。
170行目でアンカータグが閉じていないようです。
レポートパネルの行をダブルクリックするとHTMLの該当部分が表示されます。
<span class="project-details">
<a href="gallery-single.htm">Fresh off the grill and ready.
</span>
確かに</a>が抜けています。ライブビューでもタグを選択するとどこに該当するのか表示してくれますがスクロールはしてまでは表示してくれません。
そこでResponse→Responsive Mode。
さらにResponse→Inspect Mode。
htmlコードの行を選択するとその該当部分がプレビューでハイライトされます。
逆にプレビューで選択するとそれに該当するhtmlコードの行に飛びます。
これもライブプレビューではできませんでした。
参考にしたサイト
Media Queriesで、画面サイズ別にCSSを切り替える方法 [ホームページ作成] All About
レスポンシブWebデザインとはCSSだけでユーザー環境別にデザインを変更させることをいうようです。
Responsive web design - Wikipedia, the free encyclopedia
レスポンシブWebデザインの歴史。
brimelow/Response-for-Brackets
ここからレスポンシブデザインのウェブサイトの例がダウンロードできます。
Responsive Design Tool for Brackets - YouTube
Bracketsのレスポンシブデザイン拡張機能の使い方解説ビデオ。
Responsive Meta Tag | CSS-Tricks
htmlファイルにこのレスポンシブメタタグを追加するだけでレスポンシブモードが使えます。
0 件のコメント:
コメントを投稿