navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。ccレスポンシブサイトを構築する際、意外と引っかかるのが「グローバルナビ」ページの横幅(キャンバス)いっぱいに表示させることが多い関係上、キャンバス幅が一定でなくなるレスポンシブWebデザインでは一筋縄ではいきません。慣れない内は考えるのが面倒で「スマホ専用のナビゲーションを別途用意」したり、「グローバルナビをまるごと非表示にしてしまう」ということをされた方の少なくないのではないかと思います。今回は「レスポンシブWebデザインで使えるグローバルナビ」をまとめました。「グローバルナビは絶対に1列固定。それ以外は認めない」という方向けの方法。これを使うと間違いなく1列のグローバルナビが作れます。原理は簡単で、1列だけのtableを作るというだけのことです。CSSでtableにするため、マークアップとスタイルはこんな感じになります。center;}この方法の最大のメリットは「高さ揃え不要」というところです。aタグがtdタグと同じ振る舞いをするため、これだけのコードで高さを揃えたグローバルナビが作ることができます。2行の項目・1行の項目が混在する場合でも高さも文字位置も自動で調整されるので、非常に便利です。デメリットは、「融通が効かないこと」です。tableタグと同じ振る舞いになるため、tableでできないことはすべてNGになります。改行禁止処理を入れたりすると、デバイス幅によってはレイアウト崩れが起きることもありますのでご注意ください。おすすめシチュエーション:メニュー項目数が4つ以下の時2:【Javascript+CSS】Toggleでスマートフォン対応BootstrapやGumbyFrameworkなどのCSSフレームワークでよく採用されている方法です。CSSとJavaScriptでスマートフォン幅ではトグルメニューに変化します。マークアップは「トグルボタン」と「メニュー項目」の2要素に分割するタイプが主流です。</ul></nav>タブレット以上ではspanが非表示に、スマートフォンではulが非表示になるようにCSSが設定されています。block!important;}}あとはJavascriptでspanをクリックした際にulの表示を切り替える構文を記述するだけです。});</script>こちらのメリットは「項目数を気にしなくても良い」ということにあるかなと思います。画面幅が狭いスマートフォンではトグルメニュー化するため、項目数が多くとも見た目が変化することはあまりありません。デメリットは「スタイルの制約が多いこと」です。スマートフォン表示とPC表示、どちらも同じソースを使用しているため、マークアップが複雑になるようなスタイルやスクリプトを組むことはお勧めできません。してもリッチなデザインを採用したい場合は、この次の方法を採用することをおすすめします。おすすめシチュエーション:メニュー項目数が5つ以上の時3:【WordPress+Javascript+CSS】「メニュー」で専用タグ作成メニュー項目を管理画面で事前に作成し、PHPでスマートフォン・PCそれぞれにタグを出力させるというやり方になります。WordPressなどのCMSを使用している人限定の実装方法ですね。WordPressでは「wp_is_mobile();」を使用することでスマートフォン・PCでの出力タグを切り替えることができます。