どうも新型コロナウィルスに強い在宅フリーランスプログラマのTakaです。
さてさて、超初心者向けHTML講座11回目になります。前回からコンテンツセクションのCSS装飾に入り、見た目的にも完成がなんとなく見えてきたところでではないかと思いますが、今回は引き続きコンテンツセクションのひとつである「PROFILE」セクションのCSS装飾をコーディングしていきたいと思います。
前回の記事をこちら！
ここまでのおさらい
まずは、いつも通りここまでの本プロジェクトのおさらいですが、本プロジェクトで作成するサンプルページの見本はこちらになります。
そして、前回まででindex.htmlの基本的なマークアップコーディングとヘッダー、フッター、メインエリアのCSSコーディングまで進めてきました。なお、ここまでのソースコードに関しては、少し長くなってしまうのでこれまでの記事を参照してください。
PROFILEコンテンツの装飾
では、PROFILEセクションのCSSコーディングをしていきたいと思いますが、PROFILEセクションの見た目は下図の通りタイトルと文言のみのシンプルな構成になっているので、これまでやってきたコーディングに比べると簡単なのではないかと思います。
これならサクッと終わりそうですね！
では、前回と同様、CSSを割り当てる前のPORTFOLIOコンテンツ部分のマークアップコーディング確認してます。
上記のようにコンテンツ全体は「section」タグ、その直下にdivタグ、そしてセクションタイトルにあたるh3タグと文章のpタグになります。
かなりシンプルな構造ですね！
これらのタグにCSSのスタイルを当てるべくidやクラスをそれぞれのタグに適用していきます。
idとクラスを付与
今回は下記にようにidとクラスを付与してみます。
sectionタグにはこれまで同様、そのコンテンツセクションが識別できるid名を付けて、section直下のdivタグにもこれまで同様innerクラスを付与しています。h3とpタグに関しては特にクラスを付与する必要性は今回ないのでそのままになっています。
PROFILEコンテンツのCSS
では、CSSでスタイルを適用していきたいと思いますが、今回は下記のようなスタイルシートを適用してみたいと思います。
見てわかる通り、前回のPORTFOLIOコンテンツセクションに比べると、だいぶシンプルというかコードが少ないですね。
内容としては、まずセクション全体に背景色「#00B496」を設定し、テキストの色と位置（センタリング）を設定し、pタグにはテキストを左寄せにするように設定しています。
セクションタイトルに関しては、前回各コンテンツセクションタイトルに同じスタイルが適用されるように設定したので、ここでは特に何も指定することなくデザインのような見た目になっていると思います。
ご自身の環境で実際に確認してみてください！
まとめ
ということで、今回は前回に引き続きコンテンツセクションの装飾としてPROFILEセクションのCSSコーディングをしてみました。今回は比較的簡単だったのではないかと思います！
本記事のまとめ
- PROFILEセクションのタグにidとクラス名を付与
- PROFILEセクションのCSSコーディング
てことで、今回はこんな感じで、次回はSKILLセクションのCSSコーディングをやっていきたいと思います。
それでは今回はここまで！また！