自分の手で未来を創るーlav0

自分のために、誰かのために、今ここにないもの、もっと良くしたいもの、何でも自分の手で創っていく。そして、作ったものを公開していきます

参考-ヘッダーをレスポンシブに

ここで一旦、今まで、ブックマークしていた参考にさせていただいた情報のまとめです。一つ目は、

 

Railsチュートリアルをやっていくと、ヘッダーのメニューが増えることによって、スマホ画面にした時やブラウザを全画面で表示していないときに、ヘッダーが縦長になり、その下がヘッダーで隠され、ちょっと困ったことになると思います。そんな時に

f:id:kslabo51:20190929101609j:plain

 

画面に合わせて、表示領域がない時は、ハンバーガーメニューになるとヘッダーの高さは変わらず、ヘッダーでメイン画面が隠されることもない。そのやり方を参考にさせていただいたのがこちらのサイトです。とっても助かりました。ありがとうございます。

 

qiita.com

 

#付け加え情報

data-  → JSでカスタムデータと呼ばれる独自に拡張するための機能

toggle → 対象となるHTML要素を簡単に表示、非表示ができるメソッド

collapse → 折りたたみ

aria-expanded = "開閉状態(true or false)”

aria-controls = "対象”

collapse .navbar-collaps → メニューの親要素に追加すると画面幅が所定のサイズ以下になったときに折りたたまれグルーピングされる

 

【終わりに】

ある方のブログを読んでいた時に、開発の勉強はQiitaとはてなブログが8割と言われていました。まさしくその通りだなって感じる今日この頃です。