レスポンシブなデザインに対応させることが必須となってきましたね。

ってまだHTML初めて3ヶ月程度です

初めからあたりまえのようにレスポンシブ化されてました。

 

とは言っても、まだまだされていないサイトも多く存在することも事実です！

そこで、これから作り始めるという方にコピペで

 

簡単に上部に固定されたレスポンシブなナビゲーションバーを導入し　な　が　ら　！

コードの内容も理解してもらおうじゃないかと！

 

 

コピペして出来た！終わりっ！てのは許せないんです…

コーディング初心者であり、無駄に理解したがる性格の私には。

 

理解できちゃえば心置きなく次のコンテンツに取り掛かれますしね！

さっそくいきましょーう！

 

Bootstrapから配布されている上部固定navbarのコード – 解説

 

必要なもの

 

• タグエディター
• index.html サイトのファイル
• ソースコード
• BootstrapのCSS

 

下記ソースコードを参照、　全文コピペ + index.htmlを開いているエディターに貼り付けてください。

 

 

各部の解説

 

上から順に見ていきましょう！

 

<nav>

1. .nav-default : ナビのデザインはデフォルトで！
2. .nav-fixed-top : ナビを上部に固定してください！

 

<button>

1. .navbar-toggle : トグルボタン（画面が小さくなると表示される右上のボタン）
2. .collapsed : ただの箱の名前です、必要ないです。
3. data-toggle =”collapsed” : ボタンの動作は？　→　出したり閉ったりを行わせてくださいな！
4. data-target=”#navbar” : ボタンから出てくるのは？→　#navbarというidのついた要素だよ！
5. aria-expanded=”false” : 展開されていますか？　→　閉じられています　trueだと展開
6. aria-controls=”navbar” : どの要素が関連つけられていますか？→　navbarです
7. span class=”sr-only” : スクリーンリーダーだけに表示します！
8. span class=”icon-bar : アイコンに3本線入ってますよね、そのうちの一本でやす。

 

<a>

1. .dropdown-toggle : トグルボタン
2. data-toggle=”dropdown” ボタンの動作はドロップダウンです。
3. role=”button” : <a>に組み込まれているのでボタンとして認識してもらいましょう。

<ul>

1. .dropdown-menu : ドロップダウンのメニューですよー！
2. role=”menu” : <ul>に組み込まれているのでメニューとして認識してもらいましょう。

<li>

1. .divider : リスト要素に区切り線を1本表示させます！

 

まとめ

 

素人目線でわからなかったところをピックアップしてみました！

class要素はあくまでも、BootstrapのCSSファイルに対応させているだけです

Bootstrapというフレームワークを使っているから理解するべきであって、

使わなければただ要素に付いた名前でしかありません。

そこを消化できてしまえばスムーズかと思われます！