モダンコーディング入門 - HTML5とCSS3 - 最後

今日すること

こんにちは、ふるてつです。
🍉盆休みを使って下の本でHTML5とCSS3を勉強中でしたが盆中に終わらず、いまも勉強を継続しています、 今回もその中で新しく知ったことを書きます。

書籍中では3種類のレイアウトのサイトを作るのですが最後3つ目のレイアウトになりました。
今回は個人のポートフォリオサイトや商用のランディングページなどで多く見られる、1枚構成のシングルページサイトを作ります。

作ったサイトですが、下のように「タイトル」、「自己紹介」、「作品紹介」、「スキル紹介」、「問い合わせフォーム」と縦にならんでいきます。

実際に出来上がったサイトはこちらです、せっかくですのでGithub pagesで見れるようにしています（ボタンはクリックしても動きません）
https://tetsujifurukawa.github.io/learning_modernCodingOfHtml5Css3/singlepage-layout/index.html

● display:table

書籍も終盤になりあまりこれ知らなかったということはなくなってきました。
display プロパティの所のみはじめてだったので書きました。
display プロパティには block、inline、inline-block の他に、table、table-cell という値を設定でき、 display:table を使用すると従来のテーブルレイアウトのようなことをCSSだけで実現できます。
これはわたしはじめて知りました。
Bootstrapを使ったりCSS Grid Layoutのような手法でないと、似たようなことはできないと思ってました、 知らないというのは怖いですねぇ🤢
書き方は下記で、親要素のCSSにdisplay: table;を設定して、子要素にdisplay: table-cell;を設定します。
HTMLの例

<div class="parent">
  <div class="child">hoge1</div>
  <div class="child">hoge2</div>
  <div class="child">hoge3</div>
</div>

CSSの例

.parent{
  display: table;
  width: 100%;
}
.child{
  display: table-cell;
}

● スマートフォン対応（レスポンシブ）

スマートフォン対応はメディアクエリを使用します。
メディアクエリは使ったことがありますので、全然知らないようなことはなかったです。
参考までにどんな作業をしたか箇条書きにしました。

1. display:tableで横並びにした写真は、display:tableを解除して縦並びにする。
2. 文字サイズは少し小さめにする。
3. 上下の余白を少し狭くする。
4. button:hoverは無効にする。

携帯サイズだと下記のようになります。

今日の感想

盆休みに始めた書籍の勉強ですが最後の3種類目が9月にやっと終わりました。
なかなかに勉強しがいがありました、新しく知ったことも沢山ありました。
しっかり忘れないようにして、役立てていこうと思います。

では、今日もお疲れ様でした。