レスポンシブメニューナビゲーションコピペサンプル/CSSだけ/スマホ対応ドロワーメニューの作り方 | デジマースブログ

ドロワーメニュー/ハンバーガーメニューとは？

スマートフォンの画面では、PCでは表示できる大項目のグローバルメニューがサイズの問題でそのまま表示できないため、ハンバーガーメニューアイコンを押すことで展開させるUIが必要となっています。

展開されるメニュー画面は、メイン画面外の「引き出し（ドロワー）」に格納されて隠されているためドロワーメニューと呼ばれています。

今回はテンプレート使用を想定したシンプルなサンプルページを作成してます。HTMLとCSSのソースも展開してますので参考になれば幸いです。
※ お見苦しい箇所が多々ありますのでご了承ください

サンプルページ

▶サンプルページはこちら

※「HTMLソース」と「CSSソース」

HTML要素の文書構造化はやるべき！

レイアウト崩れの問題に直面したとき、文書構造をビジュアルで確認することで解決できました。また第三者が作業を引き継ぐ状況においても有効と思われます。

初心者故に？詰まるポイント

基本部分の理解が足りていないためミスに時間をとられました。備忘録として今回の作業のポイントを残してますので
気になる部分があれば確認ください。

▶ブラウザに既に定義されているデフォルトスタイルシートを確認

各ブラウザにはあらかじめuser agent stylesheetというデフォルトスタイルシート（デフォルトCSS）が読み込まれています。

それらはレイアウトを細かく弄りたい状況で邪魔になるときがあるので、代表的なCSSリセットで効果を消したり、独自のCSSリセットをつくる人もいます。
今回はレイアウトする上で影響があるuser agent stylesheetを、把握する意味も兼ねて都度消しています。

さらに「全称セレクタ」などCSS効果反映の優先度もあり注意したいところですが、設定しているのに効かないスタイルがある場合は、
htmlが見難くなるので推奨しませんが、その対象タグに近い場所に直接「インラインスタイル」で記述すれば適応優先度が上がります。

また「物理プロパティ」で値を記述しているのに表示が効かない場合は「倫理プロパティ」により別角度で設定がされている状況が考えられますので十分確認します。
※編集の手間を少なくする目的で、適切なセレクタをつかう

検証画面はブラウザ上で右クリックするなどして「検証」を選べば確認できます↓

リストに戻る↑

▶「物理プロパティ」と「倫理プロパティ」の違い

下記CSSソースのはulとh1にタグに対してデフォルトのスタイルをリセットするスタイルです。

「margin-top: 0px;」が、見慣れた「物理プロパティ」での記述
「margin-block-start: 0px;」が、「倫理プロパティ」での記述です。

ul,h1 {/*レイアウト崩れを防ぐためにデフォルトスタイルシートをクリアー_物理プロパティと倫理プロパティ記述*/
	margin-block-start: 0px;
	margin-top: 0px;/*EDGE対応*/
	margin-block-end: 0px;
	margin-bottom: 0px;/*EDGE対応*/
	margin-inline-start: 0px;
	margin-left: 0px;/*EDGE対応*/
	margin-inline-end: 0px;
	margin-right: 0px;/*EDGE対応*/
	padding-inline-start: 0px;
	padding-left: 0px;/*EDGE対応*/
}

表示結果はどちらも同じですが概念が違っています↓

今回、作業を進めていく中、デフォルトスタイルシートに特定ブラウザで効果がでる倫理プロパティの設定が存在し、リセット対応しました。

リストに戻る↑

▶HTML5タグの引き出し不足

文言を訴求するだけの特集ページを作る機会が多く（極端な場合全てが画像でも問題ない）、「inputタグ」「formタグ」などユーザーアクションが必要なページを作成する機会がありませんでした。

inputタグは本来はラジオボタンやチェックボックス機能として入力部分に使用するタグですが、今回のドロワーメニューの出し入れの「判別」に使用する知識がありませんでした。

リストに戻る↑

▶参考（コピペ）にしたCSSの理解不足

今回参考にさせていた「ドロワーメニューのソース」をコピペしただけでは、カスタマイズして組み込む段階で詰まりました。

ソースと向き合って「動き」と「意味」を理解してはじめて最適化させることができたので、レイアウトデザインをおこなう状況では機能理解は必要でした。

リストに戻る↑

▶CSS「疑似要素」をつかう目的

HTMLソースは可能な限り見やすく編集しやすく、かつSEOのために可能な限りシンプルにしますが、そこで必要になるのがHTMLの記述に関与しないスタイルシート上だけに存在する「疑似要素」です。

「レイアウト」と「機能の組み込み」の為に重宝するようです。

クラスセレクタ等の後ろに「:before」「:after」をつけることで、「意味を持たない、HTMLに記述する必要がない疑似的なタグ要素」を追加できます。※CSS2を考慮した場合は「:before」（コロン1つ）。完全にCSS3向けで記述する場合は「::before」（コロン2つ）

「レイアウトの装飾」に使う場合は、ボタンの「押せる感」「遷移する感」を後押しする「矢印マーク」などの装飾部品を「画像」ではなく「システムで表示」が出来ます。

