コトダマウェブホームHTMLCSSBootsrtapWordPressプラグインphotoshopIllustratorJavaScriptjQueryその他サーチコンソールGoogleアナリティクスツールWordPressとデザインが学べるWebメディアmenuホームBootsrtapBootsrtap4|ナビゲーションバーの基本的な仕組みBootsrtap2018.04.22Bootsrtap4|ナビゲーションバーの基本的な仕組みBootsrtapって簡単なんだろうけど、ちゃんと理解しようとすると難しいですよね。ここではコピペだけでなく、ナビゲーションバーの基本的な仕組みから自分でカスタマイズしたい方に向けて最低限の基本的な構造と簡単なカスタマイズ方についてお話します。ナビゲーションバーの作り方ボタンで表示を切り替えてご覧ください。CodePen.メニューが閉じてしまっているのでデモでもご確認ください。*/}テキストリンクだけがありスマホサイズではハンバーガーメニューに変わるだけのシンプルなナビゲーションバーです。検索ボックスやドロップダウンメニューはここではすべて削除しました。ナビゲーションバーの背景色とテキストリンクはBootsrtap4に実装されたものを使わず、上記のスタイルシートで設定するようになっています。button要素の中にあるdata-target="#example"とaria-controls="example"、それからul要素の親のdiv要素にあるid="example"の部分は”example”となっていますが任意のid名を共通で入れれば問題ありません。この方法でとりあえず、ナビゲーションバーの枠組みだけ作成して、あとはお好みのデザインにカスタマイズしていけばBootsrtap4の機能を利用しながらナビゲーションバーが作れます。ハンバーガーメニューの青い枠を非表示にしたいBootstrap4のハンバーガーメニューをクリックして開くとハンバーガーメニューのところに青い枠が表示されます。これを削除したいという方は、下記のスタイルシートを追加してください。outline:none;}これで青い枠が非表示になりました。