動画で練習23 - 森のプログラミング練習ブログ

参考ブログ

※ブログ内に練習用のデータあり

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ヘッダー内のレイアウト調整

サイトのロゴと電話番号を横並びにする「#site_logo」を使用「float」プロパティを使用して「left」と指定
「width」＝「幅」を65％に設定
「#site_reserve」＝電話番号の要素、「float」で「right」指定、「width＝３５％」に指定
電話番号表示の文字を右寄せ「text-align」で「right」指定
上余白を「margin-top」で「10px」で指定
電話番号のフォントサイズ＝「.site_tel」でフォントサイズ「font-size」で少し大きめの「1.5em」で指定、文字の色を「color」コードで「#C20D23」指定
サイトロゴとサイトリザーブを「float」で横並びにしたので「float」の解除が必要になります。
「float」解除用のダミーボックスを作成「.clearlist」というダミーの要素を設定「content」は空に「””」、「display＝表示」は「block」要素にする
「index.html」で「site_reserve」の下に「float」解除用のダミーのボックス＝<div class="clearlist"></div>を指定します。