HTMLのソースに影響がないので検索エンジンの巡回ロボットに無駄に寄り道させる必要させることがなく、ソースが複雑化してページ評価も下げる心配もありません。

つまりはデザイナーがUX向上のためにページビジュアルに組み込める付加価値になります！

今回の用途ではキービジュアルに画面スクロール時の動きのインパクトを与える「固定表示」にする際、一部のブラウザで固定されない事象（ブラウザ依存）が発生したので、その不具合対応に使っています。
※SafariのiOS発生する、「background-attachment:fixed」が効かない不具合（画像固定が効かない）

※バナー画像については、そもそも一枚画像で全て作ってしまうことも可能ですが、画像更新の手間とSEOを考慮する必要はあります。
さらに、動きをつけたり動的要素の組み込みの制限や、表示する端末によって解像度不足や読み込み時間増など品質の影響を受けるデメリットが考えられますので、可能な限りCSSでの作成を進めています。

リストに戻る↑

▶「inline-block」使用による予期せぬ隙間対応

「h1」のタイトルスペースと「#nav-open」の隙間がどうしても空いてしまう事象への対応

CSS
#nav-open
内の

display: inline-block;

が影響しておりました。

inline-blockである必要性がなかったので

display: block;

に変更して対応しました。

#nav-open {
	display: block;
	height:0px;
	}

inline-blockに設定されていたことで予期せぬ空白が出来ておりました。

inline-blockの特性を理解して適切に使う必要があります。

リストに戻る↑

▶特定ブラウザ固有バグの存在による使えない表現

nav id="nav-drawer"

にドロップシャドウをCSSで設定すると、
heightが100％で表示されているはずのドロワーメニューの表示に不具合が出てheightが小さくなってしまいました。

こちらも特定ブラウザに発生する不具合の可能性があるようなので、
ドロップシャドウをかける対象を変更するなど代替要素を追加して、今後対応進めていきます。

リストに戻る↑

▶「inputタグ」の機能を利用してレイアウトを切り換える

<input id="nav-input" type="checkbox" class="nav-unshown">

inputタグのtypeをチェックボックスにすることで、
特定要素へのアクションにより表示を切り替えることができます。

#nav-input:checked ~ #nav-close {

チェックが入った状態でスタイルを切り換えることで、
ドロワーメニューの開閉を再現しているそうです。

CSSはいろいろ出来ますね。

html

<nav id="nav-drawer">
	<input id="nav-input" type="checkbox" class="nav-unshown">
	<label id="nav-open" for="nav-input"><span></span></label>
	<label class="nav-unshown" id="nav-close" for="nav-input"></label>
	<div id="nav-content">
		<ul class ="nav_box">
			<li class ="nav_text"><a href="リンク先のＵＲＬ">TOP</a></li>
			<li class ="nav_text"><a href="リンク先のＵＲＬ">Contents01</a></li>
			<li class ="nav_text"><a href="リンク先のＵＲＬ">Contents02</a></li>
			<li class ="nav_text"><a href="リンク先のＵＲＬ">Contents03</a></li>
			<li class ="nav_text"><a href="リンク先のＵＲＬ">other</a></li>
		</ul>
	</div>
</nav>

CSS

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;/*透過具合*/
	}

#nav-input:checked ~ #nav-content {
	left: 0;
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}

リストに戻る↑

▶Firefoxで「max width」が効かない事象

以前参照した（現在はリンク切れ）ドロワーメニュー/ハンバーガーメニューのソースコード（https://saruwakakun.com/html-css/reference/nav-drawer*/）に、SP表示時、ドロワーメニューの開き具合を端末幅で最適化する目的で「max width」が組み込んであったのですが、
Firefox で特定条件でmax widthの設定が効かないため、色々回避策あるなかで対応するのではなく、今回は単純に「width」設定に戻しました。

レイアウト具合にこだわりがある場合は対応策を設定する必要があります。

参照元⇒「Firefox で max-width が効かないときの解決法 – SeijiNIshiwakiの日記」

リストに戻る↑

さいごに

PCを触らない人が増えているなか、それでも一定需要と確かな利用シーンがありますので、
今後もSP⇒PCそしてタブレットも含めたレスポンシブの最適化を進めていきます。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

他の記事をさがす ⇒ 記事一覧へ

目次

ドロワーメニュー/ハンバーガーメニューとは？

サンプルページ

HTML要素の文書構造化はやるべき！

初心者故に？詰まるポイント

▶ブラウザに既に定義されているデフォルトスタイルシートを確認

▶「物理プロパティ」と「倫理プロパティ」の違い

▶HTML5タグの引き出し不足

▶参考（コピペ）にしたCSSの理解不足

▶CSS「疑似要素」をつかう目的

▶「inline-block」使用による予期せぬ隙間対応

▶特定ブラウザ固有バグの存在による使えない表現

▶「inputタグ」の機能を利用してレイアウトを切り換える

▶Firefoxで「max width」が効かない事象

さいごに