どうもフリーランスプログラマのTakaです。
さて、本プロジェクトのサンプルページも大体かたちになってきて全体像も見えてきたと思いますが、今回も前回から引き続きコンテンツセクションのCSSコーディングになりますが、今回はSKILLセクションをデザインに合わせてCSSで装飾していきたいと思います。
ちなみに、前回の記事をこちらです！
ここまでのおさらい
まずは、いつも通りここまでの本プロジェクトのおさらいですが、本プロジェクトで作成するサンプルページの見本はこちらになります。
そして、前回まででindex.htmlの基本的なマークアップコーディングとヘッダー、フッター、メインエリアのCSSコーディングまで進めてきました。なお、ここまでのソースコードに関しては、少し長くなってしまうのでこれまでの記事を参照してください。
SKILLセクションのCSSコーディング
では、SKILLセクションのCSSコーディングをしていきたいと思いますが、SKILLセクションの見た目は下図のようになっています。これまでのコンテンツセクションと同様、まずタイトルがあって、その次に自分の代表的な技術を「プログラミング」と「アプリケーション」の２つのブロックに分けてリストとして表示しています。
上図のような見た目にするためにCSSで装飾していきたいと思いますが、CSSを適用する前の現状のマークアップコードを改めて確認してみましょう。
このような感じで、sectionタグからセクションタイトルのh3タグまではこれまでのコンテンツセクションと同じですね。その下に「プログラミング」と「アプリケーション」の2つのブロックを作成していますが、具体的には見ての通り、それぞれをsectionタグで構築し、タイトルをh4タグ、リストに関しては順不同リストであるulタグでリストにしています。
では、これらのタグにCSSのスタイルを当てるべくidやクラスをそれぞれのタグに適用していきます。
idとクラスを付与
今回は下記にようにidとクラスを付与してみます。
全体を囲っているsectionタグにはこれまで同様、そのコンテンツセクションが識別できるid名、それからその直下のdivタグにもこれまで同様innerクラスを付与し、セクションタイトルであるh3タグはそのままになります。そして、このセクションのコンテンツである「プログラミング」と「アプリケーション」の２つのブロックに関しては、まずコンテンツを囲っているdivタグに「items」というクラス名を付与し、子要素のsectionタグには「item」と「boxShadow」の２つのクラスを付与します。さらに、ulタグを囲っているdivタグに「listItem」というクラス名を付与しています。
SKILLコンテンツのCSS
では、上記のマークアップに合わせてCSSでスタイルを適用していきたいと思います。今回は下記のようにそれぞれスタイルシートを適用してみたいと思います。
一つずつ説明していくと、最初に「プログラミング」と「アプリケーション」コンテンツを囲っているitemsクラスに「display:flex」を付与して２つのブロックを横並びにして、「justify-content: space-between」で両サイドに位置するように指定します。
そして、itemsの子要素であるitemクラスでブロックの横幅を指定して、h4タグに背景色、テキスト色、テキストのセンタリング、さらに上下に20pxの余白を作るように指定します。
続いて、listItemクラスにも「display:flex」を指定して「justify-content: center」を設定することで、リストが中央寄せになるように指定しています。
リストの親要素にあたるulタグには「list-style: disc」で各リストテキストの先頭に黒丸が付くように設定し、マージンを上下に40px、左右に20pxずつ作成するように指定して、liタグ自体にも上下に3pxのマージンが出来るように指定しています。
ここまで設定して、htmlファイルを開くとデザインのような見た目になっているのが確認できるのではないかと思います。
まとめ
ということで、今回は前回に引き続きコンテンツセクションの装飾としてSKILLセクションのCSSコーディングをしてみました。これでヘッダー、フッター、メインエリア、さらにコンテンツセクションの「PORTOFOLIO」、「PROFILE」、「SKILL」の3つまでCSSで装飾できたと思います。
もうほぼ形になってきたのが分かるのではないかと思います！
本記事のまとめ
- SKILLセクションのタグにidとクラス名を付与
- SKILLセクションのCSSコーディング
てことで、今回はこんな感じで、次回は最後のコンテンツセクションであるCONTACTセクションのCSSコーディングをやっていきたいと思います。
それでは今回はここまで！また！