SKILLセクションをCSSで装飾してみよう!【超初心者向けHTML講座12】

 どうもフリーランスプログラマのTakaです。

 さて、本プロジェクトのサンプルページも大体かたちになってきて全体像も見えてきたと思いますが、今回も前回から引き続きコンテンツセクションのCSSコーディングになりますが、今回はSKILLセクションをデザインに合わせてCSSで装飾していきたいと思います。

ちなみに、前回の記事をこちらです!

ここまでのおさらい

 まずは、いつも通りここまでの本プロジェクトのおさらいですが、本プロジェクトで作成するサンプルページの見本はこちらになります。

 そして、前回まででindex.htmlの基本的なマークアップコーディングとヘッダー、フッター、メインエリアのCSSコーディングまで進めてきました。なお、ここまでのソースコードに関しては、少し長くなってしまうのでこれまでの記事を参照してください。

SKILLセクションのCSSコーディング

 では、SKILLセクションのCSSコーディングをしていきたいと思いますが、SKILLセクションの見た目は下図のようになっています。これまでのコンテンツセクションと同様、まずタイトルがあって、その次に自分の代表的な技術を「プログラミング」と「アプリケーション」の2つのブロックに分けてリストとして表示しています。

 上図のような見た目にするためにCSSで装飾していきたいと思いますが、CSSを適用する前の現状のマークアップコードを改めて確認してみましょう。

 このような感じで、sectionタグからセクションタイトルのh3タグまではこれまでのコンテンツセクションと同じですね。その下に「プログラミング」と「アプリケーション」の2つのブロックを作成していますが、具体的には見ての通り、それぞれをsectionタグで構築し、タイトルをh4タグ、リストに関しては順不同リストであるulタグでリストにしています。

 では、これらのタグにCSSのスタイルを当てるべくidやクラスをそれぞれのタグに適用していきます。

idとクラスを付与

 今回は下記にようにidとクラスを付与してみます。

 全体を囲っているsectionタグにはこれまで同様、そのコンテンツセクションが識別できるid名、それからその直下のdivタグにもこれまで同様innerクラスを付与し、セクションタイトルであるh3タグはそのままになります。そして、このセクションのコンテンツである「プログラミング」と「アプリケーション」の2つのブロックに関しては、まずコンテンツを囲っているdivタグに「items」というクラス名を付与し、子要素のsectionタグには「item」と「boxShadow」の2つのクラスを付与します。さらに、ulタグを囲っているdivタグに「listItem」というクラス名を付与しています。

SKILLコンテンツのCSS

 では、上記のマークアップに合わせてCSSでスタイルを適用していきたいと思います。今回は下記のようにそれぞれスタイルシートを適用してみたいと思います。

 一つずつ説明していくと、最初に「プログラミング」と「アプリケーション」コンテンツを囲っているitemsクラスに「display:flex」を付与して2つのブロックを横並びにして、「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コーディングをやっていきたいと思います。

 それでは今回はここまで!また!

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

シェアありがとうございます!

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!

人気記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です