レスポンシブ対応 !! – 固定Navbarの解説

bootstrap

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

ってまだ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というフレームワークを使っているから理解するべきであって、

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

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

 

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  プロフィール  PR:無料HP  ふくやま自動車学校  社会人 専門学校  アールエスアール  中古ホイール 千葉  タイヤ 軽カー  プログラミング 専門学校  ヘルメット バイク用品  パワーストーン初購入♪  認定心理士  投資顧問ベストプランナー 詐欺  セリカ 202 ターボ  名簿屋