CSSについて、JavaScriptやjQueryは使わずCSSだけでハンバーガーメニュー(ドロワーメニュー)をシンプルに書いていきます。HTML5/CSS3を学び中ですので、不適切な部分につきましてはご理解ください※モバイルファーストは利用者UCD/UXを考慮した現代的な設計概念の意味を持ちますドロワーメニュー/ハンバーガーメニューとは?スマートフォンの画面では、PCでは表示できる大項目のグローバルメニューがサイズの問題でそのまま表示できないため、ハンバーガーメニューアイコンを押すことで展開させるUIが必要となっています。展開されるメニュー画面は、メイン画面外の「引き出し(ドロワー)」に格納されて隠されているためドロワーメニューと呼ばれています。今回はテンプレート使用を想定したシンプルなサンプルページを作成してます。HTMLとCSSのソースも展開してますので参考になれば幸いです。お見苦しい箇所が多々ありますのでご了承くださいサンプルページ▶サンプルページはこちら※「HTMLソース」と「CSSソース」HTML要素の文書構造化はやるべき!レイアウト崩れの問題に直面したとき、文書構造をビジュアルで確認することで解決できました。第三者が作業を引き継ぐ状況においても有効と思われます。初心者故に?詰まるポイント基本部分の理解が足りていないためミスに時間をとられました。備忘録として今回の作業のポイントを残してますので気になる部分があれば確認ください。stylesheetというデフォルトスタイルシート(デフォルトCSS)が読み込まれています。それらはレイアウトを細かく弄りたい状況で邪魔になるときがあるので、代表的なCSSリセットで効果を消したり、独自のCSSリセットをつくる人もいます。stylesheetを、把握する意味も兼ねて都度消しています。「全称セレクタ」などCSS効果反映の優先度もあり注意したいところですが、設定しているのに効かないスタイルがある場合は、htmlが見難くなるので推奨しませんが、その対象タグに近い場所に直接「インラインスタイル」で記述すれば適応優先度が上がります。「物理プロパティ」で値を記述しているのに表示が効かない場合は「倫理プロパティ」により別角度で設定がされている状況が考えられますので十分確認します。▶「物理プロパティ」と「倫理プロパティ」の違い下記CSSソースのはulとh1にタグに対してデフォルトのスタイルをリセットするスタイルです。0px;」が、「倫理プロパティ」での記述です。今回、作業を進めていく中、デフォルトスタイルシートに特定ブラウザで効果がでる倫理プロパティの設定が存在し、リセット対応しました。文言を訴求するだけの特集ページを作る機会が多く(極端な場合全てが画像でも問題ない)、「inputタグ」「formタグ」などユーザーアクションが必要なページを作成する機会がありませんでした。inputタグは本来はラジオボタンやチェックボックス機能として入力部分に使用するタグですが、今回のドロワーメニューの出し入れの「判別」に使用する知識がありませんでした。今回参考にさせていた「ドロワーメニューのソース」をコピペしただけでは、カスタマイズして組み込む段階で詰まりました。ソースと向き合って「動き」と「意味」を理解してはじめて最適化させることができたので、レイアウトデザインをおこなう状況では機能理解は必要でした。▶CSS「疑似要素」をつかう目的HTMLソースは可能な限り見やすく編集しやすく、かつSEOのために可能な限りシンプルにしますが、そこで必要になるのがHTMLの記述に関与しないスタイルシート上だけに存在する「疑似要素」です。「レイアウト」と「機能の組み込み」の為に重宝するようです。クラスセレクタ等の後ろに「:before」「:after」をつけることで、「意味を持たない、HTMLに記述する必要がない疑似的なタグ要素」を追加できます。※CSS2を考慮した場合は「:before」(コロン1つ)。完全にCSS3向けで記述する場合は「::before」(コロン2つ)「レイアウトの装飾」に使う場合は、ボタンの「押せる感」「遷移する感」を後押しする「矢印マーク」などの装飾部品を「画像」ではなく「システムで表示」が出来ます。HTMLのソースに影響がないので検索エンジンの巡回ロボットに無駄に寄り道させる必要させることがなく、ソースが複雑化してページ評価も下げる心配もありません。デザイナーがUX向上のためにページビジュアルに組み込める付加価値になります!今回の用途ではキービジュアルに画面スクロール時の動きのインパクトを与える「固定表示」にする際、一部のブラウザで固定されない事象(ブラウザ依存)が発生したので、その不具合対応に使っています。※SafariのiOS発生する、「background-attachment:fixed」が効かない不具合(画像固定が効かない)※バナー画像については、そもそも一枚画像で全て作ってしまうことも可能ですが、画像更新の手間とSEOを考慮する必要はあります。動きをつけたり動的要素の組み込みの制限や、表示する端末によって解像度不足や読み込み時間増など品質の影響を受けるデメリットが考えられますので、可能な限りCSSでの作成を進めています。inline-block;が影響しておりました。block;に変更して対応しました。block;height:0px;}inline-blockに設定されていたことで予期せぬ空白が出来ておりました。inline-blockの特性を理解して適切に使う必要があります。id="nav-drawer"にドロップシャドウをCSSで設定すると、heightが100%で表示されているはずのドロワーメニューの表示に不具合が出てheightが小さくなってしまいました。こちらも特定ブラウザに発生する不具合の可能性があるようなので、ドロップシャドウをかける対象を変更するなど代替要素を追加して、今後対応進めていきます。特定要素へのアクションにより表示を切り替えることができます。{チェックが入った状態でスタイルを切り換えることで、ドロワーメニューの開閉を再現しているそうです。CSSはいろいろ出来ますね。widthの設定が効かないため、色々回避策あるなかで対応するのではなく、今回は単純に「width」設定に戻しました。レイアウト具合にこだわりがある場合は対応策を設定する必要があります。今後もSP⇒PCそしてタブレットも含めたレスポンシブの最適化を進めていきます。次回も情報設計に関係した話題をお届け致します。デジマースのネモトでした。