第2回目は前回の続きと、「CSSの基礎知識」の解説がおこなわれました。またデベロッパーツールという便利なツールの紹介もあり、より現場が意識された内容となりました。
本講座では、講座内容をただの知識で終わらせないために、講座参加者自身が実際に1つのサイトを作ることをゴールとしています。本記事でHTML&CSSを勉強する人も、実際に手を動かしてみることをおすすめします。自分で記述したHTML&CSSがブラウザにちゃんと反映されていると、格別の達成感を得られるはずです。
VSCode実演:前回の続き
まずは、前回の続きからVSCodeの実演を行っていきます。前回は<body>の中の<main>に<section>を3つ設け、各<section>に必要なコードを記述することまで行いました。今回は、HTML文書内へのGoogleMapの埋め込みから再開していきます。（番号は前回から連続しています）。
8. GoogleMapの埋め込み
講座内ではGoogleMapの埋め込みが、第２回講座までの課題でした。本記事の読者もまずは自分で挑戦してみることをおすすめします。コーダーでもプログラマーでも仕事を続けていくのならば、課題に直面したら自分で調べて解決する能力が欠かせません。今のうちに自分で調べる癖をつけるようにしましょう。
では順を追って解説していきます。今回は「大宮駅」の位置情報を埋め込みます。まずはGoogleMapで「大宮駅」を検索してください。
次は左上の3本線のマーク（メニュー）を開いてください。
上記画像のメニューのうち、「地図を共有または埋め込む」を選択してください。すると以下のようなポップアップが表示されます。
そして、画像上部の「地図を埋め込む」を選択すると、以下のようにコードが表示されます。
現状はサイズが「中」となっているので、左上の「▼」を選択して、「小」に変更します。
そして「HTMLをコピー」を選択し、これをHTML文書に埋め込みます。
上記画像のように、</section>の直前に埋め込んでください。では、ちゃんと表示されるのかを見てみましょう。
このように、「営業時間・アクセス」の下にGoogleMapが表示されていれば成功です。
9. <footer>内の記述
<footer>内には、サイト運営者の情報やコピーライトを記載します。最終的に以下の通りになります。
では初出の情報や注意点について、個別に解説していきます。なお、行数は便宜的に使用しているだけで、必ずしも同じ行数である必要はありません。とはいえ不必要は改行や空行は、可読性を損なう原因となるためできるだけ避けるようにしてください。
・75行目
addressタグは基本的にサイト運営者、または当該文書に関する連絡先・問い合わせ先を記述する際に用います。<address>で囲んだ箇所は、一般的なブラウザではイタリック体で表示されます。
・76行目
smallタグは、タグ内に記述した文を小さく表示させるためのタグです。今回のように、コピーライトを記述する場合などに用いられるのが一般的です。単に装飾目的で文字を小さくしたい場合は、<small>を用いずCSSでフォントサイズを変更するようにしましょう。
・75~76行目
「 」や「©」のように、「&〜;」の形式で記述されるものは、特殊文字と呼ばれます。
特殊文字が活躍する場面は、たとえば文章中の1つの単語として<a href>などのhtmlタグを使いたい場合です。HTML文書内で素朴に<a href>と記述してしまうと、タグと認識されて言葉として表示されません。しかし特殊文字を用いて「 <a href> 」と書けば、コンピューターに文字として認識してもらえるようになります。
今回は「 」と「©」という特殊文字を使いました。「 」は半角を表示させるための特殊文字で、スペースを無視するHTMLではよく用いられる特殊文字です。また「©」はコピーライトを表示させるための特殊文字です。
なお特殊文字は他にも、数学記号や各種記号を表示させるためのものなどたくさんあるので、思った通りに文が表示されない場合は、特殊文字で置き換えが可能でないかを検討してみるとよいでしょう。
では、ブラウザの表示を見てみましょう。
ここまでで一旦HTMLの記述は終了です。しかし現状は骨組みを作っただけで、これで完成ではありません。これからCSSを正しく機能させるために、CSSの記述と合わせて今まで書いてきたタグの中に属性の追加などを行っていきます。
CSSとは何か
CSS(Cascading Style Sheet)は、HTML文書に装飾やレイアウトを施すための言語です。2021年現在はCSS3が最新バージョンとなります。
CSSでは以下のような様々なことができます。
・文字の整形（フォント、サイズ、字間や行間、揃えなど）
・色の変更（背景や文字色）
・レイアウトの調整（ボックスサイズ、余白、段組など）
・要素の装飾（背景画像、グラデーション、角丸、影など）
・要素の変形（拡大・縮小、回転、傾斜、反転など）
・アニメーション効果
・画面サイズによってスタイルを変更する機能（メディアクエリ）
CSSをHTMLと紐付ける方法
CSSを適用させるためには、HTML文書に組み込む必要があります。組み込み方は以下の3種類です。（なお、「強度」とは、優先度を指します。つまり、特定のタグに複数の方法でそれぞれ別のＣSSが適用されている場合、「強度」がより強い方法で指定されたCSSが適用されるのです。）
・インライン（強度★★★/使いやすさ★☆☆）
HTMLのタグ内に記述する方法です。以下の例のように適用させたいCSSを、style属性を用いてタグの属性として指定します。インラインは最も強度が強いため、他の方法でCSSを指定していても、インラインで記述したスタイルが適用されます。
例：<h2 style=”color: #000;”>見出し2</h2>
ただし使いやすくはありません。というのも、特定のタグと適用するCSSが1対1の関係となってしまうため、同一文書内に繰り返し現れるタグ全てに同じCSSを適用するといった操作ができないのです。1対複数の関係を持たせられないので、必然的に記述の数は多くなってしまいます。したがって、使用される場面も限られます。
・内部参照（強度★★☆/使いやすさ★★☆）
HTML文書の<head>内に記述する方法です。
例：
<head>
･･･
<style>
h2{
color: #000;
}
</style>
</head>
インラインよりも使いやすくなりますが、欠点があるとすれば、記述したCSSを当該文書にしか適用できない点です。当該サイトが1ページしかないのであれば問題ありませんが、複数ページある場合は<head>内に記述したCSSは他のページには適用されません。
・外部参照（強度★☆☆/使いやすさ★★★）
外部参照とは、CSSファイルを別に用意して、HTML文書の<head>内でリンクとして読み込む方法です。読み込み方は以下の例の通り、linkタグを用います。hrefの属性値として与えているものがCSSファイルです。
例：
<head>
･･･
<link rel=”stylesheet” href=”style.css”>
</head>
<head>内に記述する点では内部参照と似ていますが、外部参照では上記の通りファイルを読み込むことによってCSSを適用させています。作成するサイトで複数のHTML文書が必要になったとしても、各文書に同じCSSファイルを読み込むことで、共通のスタイルを適用することができるのです。そして、全てのページで共通の整形が必要になったとしても、CSSファイルの当該箇所の記述を変更させるだけで、全てのページでスタイルの変更が行われます。
基本的にはこの外部参照が用いられることが多いです。本講座でもこの方法を利用します。
なお、CSSファイルを複数読み込む場合は、記述する順番に注意してください。たとえばメインの装飾用のCSSファイルと併せて、一般にリセットCSSと呼ばれる、HTMLタグのデフォルトの装飾を取り除くためのファイルが用いられることがあります。両者を併用する場合、基本的に「リセットCSS−＞メインの装飾用CSS」の順で読み込まなければなりません。
なぜなら、HTMLは上から順に読み込まれるため、「メインの装飾用CSS->リセットCSS」の順で記述してしまうと、せっかく「メインの装飾用CSS」で適用したスタイルが一部リセットされてしまう可能性があるからです。
CSSの基本の記述ルール
ではCSSの基本の記述ルールを確認しましょう。CSSは①どこの②何を③どうする、の3つで構成されます。
- セレクタ（どこの）
セレクタにはCSSの適用先や適用するタイミングを記述し、HTML文書の「どこの」部分にCSSを適用するかを指定します。セレクタの指定方法は、タグ名や属性名、「カーソルが乗っているとき（:hover）」など様々なパターンがあります。本講座では、個別の記述方法については実演部でその都度解説していきます。
- プロパティ（何を）
プロパティには背景色(background-color)やフォントサイズ（font-size）など、セレクタの「何を」変更するのかを指定します。プロパティもたくさんあるので、必要に応じて解説していきます。
- 値（どうする）
値では、具体的にどのような装飾を行うのかを記述します。たとえば、プロパティに背景色を指定したならば、値には具体的な色の名前が入ります。
色の指定方法はいくつかあるので、見出しを改めて解説します。
色の指定方法
CSSの値ではよく色が指定されますが、色の指定方法は複数存在します。
- 色名
端的に、「black」「white」「blue」といって色名で指定する方法です。
- 16進数
「#」の後ろに0〜ｆまでの16進数で色を指定する方法です。
例：#ff0000
基本は上記の例のように6桁の値になります。そしてこの6桁も機能別に2桁ずつに区切られます。すなわち、最初の2桁が「red」、真ん中の2桁が「green」、最後の2桁が「blue」と、それぞれの箇所で色の配分を16進数で指定するのです。
したがって上記の例では、「red」にあたる部分が「ff」となっており、また16進数のうち「f」が最も高い値となるので、「green」「blue」が共に「0」である「#ff0000」は「赤」を表示します。
なお「#ff0000」の「ff」や「00」のように、隣り合った値が同じであれば省略することもできます。「#ff0000」を省略すると「#f00」となります。
- RGB/RGBa
「red」「green」「blue」の各色の配分を、0〜255の値で指定する方法です。書き方は以下の通りです。
例：rgb(255,0,0)
丸括弧内は左から、「red」「green」「blue」の配分を0〜255の間で指定します。上記の例では「red」で最高値255を指定し、他が0となっているので「赤」が表示されます。
またRGBaでは「a」の部分で透明度を指定することができます。
例：rgba(255,0,0,1)
丸括弧内の項目数が1つ増えています。一番右側で指定しているのが透明度です。透明度（a）は0~1の値で指定します。つまり、「0」だと全く透明性はなく、「1」になると完全に透明になります。したがって透明度を指定する場合は、「0.5」や「0.8」といった小数点の値になることが多いです。
コメントの記述方法
CSSファイルを見返すときに、初心者は「このCSSはHTML文書のどこに適用しているのだろう」と迷ってしまうことがあります。そこで活躍するのがコメントです。コメントを用いれば、「ここからここまでは<header>のCSS、ここからは<main>のCSS」といった説明を残すことができます。そして上手にコメントを用いることで、自分だけでなく他の人も読みやすくなります。
コメントの挿入方法は以下の通りです。
例：/*ここはコメントです*/
「/**/」で囲うことでコメントになります。閉じ忘れをするとエラーの原因になるので注意してください。
CSSで使用する単位
CSSでは独自の単位が用いられます。特に注意すべきなのは、「相対値」とよばれるものです。「相対値」もフォントサイズを指定するときの相対値と、幅や高さを指定するときの相対値があるので、個別に解説します。
CSSで使用する単位：フォント
フォントサイズを指定するときに用いる単位は複数あります。
・絶対値
フォントサイズを絶対値で指定すると、どのブラウザで見ても指定した値に固定されます。単位はpx(ピクセル)です。以下の例では、どのブラウザで見ても10pxで表示されます。
例：font-size: 10px;
・相対値
相対値は基準とするものによって、「em(エム)」と「rem(レム)」に分かれます。
emとは親要素のフォントサイズを1として、相対的な値を指定する単位です。したがって「1em」は親要素と同じフォントサイズとなります。
なお親要素とは、入れ子構造になっている要素の関係性を示す言葉です。要素の中に要素があるような入れ子構造の場合、包含している要素が親要素で、包含されている要素が子要素です。この関係は相対的で、ある視点からは子要素であっても、その子要素の中に別の要素があれば、そこでも別の親子関係が生まれます。
例：font-size: 2em;
上記の例では、親要素が10pxの場合「10×2」となり20pxとなります。または親要素が30pxの場合、「30×2」となり60pxです。このように、同じ「2em」でも親要素によって実際の値は変動します。
一方でremは、ルート要素(html要素)を1として、相対的な値を指定する単位です。ルート要素は特に変更しなければ16pxなので、「1rem」=16pxとなります。
例：font-size: 2rem;
上記の例では、「16×2」で32pxとなります。
emとremを整理すると次のようになります。
| フォントサイズの単位 | 基準 | 計算方法 |
| em | 親要素が基準 | 親要素のフォントサイズ×指定した値 |
| rem | ルート要素（html要素）が基準 | ルート要素のフォントサイズ×指定した値 |
CSSで使用する単位：ビューポート
幅や高さなど、ビューポートに関連する単位にもいくつか種類があります。ビューポートとはWebページを表示させる領域のことです。
・絶対値
絶対値は以下のようにpxで指定します。（なお、幅を指定するプロパティは「width」、高さを指定するプロパティは「height」です。）
例：width: 50px;
・相対値
フォントサイズと同様に、相対値は基準とする対象によって単位が変わります。
まずは%（パーセント）。%は親要素に対する割合を指定します。フォントサイズにおけるemと似たような機能を持ちます。
そして他にvh/vwがあります。それぞれ「Viewport Height」と「Viewport Width」のことで、ユーザーが見ているビューポートの高さ/幅に対する割合で指定する単位です。100vh(vw)で画面の高さ（幅）100％となります。
マージンとパディング
次はCSSで重要な「余白」の考え方について解説していきます。余白についての諸々の概念を正しく把握していなければ、要素を思った通りに配置することができません。
さて、1つの要素が持つ領域は、以下の画像におけるオレンジのエリア以下全体です。そして、余白を含めた領域全体のことをボックスと呼びます。
では、色分けした各エリアについて解説していきます。
・コンテンツ領域
コンテンツ領域はコンテンツ（文字等）のみを表示させる領域です。したがって、たとえば隣り合った要素の余白を全て消した場合、2つのコンテンツがくっついて表示され非常に見づらくなります。
・border（ボーダー）
ボーダーは内側の余白と外側の余白の境界線のことです。CSSにおけるボーダー（境界線）は、内と外によって消極的に定義されるものではなく、それ自体固有の機能を持っています。そのため、「border~」のようにプロパティを指定して、ボーダーの色や太さなどを変更することもできるのです。
・padding（パディング）/ margin（マージン）
パディングとは、ボーダーの内側の余白、またはコンテンツ領域とボーダーの間の領域のことを指します。役割のイメージとしては要素を太らせる感じです。paddingには「詰め物をする」や「水増しする」といった意味があります。
対して、マージンはボーダーの外側の余白を指します。役割としては、要素間に間隔を持たせたい場合などに用います。marginはそのまま「余白」を意味する単語です。
両者は特に背景に関して特徴的な区別がなされます。たとえば、ある要素に背景色として赤を適用した場合、パディングまでは赤く装飾されますが、マージン領域には背景色が適用されません。
以上のように、それぞれの余白には固有の役割と機能が与えられているので、同じ余白だからと適当に扱わず目的に応じた操作をするようにしましょう。
開発ツール（デベロッパーツール）
実演に入る前に、HTMLとCSSを書く際に便利な「開発ツール」というものを紹介しておきます。開発ツールには開発者に便利な機能が詰まっているのですが、その1つの機能として、表示中のWebページのHTMLとCSSを実験的に操作することができるのです。
基本的にどのブラウザでも似たような開発ツールが備わっていますが、本記事ではGoogleChromeの開発ツール（デベロッパーツールと呼びます）の使い方を簡単に解説します。
まずブラウザ上を右クリックして、下の方にある「検証」を選択してください（GoogleChrome以外でもだいたい同じような操作で開くことができます）。すると右側にソースコードが書かれたものが出てきます。
もし画像の通りの表示にならなければ、「Element」以外のタブを開いている可能性があります。その場合は次の画像左上の「Element」というタブを選択してください。
以下では、デベロッパーツールを用いてHTMLとCSSの操作方法を別々に見ていきます。より細かい操作方法については、自分でいじったり調べたりしてみてください。
HTMLを操作する
下の画像のようになっている場合、大きく分けて上半分はHTML、下半分はCSSに対応しています。
まずは上半分のHTMLをいじって見ましょう。ソースコードのbody内の任意の部分を選択します。（▶マークを選択すると、その要素の中を展開して、子要素を表示します。）選択すると、左側に「･･･」がでてきます。
「･･･」をクリックすると、メニューが出てくるので「Edit as HTML」を選択します。すると次の画像のように、編集可能状態になるはずです。
この状態になると、本講座でここまでやってきたようなHTMLの編集が行えます。たとえば編集可能になっているコード全てを消してデベロッパーツールの編集エリア外をクリックすると、左側のページに瞬時に反映され、当該箇所が丸々消去されます。
とはいえ、デベロッパーツールでどれだけ編集しても見ている画面上での変化だけで、サイト本体には何の影響もありません。ページをリロードすると元通りです。
また、「この部分のソースコードを見たい」という時は、次の画像にある左隅のポインターマークを選択してください。
すると選択モードに切り替わり、左側のページ上でポインターを動かすといろんな色が出てきます。その状態でソースコードを確認したいパーツをクリックすると、デベロッパーツールで当該箇所のソースコードに移動します。
CSSを操作する
次はCSSをいじってみましょう。CSSは次の画像の下半分のエリアで編集することができます。
CSSのエリアは、上のHTMLのエリアと連動しているため、HTMLのエリアで任意の要素を選択すると、その要素のCSSが下半分に表示されます。
赤い文字になっている部分がCSSのプロパティにあたり、その右側に値が書かれています。まずは適当なプロパティを消して見ましょう。消したいCSSの上にポインターを持ってくると、次の画像のように左側に青いチェックマークが表示されます。
このチェックを外すだけで、そのCSSが解除されます。
プロパティや値の内容だけを変更することもできます。値の上でダブルクリックしてみてください。次の画像のように編集可能状態になります。
以上のように、デベロッパーツールを用いることでHTMLやCSSの動きを実験してみたり、既存のWebページがどのようなコードを書いているのかを確認したりすることができるので、どんどん活用していきましょう。
VSCode実演
ではCSSを中心にVSCode実演の続きを再開していきます。CSSだけではなくHTMLの内容も都度変更するので、index.htmlファイルも開いておいてください。VSCodeでは以下の画像のようにエディター画面を分割して、一方ではHTML、もう一方ではCSSを同時に開くことができます。
分割する方法は、上記の分割済みの画像にも写っていますが、エディター画面の右上にある次の画像の本のようなマークを選択してください。
デフォルトでは編集中のファイルが複製されますが、タブをドラッグ&ドロップすることで簡単に移動することができます。
では、事前準備ができたところでコーディングに入っていきます。様々なプロパティが出てきますが、全てその場で覚えようとする必要は無いです。よく出てくるものは自然に覚えますし、そうでないものも、本講座で「こんな操作ができるプロパティがあるんだ」と経験しておくだけで十分意味があります。
また本記事では便宜上はじめに完成形を示していますが、自分でコーディングする場合は、少し記述する度に「ファイルの保存->ブラウザで確認」を行うようにしてください。CSSでは、「どの記述がHTMLにどう作用しているのか」をしっかり把握しておくことが重要です。
- CSSファイルの作成
ここまでの画像ですでにCSSファイルが作成されていますが、まだ作っていない人は、kiso-kozaフォルダ直下に「style.css」という名前のファイルを作ってください。CSSファイルはこのように、ファイル名の最後に「.css」を付けることで作成することができます。
- HTMLでCSSファイルを読み込む
外部参照を用いてCSSファイルを読み込みます。次の画像のように、</head>の上に<link>を記述します。
- HTML全体に適用するCSSの設定
まずは個別の要素ではなく、HTML全体に共通のCSSを記述していきます。最終的には以下の通りです。
・1行目/13行目
コメントで挟み込んで、「共通項目に関する記述部」を囲います。今回は▼/▲で始めと終わりを示していますが、この記号は自分で分かりやすいものを使って大丈夫です。
・html（セレクタ）
HTML全体のフォントを変更します。プロパティは「font-size」を使用し、値は「62.5%」です。これは、先述したルート要素のデフォルトのフォントサイズ（16px）に対する割合です。62.5%で「10px」です。
・body
body要素に付与されているデフォルトの余白を消しています。余白を消す前は次の画像のように、左側と上部に不要な空白ができているためです。見やすくするため背景を一時的に青くしています。
これに対してマージン・パディングを0にすることで、余白が消えます。
・h2
HTMLにはh2要素が複数あるので、全てに共通する装飾を施していきます。
「font-size: 2.8rem;」では、h2のフォントサイズを「ルート要素のフォントサイズの2.8倍」に設定しています。remは先述の通り、ルート要素のフォントサイズを基準にした単位です。そして、ルート要素のフォントサイズは3行目で10pxに変更したので、h2のフォントサイズは「28px」になります。
「text-align: center;」ではh2を中央に配置しています。text-alignプロパティではテキストの行揃えを設定することができます。値はcenter以外にもleftやrightなどがあります。
ここまでをブラウザで確認してみましょう。
- ヘッダー要素の記述
次はヘッダー要素の記述をしていきますが、同時にHTMLも随時変更していきます。まずは最終的な形を提示しておきます。
便宜上、画像の流れの通りには説明しません。自分でコーディングする際も、以下の記述の流れに沿うことで、各記述の影響関係が分かりやすくなります。
・.main
「.main」はセレクタですが、HTMLの<main>を表しているわけではありません。「.」を付けることで、class属性で名付けた要素を指定するのです。したがって、ここでは「class=”main”」の属性を与えた要素を指定しています。しかし、現時点ではそのような属性はないので、追記する必要があります。
次の画像のように、<header>直後の<img>の内の最後に「class=”main”」を追記してください。
こうすることでHTMLに複数ある<img>のうち、「『class=”main”』が付いた<img>」をセレクタで指定することができるようになります。
さてCSSの方に戻って、「width: 100vw;」を見ていきましょう。「100vw」とすることで、当該画像の横幅をユーザーが見ている画面（ビューポート）いっぱいに表示させることができるようになります。これによって、今まで画像の右側にあった広い空白が消えます。
・nav
「text-align: center;」で、ナビゲーションを中心に配置します。
・nav a（28〜29行目）
「nav a」という新しいセレクタの指定方法がでてきました。このように複数の要素名を半角スペースで区切って記述することで、「nav要素の中のa要素」を指定することができます。
さて、現時点ではa要素が無いのでhtmlを以下のように編集します。
では、CSSに戻ります。28行目の「text-decoration: none;」では、要素に付与されているデフォルトの装飾(decoration)を消去することができます。ここでは<a>にデフォルトの下線が消去されました。しかしまだ<a>にデフォルトの青い文字となっているので、「color: black;」で文字を黒くします。
・nav li
まずは「list-style-type: none;」によって、<li>にデフォルトの黒い点を消去します。そして文字サイズも「1.6rem」に変更しましょう。
さて次は「displey: inline;」です。displeyプロパティはボックスの種類を変更するプロパティで、ここでは「li要素をインライン要素に変更」することを宣言しています。
「マージンとパディング」の見出しでボックスの考え方を説明しましたが、じつは、ボックスは余白の有無などの違いでいくつかのタイプに分かれます。現時点では「インライン要素」と「ブロックレベル要素」という大きな分類を理解しておきましょう。（インライン要素・ブロックレベル要素という分類はHTML4まででしたが、CSSを扱う場合には有効な区別です）。
インライン要素の特徴は、幅や高さが指定できない点にあります。そしてインライン要素は列記しても改行が行われず、横並びになります。対してブロックレベル要素は、前後が改行され、幅や高さなど様々な操作を行うことができます。各要素はどの要素タイプなのかが決まっているので、必要に応じて調べて見てください。
以上を踏まえた上で、「li要素をインライン要素に変更する（display: inline;）」という記述によってどのような変化が起こるかというと、元々ブロックレベル要素であるため改行されていた<li>の各項目が、インライン要素に変わり横並びで表示されるようになります。
実際のブラウザ上の表示で確認して見ると、もともと以下のように縦並びだった<li>の各項目が、
「display: inline;」と記述することで、次のように横並びに変更されています。
しかし、これでは各項目が近すぎて格好が悪いので修正していきます。そこで、もう一度「nav a」に戻りましょう。
・nav a(27,30行目)
インライン要素は操作性が低いという話をしました。そこで、「display: inline-block;」によって<a>をインラインブロック要素に変更します。インラインブロック要素は、インライン要素のように配置されながら、ブロック要素のようにマージンやパディングを自由に変更することができます。
<a>の余白を操作できるようになったので、「padding: 20px 10px;」でパディングを変更して項目間の見かけ上の余白を設定します。
paddingの書き方ですが、いくつかのパターンがあります。今回のように、半角スペースで区切って2つの値を設定すると、前者が「上下」、後者が「左右」の値になります。値を1つだけ設定すると（例：padding: 20px;）、「前後左右」のパディング全てが20pxになります。そして値を4つ設定すると(例：padding: 10px 20px 30px 40px;)、時計回りでそれぞれ「上 右 下 左」の値になります。
以上を整理すると表の通りになります。なお、以下の表はmarginにも同じように適用可能です。
【padding（margin）の値の個数と適用場所の関係】
| 値の個数 | 例 | 適用場所 |
| 1個 | padding: 10px; | 上下左右（上下左右全て10px） |
| 2個 | padding: 10px 20px; | 1つ目=上下 2つ目=左右 （上下=20px、左右20px） |
| 4個 | padding: 10px 20px 30px 40px; | 時計回りに、 1つ目=上 2つ目=右 3つ目=下 4つ目=左 （上=10px、右=20px、下=30px、左=40px） |
※以上に加えて、個別に「padding-top(right,bottom,left)」で指定することもできます。
・nav ul
ここではナビゲーションメニューであることを分かりやすくするため、上下に線を引きます。ここで登場するのが、「マージンとパディング」の見出しで説明したborder（境界線）です。
border-top/border-bottomで上下にボーダーを入れることを宣言します。そして値は、左から「線の種類」「線の太さ」「線の色」を表しています。
ではここまでをブラウザで確認してみましょう。
一番上の画像が横幅いっぱいに表示され、ナビゲーションも画像の通り各項目に余白があり、上下に色つきの線が入っているでしょうか。
ヘッダーのCSSは一旦ここで終了です。一旦というのは、後々追記があるからです。特にナビゲーションの上にあるロゴの配置を変更しなければなりません。ですが、とりあえず次に進みます。
- 「お知らせ」部分の記述
次は<main>の中の1つめの<section>にCSSを適用していきます。今回は以下の画像のように記述します。
・.news-topics（display: flex;）
セレクタに「.news-topics」を指定していますが、現時点ではnews-topicsというクラスが存在していません。そこでまずは、次のようにhtmlを編集します。
既存の<img>と<ul>を、divタグ（<div>〜</div>）で囲っています。このような操作を言語化すると、「divタグで、<img>と<ul>をグループ化した」となります。<img>と<ul>を<div>で囲うことによって、CSSで<div>の子要素としてまとめて操作できるようになるのです。そしてまさに、グルーピングによってこそ「display: flex;」が機能するようになります。
flex、またはFlexbox（フレックスボックス）とは、要素のボックスを自由に配置させるためのレイアウト手法、またはそのような配置が可能なボックスの種類のことを指します。「display: flex;」とすることで、指定している要素（ここでは<div>）の子要素（ここでは<img>と<ul>）はFlexboxとなり、子要素のボックスが左から右へと配置されます。
今回は使用しませんが、Flexboxではボックスを「自由に配置」できると説明したとおり、ボックスを右から配置させたり、折り返しの場所を指定したりすることもできます。
ここで1つデベロッパーツールの便利な使い方を説明します。デベロッパーツールを開いて、先ほど記述した<div class=”news-topics”>の箇所を選択してください。すると下半分のCSSエリアに次のように表示されます。
次に「display: flex;」の横の長方形が6つ並んだマークを選択してください。すると次のようなポップアップが表示されます。
このポップアップ内をつかうと、様々な配置のパターンが実験できます。適当な項目を選択してみると、次のようにリアルタイムで配置が変更されます。元々中央にあったものが右寄せになり、リスト項目が下揃えに変わっています。
そして、ブラウザ上での配置が変わるのと同時に、それに対応してCSSも変化しています。そのため、気に入った配置が見つかれば、その状態のCSSをコピーして自分のCSSファイルにペーストする、といった使い方もできます。
・news-topics（align-items: center;）
align-itemsプロパティは、子要素の縦方向の位置揃えを行うために用います。「display: flex;」では<img>と<ul>が上揃えになってしまっているので、「align-items: center;」を記述して縦の中央揃えにします。
・news-topics（justify-content: center;）
一方でjustify-contentプロパティは横方向の位置揃えを行うために用います。現在は左揃えになっているので、値にcenterを設定して、横に中央揃えにします。
ではここまでをブラウザで確認しましょう。
今回の実演は以上になります。
まとめ
本記事ではCSSの基礎知識やデベロッパーツールの使い方を解説しました。CSSは記述方法こそ簡単ですが、非常に奥が深いです。プロパティは必要に応じて覚えればよいと説明しましたが、使うときはその意味をしっかり理解して使わなければなりません。そうしないと、自分が予期しない動きになったり、その場合にどこに問題があるのかを把握することができなくなります。
とはいえ最初のうちは、プロパティや値を探り探り記述していくことになるでしょう。ミスして書き換えてを繰り返しながら覚えていくことが重要です。はじめのうちからプロパティの意味やプロパティ間の影響関係を理解しようと努めながら練習することで、無駄のないコーディングができるようになります。
次回はどんどん実演を進めていきます。
コメント