目次
第13回 CSS練習２(前半)
はじめに
今回はまず、HTMLやCSSの間違いを見つけてくれる便利なツール「DevTools」（デブ・ツールズ）の紹介をします。
その後、より実践的な練習課題に取り組んでもらう、二本立ての内容となっています。
まずは DevTools の紹介から。それではいってみましょう。
ウェブページを調査する DevTools
HTMLやCSSを編集していると、どこかで入力を間違えることはよくあることです。
ですが、HTMLやCSSは、間違いがあっても特にエラーメッセージなどは表示されません。間違いの部分は単に無視される事が多いです。これではどこが間違っているのか分かりにくいです。😥
そのような場合は、ブラウザの機能「DevTools」（デブ・ツールズ）を使うと、ウェブページの詳細を詳しく調べて、問題の箇所を見つけることができます。
ウェブページ編集にあたって、色々と複雑な作業が増えてきていますので、今回はまず、便利な「DevTools」の使い方を紹介したいと思います。
DevToolsとは
DevToolsは、Microsoft Edge ブラウザに標準搭載されている、ウェブページの詳細を調べるための開発支援ツールです。
Edge ブラウザのほか、Chrome や Firefox といった他の種類のブラウザにも同様のツールが標準で搭載されていて、「Developer Tools」や「開発者ツール」といった、さまざまな名前で呼ばれます。（この資料内では「DevTools」で統一します）
ブラウザや呼び名が異なっていても、使い方はほとんど同じものなので、別のブラウザを使っているときも今回の資料が参考になるかと思います。
DevToolsを起動する
ページの詳細を調べるには、対象のページをブラウザに表示させている状態で DevTools を起動しましょう。
みなさんも試してみたい場合は、自分の作った自己紹介ページなど、好きなページを例に DevTools を試しても良いでしょう。
サンプルページで試してみたい場合はこちら。
別のページで試す場合、リンクにマウスカーソルを重ねて「右クリック」→「リンクを新しいウインドウで開く」を選択すると、この資料とは別の別のウインドウで開けるので、この資料と一緒に横に並べて作業するのに便利でしょう。
DevTools を起動するには、ブラウザ画面の右上にある「…」ボタン →「その他ツール」→「開発者ツール」を選択します。
ショートカットキーを使うなら F12 キーや、Ctrl+Shift+i、Macなら Option+Command+i で開閉ができます。
他のブラウザでもだいたい同じ操作です。
実行すると、先ほどの図のようにブラウザに新たなウインドウが出現します。この部分が DevTools です。
最初に「ようこそ」画面が表示される場合があります。
「ようこそ」画面はぶっちゃけ使わないので、上部にある「ようこそ」タブの「×」ボタンを押して閉じてしまってもよいかもしれません。
位置を調整する
DevTools の画面右上にある「…」ボタン → 「ドッキングの位置」を選択すると、DevTools の画面をブラウザの下端につけるなど、位置を調整できます。
例えば下にドッキングさせると、次のようになります。作業しやすいドッキング位置を選びましょう。
（個人的には下にドッキングさせるのが好みです。😆）
DevToolsの画面
DevToolsの画面上部にはいくつかのタブがあり、画面を切り替えられます。
以下のようなタブがあります。それぞれ専用画面に切り替えられます。
- 要素 (Elements)
ページの構造を確認・編集できます。 - コンソール (Console)
エラーメッセージの確認や、Javascript の実行ログの確認などができます。 - ソース (Source)
このページが読み込んでいる他のページなどが一覧表示されます。CSS ファイルや Javascript ファイルなど、さまざまな外部ファイルが読み込まれている様子がわかります。 - ネットワーク (Network)
リクエストの履歴やさまざまなファイルが読み込まれる様子を確認できます。 - パフォーマンス (Performance)
読み込みにかかった時間の計測などができます。アクセスが軽いサイトを目指したい時に目安にします。 - メモリ (Memory)
メインメモリの消費量などを確認できます。ページにプログラムを仕込んでいる場合など、大量のメモリを消費していないかチェックする際などに使えます。
CSSやHTMLを編集している時によく使うのは、「要素」や「コンソール」、たまに「ソース」です。
「要素」でページの構造がおかしくないかチェックしたり、「コンソール」でエラーが出ていないか確認したりします。
「要素」画面の使い方
おそらく最もよく使うであろう「要素」画面について詳しく見ていきましょう。
ページの構造を調べる
「要素」画面の左部分には、ページの構造がツリー状に表示されます。
ツリーは折りたたまれて簡略化して表示されているので、「▶」ボタンを押して詳細を確認できます。
また、各要素をクリックした時に、画面上の対応する箇所がハイライト表示されて、実際にどのように表示されているか確認ができます。
HTML上での記述が画面上にどう現れるかをチェックできます。
例えば終了タグを書き忘れている場合などは、この HTML のツリー構造がおかしくなっているはずなので、注意して確認しましょう。
画面上の各パーツを調べる
DevTools 左上にある 
（要素の選択）ボタンをクリックしてから、ページ上にカーソルを持っていくと、カーソルに接触した各要素がハイライトして表示されます。
ポップアップには、タグの種類や各種プロパティなど、現在有効になっている設定が表示されます。
上の図では、（要素の選択）ボタンをクリックしてから見出しにマウスカーソルをかざしたところ、該当部分が <h2> タグであることや、文字の色が黒 #000000 に設定されていること、使用されているフォントなどが確認できます。
また、周囲の余白 margin や、内部余白 padding などがどのように確保されているかも色分けで表示されます。上の図では、オレンジ色の部分が周囲の余白 margin で、左に見えている黄緑色の部分が内部余白 padding です。
余白は通常は目に見えないため、正しく余白が確保されているか、余白同士がどのように干渉しているかなどをチェックできます。
さらに画面上でクリックをすると、下のツリー部分で対応する箇所を確認できます。また画面右側では、現在有効になっている CSS の効果なども確認できます。
複雑な HTML の中から目的の場所を探さなくても、画面上で怪しい感じの場所から HTML の該当箇所を探せるので便利です。
適用中のCSS効果を確認する
上の図では、ページ上の <h2> 見出しを選択した結果、その部分には右のような CSS 効果が適用されている様子がわかります。
もし複数の CSS が影響して効果が打ち消される場合は、取り消し線が引かれます。例えば上の図では font-weight:bold; の設定に取り消し線がついており（font-weight:bold;font-weight:normal; によって上書きされている様子が分かります。
CSSの間違いを確認する
CSSの記述に誤りがある場合は、黄色い三角マーク▲ が表示されます。
上の例では padding の綴りを pading と間違えた結果、効果が発揮されていない様子がわかります。
教えてくれるのは親切で良いですね！😂
もし間違いが見つかった場合は、元のファイルをテキストエディタで編集し、修正しましょう。
CSSを一時的に無効にする
CSSの各行についているチェックをＯＮ・ＯＦＦすると、該当の CSS 効果を一時的に打ち消した状態でどうなるか確認できます。
上の図では、ページ上の <h2> 見出しにかかっている CSS 設定の有効・無効を切り替えています。
CSSが正しく書けているか、効果が正しく反映されているかチェックする際に役立ててください。
そのCSSにどんな効果があるのか確認するのにも良いですね！
ページを書き換える
「要素」画面に映し出されている HTML 部分では、ダブルクリックすることで直接書き換えができます。書き換えた結果どうなるかはリアルタイムに画面に反映されるので、ページの文言を書き換えてみるなど、ちょっとしたデザイン上のチェックなどを簡単に行なえます。
上の図では、見出しの文字を直接書き換えています。Enter キーを押すと画面に直ちに反映される様子が分かります。
文章以外にも、HTML タグ名や、CSS の設定値など、さまざまな箇所を自由に書き換えられます。
また、Delete キーを押すと要素自体を画面上から削除出来るので、その要素が無かったらどうなるか確認したり、怪しい箇所を一旦削除して問題を確認したりできます。
なお、DevTools 内で書き換えた内容は、セーブされません。
HTML や CSS ファイルが実際に書き換わることもありません。
あくまで自分のブラウザ画面上で一時的に修正しているだけなので、リロードをすると全てリセットされます。
（それはそうですね。他人のページを勝手に書き換えられたりしたら大変です！）
本格的な編集というより、文章を書き換えた時に画面デザインがどう見えるかチェックしたり、CSSのパラメーターをいじってデザインの微調整をするような試験的用途に使ってください。
スマホでの表示を確認する
DevTools 左上にある 
（デバイスエミュレーション）ボタンをクリックすると、スマホなどのモバイル端末でページを見た際の様子を簡易的に確認できます。
スマホ用サイトを制作する際などに、実際にスマホで確認しなくても画面の雰囲気を確認できるので便利です。
上部に出現するメニューを操作すると、スマホの機種を指定して見え方をチェックしたり、縦画面・横画面での見え方をチェックしたりできます。
およその見え方を確認できます
スマホ用も考慮したサイトデザインをする場合に役に立ちます。
文字が小さすぎたりしないか、画面からはみ出していないかなどをチェックすると良いでしょう。
「コンソール」画面の使い方
「要素」のとなりにある「コンソール」画面では、主にエラーの状況などを確認できます。
エラーの確認
「コンソール」の画面では、ページに何らかの問題がある場合に、自動的にエラーメッセージが出現します。
これで HTML や CSS の書き間違いなどをチェックできます。
例えば別のファイルを呼び出す際に、指定のファイルが見つからない場合も、メッセージで確認できます。
上の図では、指定された CSS ファイルが見つからないため FILE_NOT_FOUND（ファイルが見つからない）という旨のエラーが表示されています。
原因としては以下のようなものが考えられるので、適宜修正をしてください。
- CSSファイルがHTMLファイルと同じ場所にない。
- 指定したファイル名が間違っている。
- 実際のファイル名の方を間違えている。
指定したファイルが呼び出せないのはよくあるミスなので、エラーが出ていないか確認すれば参考になります。
編集ファイルの詳細を確認する方法
たとえばサクラエディタの場合であれば、クリックすると上のタイトルバー部分に現在編集しているファイルの場所と名前が表示されます。
これを確認し、どの場所にある、何というファイルを編集中かをよく確認しましょう。
実は別のところにあるファイルを書き換えていたとか、HTML と CSS ファイルが同じ場所に無いといったミスに気づけます。
エラーの表示のされ方は、ブラウザの種類やバージョンによって異なりますが、だいたい上記のように表示されるかと思います。
元の HTML や CSS ファイルを修正したら、ページをリロードして、エラーが解消されているか確認しましょう。
その他 便利な機能
スクリーンショットを取る
DevTools を使って、ウェブページ全体のスクリーンショットを取れます。
普通のスクリーンショット機能を使うと、画面に表示されている部分しか撮影することができません。
ですがウェブページはだいたい縦に長いので、下の方の隠れている部分も撮影するには、１画面分ずつスクロールしながら何枚かスクリーンショットを撮る必要があります。
そんな場合は DevTools のスクリーンショット機能なら、ページ全体を一発で撮影できます。
以下の操作を行います。
- DevTools を開き、右上の「…」→「コマンドの実行」をクリックして選択します。
コマンドの実行 - 現れた入力欄に「キャプチャ」などと入力すると「フル サイズのスクリーンショットをキャプチャする」が見つかるので、クリックして選択します。
コマンドの選択 - 右上にダウンロードの表示が出るので、「名前をつけて保存」などで好きな場所にキャプチャ画像をセーブします（PNG 形式の画像としてセーブされます）。
Wikipediaのページをキャプチャしたもの
縦に長いページも撮影できます
参考：別の保存方法
上のスクリーンショット機能ではページが画像として保存されるので、文字情報を残しておきたい場合は、代わりに以下の方法があります。
Ctrl+S（名前をつけて保存）を押す。- 「ファイルの種類」欄を「Webページ 単一ファイル(*.mhtml)」に設定して「保存」ボタンをクリック。
上記の方法なら、特殊な HTML ファイルの中に画像などが全てまとめて埋め込まれて保存されるので、保管用に便利です。
画像からはページ内の文字をコピー・貼り付けなどできませんが、この方法ならできます。
ただし再現度は劣るので、保存したものを見ると若干レイアウトなどが崩れる場合があります。
このように DevTools を使えば、ページ制作時にさまざまなチェックを行ってくれます。
ウェブページの編集作業がうまくいかない時に役立ててください。
課題
ここからが今回の課題です。
今回の第13回および第14回の授業は、スタイルシート(CSS)のより具体的な使い方を学びます。
教科書を持っている場合は、第３章「スタイルシートを活用しよう」P.47 をあわせて参照してください。
前回の課題はCSSの基礎的な振る舞いを学ぶものでしたが、この課題では、より実際のサイトに近いものをCSSを使って作り上げる課題となっています。
（クリックすると別窓で大きく見られます）
上記のページはほぼ全てCSSを使ってデザインされており、スマートフォンからの閲覧なども考慮したものになっています。
作業工程は少々複雑になっていますが、間違いなどがあった場合は上で紹介した DevTools を使うなどして、問題箇所を探してみましょう。
CSS練習課題
こちらの資料を確認しながら、練習問題に取り組んでください。
- 詳しい作業内容や提出方法なども記載されていますので確認してください。
よろしくおねがいします。
次回は今回の続きです。若干のオマケ要素もあるのでふるってご参加ください。😆
