目次
本文
※本記事は「HTML&CSS 基礎講座（全4回）」の第3回目の内容を踏まえて作成しています
第3回目はVScodeの実演が中心となりました。CSSでよく用いられるレイアウトに関する重要なプロパティの解説もあったため、今回の内容を身に付けることができれば表現の幅が大きく広がります。
本講座では、講座内容をただの知識で終わらせないために、講座参加者自身が実際に1つのサイトを作ることをゴールとしています。本記事でHTML&CSSを勉強する人も、実際に手を動かしてみることをおすすめします。自分で記述したHTML&CSSがブラウザにちゃんと反映されていると、格別の達成感を得られるはずです。
VSCode実演：前回の続き
早速VSCode実演の続きに入っていきます。今回は、前回（第2回）の最後に課題として出された、「Google Fonts」の導入から始めます。（講座内では課題の位置づけなので、読者の皆さんもまずは自力で調べて実装してみることをおすすめします）。
1. 【課題】Google Fontsの導入
課題はGoogle Fontsのうち、「kiwi Maru」というフォントを作成するページに導入するというものです。まずは「Google Fonts」と検索してホームページを開いてください。 およそ以下の通りになるかと思います。
そして画像上部の「Search」で「Kiwi Maru」と検索します。候補が出てきたら（おそらく一件だけです）、「Kiwi Maru」を選択してください。すると以下のようなページに遷移します。
3列並んでいますが、全て同じ「Kiwi Maru」で太さが違います。今回は全ての太さを選択します。右側にある「＋ Select this style」を3つチェックしてください。以下の画像は、全てにチェックを入れたものです。
もし右側に画像のようなエリアが出てこなければ、上記画像の上部にある「Download Family」の隣にある正方形とプラスが並んでいるマークを選択すると、画像の通りになります。
次に右側のエリアにある、「Use on the web」のグレーの背景に書かれたHTMLをコピーしてください。そしてそれを作成中のHTML文書の<head>の中にペーストします。
そしてさらに少しスクロースすると出てくるCSSもコピーして、CSSのセレクタhtmlの中にペーストします。
なお、Kiwi Maruのうしろにカンマで区切って記述されている値は（画像では「serif」）、ブラウザ環境の影響でKiwi Maruが表示されなかった場合の代替として用いられるフォントです。必ずしも2つである必要はなく、カンマで区切れば好きな数だけ優先させるフォントを指定できます。逆にKiwi Maruしか記述していない場合、Kiwi Maruが非対応だった時に何も表示されなくなる可能性があるので、できるだけ複数指定するようにしましょう。
よく見ると、Kiwi Maruはクオテーションで挟まれていますが、serifは裸の状態で記述されています。この違いは、フォントの固有名か一般名かの違いです。すなわち、「明朝体（serif）」や「ゴシック体（sans-serif）」などの大まかな分類（一般名）を指定する場合は、クオテーションなしで記述が可能となります。
基本的には、固有名のフォントを複数パターン用意しておいて、どれも非対応だった場合の備えとして末尾に一般名のフォントを配置するパターンが多いです。
例：font-family: ‘フォント名1’, ‘フォント名2’, ･･･, 一般名のフォント（serifなど）；
Google Fontsの導入は以上になります。
2. サイト全体の文字色を読みやすく変更
ここでHTML全体の文字色をわずかに変更します。先ほどペーストしたfont-familyの下に、「color: #333;」を追記してください。
いわばUX向上の1つの小技として、元々黒かった文字色を少しだけ薄くしています。というのも、今回作るサイトのように背景色が白く、文章を読ませる割合が多い場合、完全に黒だとコントラストが強すぎて疲れやすくなってしまうためです。こうした細かな配慮の一つ一つが全体的なUX向上につながるので、ぜひ覚えておくと良いでしょう。
3. メイン画像の上にロゴを配置する
今回は始めにブラウザ上での完成図を提示して、以下で説明する記述がどのような関係性にあるのかのイメージを持ちやすくします。ここでは現状で、次のようになっているものを、
下のように修正します。
つまり、メイン画像（白猫）の上にロゴ（王冠の猫）を配置します。HTMLでは、「メイン画像<img~>」の直下に同じ階層の「ロゴ<h1>」が記述されているのですが、<h1>がブロックレベル要素（前後が改行される要素。詳しくは前回の記事を参照のこと）であるため、このままでは両者を重ね合わせることができません。そこで、前回の記事でも行ったグループ化という操作が必要となります。
では、以上を踏まえた上でHTMLとCSSの最終的な形を提示します。
【HTML】
【CSS】
・HTMLへの追記
まず、<img>と<h1>を<div>で囲います。<div>で囲われた2つの要素が子要素となるので、インデントを下げて階層を分かりやすくしましょう。そして、<div>と2つの<img>にclassで名前を付けます。
・ロゴをメイン画像の上に配置—relativeとabsoluteについて—
「.logo」には細々としたことが書かれていますが、まずは最も大きな操作を取り出して説明します。すなわち、「position: relative;」と「position: absolute;」です。両者はセレクタをまたいでセットで用いられることが多いので、併せて覚えておきましょう。
relative/absoluteの関係性は、ある要素にrelativeを指定することで、その要素を基準にabsoluteを指定した要素を自由に配置（絶対配置）することができるようになる、というものです。位置の指定はtop,bottom,left,rightのいずれかで行います（単位はpxや%）。たとえば、「top: 0;」と「left: 0;」とすると基準要素の左上にぴったりと重なり合います。
今回は「.catch」を基準としてロゴ画像の配置場所をtopとrightで指定しており、それぞれの値は「top: 30%;」「right: 0;」となっているので、 ロゴ画像は<div class=”catch”>の右側、上から30%の距離に配置されます。
4. 「お知らせ」部分の整形
次は「ドマーニャからのお知らせ」の表示をもう少し見やすく変更します。以下のように、お知らせのカテゴリーにあたる箇所を色分けしていきましょう。
コードは次の通りです。
【HTML】
【CSS】
以降の解説では、細かい余白の調整などの説明を省略します。記述されているpaddingやmarginがどのように機能しているかなどは、都度その記述をコメントで囲って解除するなどして確認してみてください（コメントを使って機能を一時的に解除することを「コメントアウト」と言います）。
ちなみにVSCodeでは、解除したい記述を選択して「command＋/」（windowsは「Ctrl＋/」）を入力すると、その部分が一発でコメントアウトされます。元に戻す場合も同じです。
・HTMLへの追記
まずは<main>内の1つ目の<section>に「class=”news”」を追記します。そして<li>のテキスト部分のうち、お知らせのカテゴリーを<span>で囲んで、それぞれの<span>に画像のようなclassを付与してください。その際、元々あった隅付き括弧を消すのを忘れないようにしましょう。
さて<span>についてですが、これは囲った範囲をインライン要素とする機能をもちます。今回のように、テキストの特定の部分だけにCSSを適用させたい場合などに用います。
また<span>のclass属性を見ると、値が半角スペースで区切って2つ書かれています。前者はtagで共通しており、後者には個別の名前が与えられています。class属性の属性値はこのように複数個与えることができ、これを上手く用いることで効率的にCSSを記述することができるのです。実際にどう機能するかは、以降のCSSを解説するパートでみていきます。
・.news li
border-bottomプロパティで、それぞれのお知らせの下に下線を引きます。前回の記事ではsolidという線を用いましたが、ここではdottedで点線を表示させます。そして隣に「1px（線の太さ）」「#333（線の色）」と続けます。
・.tag
4つ連続する<span>のclass属性のうち、tagは4つ全てに共通する値です。まずはtagだけを取り出しセレクタで指定することで、4つの<span>に同じCSSを適用します。では、「.tag」の中を見ていきます。
まずは「display: inline-block;」。デフォルトでは<span>はインライン要素であるため、そのままではマージン・パディングを自由に変更することができません。そこでインライン要素を保ちながら、かつマージン・パディングを操作できるようにするためにインラインブロック要素に変更します。
次にborder-radiusです。このプロパティではボックスの角を丸くすることが可能です。数値が大きければ大きいほどカーブも大きくなります。border-radiusを用いれば、円を作ることもできます（border-radius: 50%;）。
border-radiusの値は何を指しているのかと言うと、ボックスの角を円の一部と見た場合の半径の値です（radiusは「半径」を意味します）。角が直角であれば円の一部とはならないので、半径も0でborder-radiusも0の状態です。しかし角を少し丸めると、その角丸部分を一部とした小さな円を描くことができます。そしてその円を大きくする（半径を大きくする）値こそが、border-radiusの値です。
・.hogo〜.satooya
「.tag」で4つの<span>に共通するCSSを適用したので、つぎは「.tag」の後ろの属性値を指定して、それぞれに固有の装飾を施していきます。とはいえ「.tag」で文字色なども変更しているので、ここで変更するのは背景色のみです。画像を参考に、それぞれの背景色を適用してください。
ここまででブラウザ上の表示を確認して見ましょう。「4. 「お知らせ」部分の整形」の冒頭で提示した画像の通りになっているでしょうか？
5. 「ドマーニャのメンバー」部分の整形
では次に「ドマーニャのメンバー」にあたる<section>を整形していきます。最終的には次の画像の通りになります。
HTMLでは猫画像の列挙に<li>を用いていましたが、もともとこれらの画像は縦に並んでいました。では、上の画像のように並べるにはどうするとよいでしょうか。値を工夫する必要はあるものの、実はすでに用いたあるプロパティで簡単に配置換えをすることができます。次のCSSの画像を見る前にどんなプロパティを使えばよいか、ぜひ一度考えて見てください。
【HTML】
【CSS】
ここでも全ての内容を説明することはしません。各プロパティ（またはその値）の挙動がイメージできなければ、都度コメントアウトしたり、値を変えたりしながら確認してください。
・HTMLへの追記
該当<section>にclass=”member”を与えます。そして</section>の上にある<a>にはclass=”more-btn”を追記してください。ちなみに、btnはbuttonの省略形としてよく用いられます。
・.member ul
猫画像の配置を整えるために、「.member ul」で「display: flex;」を使用します。これは、指定した要素の子要素のボックスを左から右に配置するものでした。
なお、あくまでdisplayを使うのはul要素に対してです。つまり<li>の配置に関わる操作だからといって、「.member li」に対して用いるわけではありません。子要素（<li>）全体の配置を整えるので、親要素（<ul>）で配置を指定しなければならないのです。プロパティの影響範囲と要素の階層との関係は常に意識するようにしてください。
さて今回は<li>の数が多いので、「display: flex;」だけでは要素が左から右に配置されるだけで、ボックスからはみ出してしまいます。もし「flex-wrap: wrap;」まで書いているならば、一度コメントアウトしてブラウザ上での表示を確認してみてください。次の画像のようになってしまうはずです。
そこで「flex-wrap: wrap;」の出番です。今回のように扱うフレックスボックスの数が多い場合は、flex-wrapプロパティを使って、折り返しを実現します。
次に「justify-content: space-between;」です。これは、横に並べた要素間の空間を均等に配置するために用います。
では、ul全体が中央に寄っているのはなぜかというと、これはmarginの指定によるものです。marginの値をみると、上下は0で、左右がautoになっています。autoに指定することで、左右の余白が自動的に同じ大きさになり、結果的に中央寄せになるのです。
・.member img
ここでは「display: block;」を指定しています。つまり、<img>をブロックレベル要素に変更しているのです。この指定が無ければ次のように、猫画像とテキストが横並びになってしまいます。
原因は<li>の中にある<img>とテキストがともにインライン要素（またはフレージングコンテンツ）であるためです。改行が行われないインライン要素が<li>の中で同居しているため、両者は横並びになってしまいます。そこで解決策となるのが、<img>をブロックレベル要素（前後が改行される要素）に変更することです。
・.more-btn
ここでは、今まで利用してきたプロパティを駆使してボタンを作成しています。復習にもなるので、1つ1つのプロパティの役割を確認しながら作ってみてください。1つポイントを挙げるとすれば、<a>はもともとインライン要素なので、「display: block;」とすることが基点になります。
6. 「私たちについて」部分の整形
では次の<section>の整形を行っていきます。最終的に以下のような表示になります。
<section>の各要素が折り重なるように配置されています。このような重ね合わせの配置も、すでに用いたプロパティが役に立ちます。ヒントはヘッダーにあります。
【HTML】
【CSS】
・HTMLへの追記
まずは該当<section>にclass=”about”を与えます。そして<h2>と2つの<p>を囲うように、class=”about-container”を与えた<div>を記述してください。最後に2つある<img>にも画像の通りにclass属性を付与します。
・.about
要素の重ね合わせを実現するために必要なのが、positionプロパティのrelative/absoluteです。そこで、あらかじめ基準（relative）を「私たちについて」部分の全体を囲っている<section class=”about”>に与えておきます。
またheightを100vhとすることで、<section class=”about”>全体が画面の高さいっぱいに表示されるようになります。
・.about-container
<div class=”about-container”>は次の画像の部分にあたります。このエリアは、完成画像のなかでは中央に配置されています。
そこで<section class=”about”>要素を中央に配置するため、まずは「.about-container」に「position: absolute;」を付与する必要があります。このabsoluteに対応しているのは、もちろん「.about」に記述した「position: relative;」です。
absoluteを与えたことで、<section class=”about”>を基準に自由な場所に配置できるようになりました。そこで、次は中央に配置するための記述が必要になります。それが次の画像の記述です。まずは上下左右を0にしてから、marginをautoに指定して中央寄せにします。
なお「z-index: 2;」については、「.about-cat-img2」の部分の解説と併せて説明します。
・.about-container p
次は<p>を整形します。初出情報としてはline-heightプロパティのみです。line-heightプロパティは行間を指定するために用いるプロパティとなります。
・.about-cat-img2
女性の画像を右下に配置するためには、まず「position: absolute;」とします。このabsoluteが基準とするのも、relativeを与えた「.about」です。先に、「.about-container」にもabsoluteを与えましたが、このように1つrelativeに対して複数のabsoluteを対応させることもできます。
absoluteを指定して絶対配置ができるようになったので、次は右下に配置するための記述を行います。右下に置くためには、右からの距離が0、かつ下からの距離が0でなければなりません。よって必要な記述は「right: 0;」と「bottom: 0;」です。
さて、「.about-container」にも記述したz-indexプロパティですが、これは重ね順を指定するためのプロパティです。値の数値が大きいほど上に重なります。今回は「.about-cat-img2」を下に、「.about-container」を上に重ねるために、前者を1にして後者を2にしました。とはいえ、結局「.about-cat-img2」<「.about-container」となればよいので、数字が1と2である必要はありません。1と100などにしても大丈夫です。
7. 「営業時間・アクセス」部分の整形
次は「営業時間・アクセス」部分の整形を行っていきます。最終的なブラウザの表示は以下の通りになります。
【HTML】
【CSS】
・HTMLへの追記
今回は「営業時間・アクセス」にあたる<section>にclass=”access”を追加するだけです。
・dl
まずは「display: table;」として<dl>をtable要素と同様のボックスに変更します。これに「margin: auto;」を与えることで中央寄せになります。
・dt/dd
floatという新しいプロパティが出てきました。floatプロパティでは、指定した要素を値の場所(leftやright)に寄せ、後続の要素をその隣に回り込ませることができます。
<dt>は飛び飛びに複数あり、それぞれ直後に<dd>が続いています。したがってdtに「float: left;」とすることで、左に寄った<dt>の右側に、後続の<dd>が回り込んで配置されるのです。しかし、そのままでは<dt>と<dd>の間が狭いので、ddに「margin-left: 150px;」を与えて<dd>の左側に空間を与えます。
8. <footer>の整形
続いて<footer>にもCSSを適用していきます。ブラウザ上の表示は次のようになります。
ここではHTMLの変更はありません。
【CSS】
基本的に背景色や余白、画像サイズの変更のみで新しい情報はありません。ただし、余白を調整する上で要素のdesplayを変更しています。
まとめ
本記事では前回までの知識が存分に用いられ、さらにpositionプロパティなどのレイアウトに関する重要なプロパティの解説も行いました。少しレベルの高い内容になりましたが、本記事内で紹介した技術はどれも現場では頻繁に用いるものです。何度も読み返し、1つ1つのプロパティの役割を吟味しながら、しっかり身に付けていきましょう
今回でほとんど目的の状態に近づきました。最後となる次回は、さらにデザイン性を高めていきます。
コメント