プログラマーになる

プロゲートのヘッダーのレイアウトレッスンの解説とよくあるミス

プロゲートのヘッダーのレイアウトレッスンの解説とよくあるミス

こんにちは、ひつじのジョージです。

大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。

コアラ
レイアウトを整えていくのはテンション上がるね。
ひつじのジョージ
作っている気分を味わえるからね。
レイアウトを整えるにはCSSのfloatプロパティを使うよ。

ヘッダーのレイアウトレッスンではヘッダー内にあるコンテンツを横並びにする方法を学びます。

ヘッダーコンテンツを横並びにするにはCSSのfloatプロパティを使用します。

floatプロパティの役割は右寄せや左寄せをすることです。

要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。

https://developer.mozilla.org/ja/docs/Web/CSS/float
マスターすること
  • CSSのfloatプロパティの使い方
  • floatプロパティの役割を理解する

ヘッダーのレイアウトレッスンの答え

このレッスンの答えは以下のとおりです。

sylesheet.cssの適切な場所にCSSを記述していきます。

body {
  font-family: "Avenir Next";
}

li {
  list-style: none;
  /* floatプロパティをleftにしてください */
  float: left;
  
}

.header {
  background-color: #f7f2b4;
  height: 90px;
}

/* header-logoの文字の大きさを36px、floatプロパティをleftにしてください */
.header-logo {
  font-size: 36px;
  float: left;
}

.main {
  background-color: #bdf7f1;
  height: 600px;
}

.footer {
  background-color: #ceccf3;
  height: 270px;
}

floatプロパティの値は

  • left
    →左寄せ（指定した要素は包含ブロックの左側に浮動）
  • right
    →右寄せ（指定した要素は包含ブロックの左側に浮動）
  • none
    →指定した要素は浮動しない

がよく使われます。

ただ、最近ではflexboxがよく使われます。
flexboxはfloatと比べて横並びなど扱いがとても簡単にできます。

https://developer.mozilla.org/ja/docs/Web/CSS/flex

ひつじのジョージ
僕はflexbox派だよ

よくあるミス

このレッスンで学ぶことではfloatプロパティに関するミスがよくあります。

floatプロパティの使い所や挙動を正しく学びましょう。

よくあるミス
  • ulタグにfloatプロパティをあてる
  • floatプロパティの値をrightにする
コアラ
floatプロパティは案外扱いがむずかしいね
ひつじのジョージ
あてるタグによって挙動が全く違うよ。

よくあるミス1：ulタグにfloatプロパティをあてる

ul {
  /* リスト自体を左寄せ */
  float: left;
}

リストの要素を横並びにするにはliタグに対してfloatプロパティをあてる必要があります。

ulタグにfloatプロパティをあてるとリスト自体が左寄せとなってしまいます。

よくあるミス2：floatプロパティの値をrightにする

li {
  list-style: none;
  /* 要素が右から順に並ぶ */
  float: right;
  
}

floatプロパティの値をrightにするとリストの要素が右から順に並んでしまいます。

レイアウトが大きく崩れるわけではありませんが、意図した挙動になっていないので気をつけましょう。

リスト要素を左から順に並べるにはfloatプロパティの値をleftにする必要があります。

まとめ：floatプロパティの使い方と役割をマスターしよう

ヘッダーのレイアウトレッスンではヘッダー内にあるコンテンツを横並びにする方法を学びました。

floatプロパティでヘッダーのコンテンツを左寄せしてレイアウトを整えます。

floatプロパティの役割は右寄せや左寄せをすることです。

要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。

https://developer.mozilla.org/ja/docs/Web/CSS/float
マスターすること
  • CSSのfloatプロパティの使い方
  • floatプロパティの役割を理解する

このレッスンで学ぶことではfloatプロパティに関するミスがよくあります。

floatプロパティの使い所や挙動を正しく学びましょう。

よくあるミス
  • ulタグにfloatプロパティをあてる
  • floatプロパティの値をrightにする

ただ、最近ではflexboxがよく使われます。
flexboxはfloatと比べて横並びなど扱いがとても簡単にできます。

余裕がある方はflexboxも学ぶことをおすすめします。
→https://developer.mozilla.org/ja/docs/Web/CSS/flex

おすすめの記事