参考-ヘッダーをレスポンシブに
ここで一旦、今まで、ブックマークしていた参考にさせていただいた情報のまとめです。一つ目は、
Rails のチュートリアルをやっていくと、ヘッダーのメニューが増えることによって、スマホ画面にした時やブラウザを全画面で表示していないときに、ヘッダーが縦長になり、その下がヘッダーで隠され、ちょっと困ったことになると思います。そんな時に
画面に合わせて、表示領域がない時は、ハンバーガーメニューになるとヘッダーの高さは変わらず、ヘッダーでメイン画面が隠されることもない。そのやり方を参考にさせていただいたのがこちらのサイトです。とっても助かりました。ありがとうございます。
#付け加え情報
data- → JSでカスタムデータと呼ばれる独自に拡張するための機能
toggle → 対象となるHTML要素を簡単に表示、非表示ができるメソッド
collapse → 折りたたみ
aria-expanded = "開閉状態(true or false)”
aria-controls = "対象”
collapse .navbar-collaps → メニューの親要素に追加すると画面幅が所定のサイズ以下になったときに折りたたまれグルーピングされる
【終わりに】
ある方のブログを読んでいた時に、開発の勉強はQiitaとはてなブログが8割と言われていました。まさしくその通りだなって感じる今日この頃です。