レスポンシブでスマホメニューを検証する。

このページは更新・編集しながら記述しています。

ウェブサイトの半数がスマホやタブレットになりつつ今、レスポンシブでスマホ対応は必須。
スマホメニューをいつもコードを都度対応しているが、ここで真面目に検証してみる。

まずはbootstrapでの基本の形。
まずはdreamweaverでライブで検証出来るように設定

参考

https://blogs.adobe.com/creativestation/web-bootstrap-basics-with-dreamweaver-essential-files


ちなみに現時点、3系はCurrently v3.3.7が最新

 

 

新規で選ぶ場合は、ここで選ぶ。

新規で選ぶと、ヘッダー部分が、

初期が<html lang=”en”>とかなってるので、変更

C:\Program Files\Adobe\Adobe Dreamweaver CC 2018\configuration\Shared\Emmet\Emmet\snippets.js
TODO  なぜこちらの環境で再起動して直らなかった。

↓ 変更

 

初期で出来たページはこちら。
DEMO:Dreamweaver Bootstrap – Prebuilt Layout

 

 

 

Bootstrapメニュー基本の形を確認

まずはサンプルを用意したところで、シンプルな記述に直す。

 ライブビューにならない時がある。
phpファイルではライブビューが使えない模様。
リモートサーバ設定しているが、不明。
TODO : XAMPPでいずれテスト

基本の構造はこんな感じ。

Navbarの構成は、

    1. 全体を囲む.nevbar
    2. ロゴを入れる.nevbar-header
    3. メニューやフォームを入れる.navbar-collapse

    で出来ている。(collapse =  発音  コラップス 意味潰す的な)
    Navbarのスタイルはdefaultとinverseの2つが用意されている。

    簡単なコードにすると以下。

 


  1. 実際のページ(navbar_01.html

    767px以下になるとnavbar-headerは表示になるのが?
    トグルボタンが表示されるのはなぜだ?
    ※navbar-headerとnavbar-collapseを勘違い
    collapse navbar-collapseは767px以下で非表示。

    調べるとnavbar-toggle をつけると
    767px以下でボタンとして表示されるのか

    検証:
    767px以下で表示されない:<button type=”button”></button>
    767px以下で表示される:<button type=”button” class=”navbar-toggle”>
    767px以下で表示される:<div class=”navbar-toggle”>

    それぞれパーツがある。

  2. .navbar-brand  ヘッダー用、サイトタイトルやロゴを表示
    .navbar-toggle  ヘッダー用、collapseの開閉ボタンを表示ul.nav.navbar-nav ナビゲーションメニューを表示
    form.navbar-form フォームを表示
    .navbar-btn ボタンを表示
    .navbar-text テキストを表示
    .navbar-link リンクを表示ではメニューを設置(test01.html

音声ブラウザにメニューがあることを指定。
<span class=”sr-only”>メニュー</span>

<!–ハンバーガーメニューの三本線を設定–>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>

 


上の例では、data-toggle=”collapse” data-target=”#gnavi” で、767px以下になったら表示させるのに、
data-toggle と data-targetを指定してる。

ここで、Bootstap3のCollapse(collapse =  発音  コラップス 意味潰す的な)を確認

Bootstrap3 Collapseの使い方

@See https://tetra-themes.com/bootstrap3-collapse-194/

 

Class名 概要
data-toggle="collapse" 開閉ボタンに必要
data-target="#demo" 開閉ボタンに必要、開閉するコンテンツと紐付ける
.collapse コンテンツが閉じた状態
.collapsing 動作(トランジション)が発生している状態
.collapse.in コンテンツが見えている状態

実際に簡単に書いてみる。

デモページ

ボタンをクリックすると、

btn btn-default btn-sm collapsed →  btn btn-default btn-sm
aria-expanded  = “true” (もう一度でfalse)

class=”collapse
aria-expanded  = “true” (もう一度でfalse)

 

aria-expanded属性は要素の開閉の状態を示すためのWAI-ARIAの属性です。
値にはtrue/falseのboolean値を指定することができ
true(開いている状態)、false(閉じている状態)を示すことができます。

WAI-ARIA とは、Web Accessibility Initiative (W3C の中で、Web アクセシビリティに関する仕様を検討する部会) が策定した、Accessible (アクセシブル) な Rich Internet Applications (リッチインターネットアプリケーション : RIA) に関する仕様

音声ブラウザにメニューがあることを指定。
<span class=”sr-only”>メニュー</span>

<!–ハンバーガーメニューの三本線を設定–>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>

 

 

 

 

Follow me!

返信を残す

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

CAPTCHA