どうもフリーランスプログラマのTakaです。
さて、前回まで3回に渡りコンテンツセクションのCSSコーディングについて解説してきましたが、今回は最後のコンテンツセクションであるCONTACTセクションのCSSコーディングについて解説していきたいと思います。このプロジェクトも13回目ですが、今回でようやくPCに関しては全体の見た目が完成品と同じ感じになるのではないかと思います。
最初はもっとコンパクトで解説できるかと思っていたのですが、意外と記事数も増えてしまいましたね（笑）
ここまでのおさらい
まずは、いつも通りここまでの本プロジェクトのおさらいですが、本プロジェクトで作成するサンプルページの見本はこちらになります。
そして、前回まででindex.htmlの基本的なマークアップコーディングとヘッダー、フッター、メインエリアのCSSコーディングまで進めてきました。なお、ここまでのソースコードに関しては、少し長くなってしまうのでこれまでの記事を参照してください。
CONTACTセクションのCSSコーディング
では、前回までと同様にクラスやidを付与する前のコードをまず確かめて、それからカスタマイズをしていきたいと思います。
まず、CONTACTセクションの見た目は下図のようになっています。
これまでのコンテンツセクションと同様、まずタイトルがありますね。そして、タイトルの下に簡単なリード文があって、各問い合わせ先の「Twitter」、「Facebook」、「メール」の3つのアイコンが横に並んでいる感じですね。
では、ここで一旦CSSを適用する前の現状のマークアップコードを確認してみましょう。
このような感じで、基本的な構成はこれまでのコンテンツセクションと同じですね。全体をsectionタグで囲って、セクションタイトルはh3タグで指定、リード文はpタグ、それから各アイコンボタンはul（順不同リスト）でマークアップしていています。
ちなみに、各アイコンはhead内で読み込んだFontawesomeを使っています！
それでは、上記のコードにidやクラスを付与していきましょう。
idとクラスを付与
今回は下記にようにidとクラスを付与してみます。
まずは、全体を囲っているsectionタグに前回までと同様に識別idを付与します。それからその直下のdivタグにもこれまで同様innerクラスを付与し、セクションタイトルであるh3タグはそのままになります。リード文のpタグも特に何も付与しなくても希望通りの見た目になるのでそのままにしておきます。
続いて、アイコンのリストにはそれぞれの色を指定する必要があるので、各liタグにそれぞれ「twitter」、「facebook」、「mail」といったかたちでクラスを付与しています。
CONTACTコンテンツのCSS
では、上記のマークアップに合わせてCSSでスタイルを適用していきたいと思います。今回は下記のようにそれぞれスタイルシートを適用してみたいと思います。
まず、最初のセレクター（全体を囲っているsectionタグ）で、「background-color（背景色）」、「color（テキスト色）」プロパティでセクション全体の色を指定し、またテキスト位置も中央寄せに指定します。
次に、pタグ（このセクションではリード分）にmarginプロパティで下に30pxのマージンができるように指定しています。
ここまでは単純なスタイリングなので簡単ですね！
続いて、このセクションのメイン部分にあたるアイコンリストですが、少し複雑なスタイリングになります。まず、ulタグに「display: flex;」を指定し子要素（ここではliタグ）が横並びになるように指定し、「justify-content: center;」でリスト全体が中央寄せになるように指定しています。
そして横並びに設定したliタグには、左右に間隔を作りたいので「margin: 0 10px;」を指定して左右に10pxのマージンを設定します。次にliタグの子要素であるaタグには横並びの目的ではなく子要素（ここではiタグ）を上下中央寄せにするために「display: flex;」を指定した上で「justify-content: center;」と「align-items: center;」を指定し、丸いオブジェクトを作成するために縦横幅を設定した上で「border-radius: 50%;」を指定して作成しています。また、背景色に白を設定しています。
アイコンのサイズ感に関しては、iタグ（Fontawesome）はアイコンフォントになるので「font-size」プロパティでアイコンの大きさを設定しています。
あとは、各アイコンの色をそれぞれ「color」プロパティで設定して完了になります。
ここまで設定したら、実際にファイルをブラウザで開いてもらって確認してみてください。デザインのような見た目になっているのではないかと思います。
まとめ
ということで、今回は最後のコンテンツセクションであるCONTACTセクションのCSSコーディングをしてみました。これでPCに関しては見本と同じ見た目になったのではないでしょうか？
最初は文字や画像がバラバラに表示されていたのがこのように整理されると気持ちが良いですね！
本記事のまとめ
- CONTACTセクションのタグにidとクラス名を付与
- CONTACTセクションのCSSコーディング
てことで、今回はこんな感じで、次回はグローバルナビゲーションにアンカーリンクを設定してみたいと思います。
それでは今回はここまで！また！