【html/css】よくあるWebページ、結局どう作るの? 第5回 〜メインコンテンツのエリア、footer(PC版)編〜

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月2桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

こんにちは。前回まででheaderまでができました。いよいよメインコンテンツのエリアとfooterを作っていきます。次の画像のエリアですね。

〜目次〜

外枠の作成

それでは外枠から作っていきましょう。今回もこれまでと同様に、innerクラスを使って余白を確保します。

3回目ともなるとそろそろ慣れてきましたね。

各セクションの作成

section1

section1は見出しと文章があるだけなのでシンプルですね。

コードは以下の通りです。要素を入れて見出しは中央ぞろえにします。

sectionの外枠と見出しは共通なので、番号をつけない形で命名しておきます。また、sectionにidを振り、headerのリンクからページ内遷移するようにします。headerは後ほど修正します。

section2

続いてsection2です。section1の文章の横に画像が入った形ですね。

コードは以下の通りです。

section__contentクラスを用意してdisplay: flexにします。ここでポイントなのはsection2__imgクラスのflex: none;という指定です。これによって画像の大きさが伸び縮みせず固定されます。これを指定しない場合、文章量によってはwidthを指定していても画像が伸びたり縮んでしまう可能性があります(画像下)。
また、文章側のdiv(今回はsection2__textクラス)にwidthを指定する方法でもこの問題は回避できます。

section3

最後にsection3です。section2とほぼ同じですがいくつか注意点があるので解説していきます。

まず、section2とは文章と画像の位置が逆ですね。これだけ見ればhtml上で文章の箇所を先に書けば良いように見えますが、SP版のデザインの関係でそれはできません(次回詳しく説明)。

よってここではorderプロパティを使って順番を入れ替えます。orderプロパティはdisplay: flex;となっている要素の子要素に使うことで順番を任意のものに入れ替えることができます。今回は本来先に表示される画像の要素にorder: 2;、後に表示される文章にorder: 1;を指定します。

順番が入れ替わったので、合わせてmarginも調整しています。

さて、ここまでで3つのsectionが完成しました。以下の画像のようになっているでしょうか。

footerの作成

最後にfooterを作ります。footerは非常にシンプルなものを採用しました。

ここまで読んでいただいた方にとってはもう説明は要らないかもしれませんね。
コードは以下の通りです。

画像を縦、横どちらも中央ぞろえにします。

完成コードの確認

index.html
style.css

第5回はここまでです。いかがでしたでしょうか。次回はコンテンツエリアのSP版を制作していきます。終わりが見えてきましたね。

【html/css】よくあるWebページ、結局どう作るの? 第6回 〜メインコンテンツのエリア、footer(SP版)編〜

2019年2月6日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください