【HTML】スマートフォンのヘッダーレイアウト、要素の表示/非表示

スマートフォンのヘッダーレイアウト

メニューのアイコン化メニューのアイコン化メニューのアイコン化メニューのアイ

先ずはHTMLにて

<span class="fa fa-bars menu-icon"></span>

このように書く

※上記のようにアイコン表示化をする事が前提となる。

要素の表示/非表示

display: none;display: block;display: none;display: block;display: none;

• 要素を非表示にするdisplay: none;
• 非表示にした要素を表示するdisplay: block;

こう覚える

上記をCSSにて反映させる。

.OO {

    display: none;

  }

}

この様に書く

上記はアイコンを隠すためのCSSのみ書いてある。

他にもアイコンの色、左右どちらに寄せるか、フォントのサイズ、paddingなどを調整する

演習問題

左の手順にそって書いていくだけ。簡単です。

手順をみずに書けるようにする（道場編対策として）