本文書ではTailwindを利用してナビゲーションバーを作成していきます。classを利用したFlexbox、ブレイクポイント、レスポンシブデザインの設定方法について理解することができます。Tailwindの知識がない人は下記を事前に読んでおくことをおすすめします。classを利用して実践的なナビゲーションバーの作成を通して、Tailwindの理解を深めていきます。classを追加していくため基本的にはhtmlファイル以外の更新はありません。Serverをインストールします。Severのインストールは必須ではありませんがファイルを更新を検知し、自動でブラウザを更新してくれるので効率よく作業を行うことができます。Serverではなくほかのツールでも問題ありません。live-serverインストール完了後は下記のコマンドを実行するとブラウザが自動で起動します。ここで指定したpublicディレクトリにはindex.htmlファイルが保存されています。環境に依存するのでindex.htmlが保存されているパスを指定してください。changesモバイルファーストモバイルの画面を作成し、その後にPCの画面を作成していきます。作業に入る前にcdnを利用して、Tailwindとvue.jsのタグをindex.htmlファイルに追加します。ハンバーガーメニューを開閉でvue.jsを利用します。vue.jsを使った複雑な処理は行いません。下記のindex.htmlファイルから開始します。</body></html>サイト名とハンバーメニューの追加サイト名はHRとしてハンバガーメニューのsvgを追加します。</div></header>通常であれば文字列ではなくロゴのsvgファイルをHRの場所に配置することになります。ブラウザで確認すると下記のように表示されます。ブラウザの表示画面を広げてもHRとハンバーガーメニューは左側の端に張り付いたままなのでコンテンツの中央寄せを行います。auto)と組み合わせると先ほどとは異なりコンテンツが中央寄せになることが確認できます。わかりやすいように背景色をつけています。containerでは最大の幅max-widthは1280pxに設定されているので、どんなにブラウザを横に広げても1280px以上にグレーの領域が増えることはありません。mx-auto">containerとmx-autoを設定Flexboxの設定HRとハンバーガーメニューを左右両端に配置します。配置変更は、Flexboxを利用すれば簡単に設定することができます。classのflexを利用します。flexを設定する前はHRはh1タグ、ハンバーガーメニューはdivタグで囲まれているためBlock要素で縦に並んでいましたがflexを設定すると横並びに変わります。flexを設定Flexboxについてはこちらが参考になります。あわせて読みたいCSSのflexboxの基本から応用まで使い方一挙公開flexを設定して要素は横並びになりました。betweenを設定することになります。classがそれに対応します。bg-gray-300">HRとハンバーガーメニューが左右に配置されました。space-between設定HRの文字の大きさを大きくして太さも変えます。font-semibold">HR</h1>文字の大きさと太さ変更HRとハンバーガーメニューの中心が揃っていない場合はitems-center(align-items:center;)で揃えることができます。text-white">中央に揃えるここまで設定ができたので、背景色をmax-widthではなく幅全体に広げ、フォントも文字色も変更します。font-semibold">HR</h1>背景色と文字の色を変更メニューを追加メニューをハンバガーメニューのdivタグの後ろに追加します。</ul></header>追加したulタグの親タグheaderにはflexが設定されているので、下記のように表示されます。メニューを追加メニューはHRとハンバーガーメニューの下に表示させたいので、HRとハンバーメニュー、メニューを別のdivタグで囲い設定を変更します。</div></header>設定変更の結果、メニューが下に移動します。marginの設定を行います。ulのliはインライン要素なのでブロック要素に変更します。padding-bottomに0.5remの設定です。メニューにpadding設定hoverの設定メニューにカーソルが乗った時に色が変わるように擬似クラスhoverを設定します。hover:bg-gray-600">お問い合わせ</a></li></ul>最後のメニューにカーソルが乗るとli要素の背景色が変わります。hoverの設定hoverの背景色とheaderの背景色との間に空間がないのでmarginを使って領域を取りますがmarginが親要素からはみ出して表示されないので、親要素のheaderタグにpb-1(padding-bottom)を設定しています。overflow-hidden-yでも対応可能です。rounded">お問い合わせ</a></li></ul>roundedでhoverの背景色の四角の角に丸みをつけています。hover時の表示を変更メニューの間にborderをつけるメニューの項目がはっきりわかるようにboderをつけます。boderの下線のみをつけるのでli要素にborder-bを設定します。最後のli要素には設定していません。四角のborderをつけたい時はborderのみでつけることができます。boder-b-{数字}の数字を変えることで線の太さを変更することができます。rounded">お問い合わせ</a></li></ul>メニュー間にborderをつけるここまでで一度モバイル向けからPC向け画面の作成に進みます。ブレイクポイントアクセスするブラウザのサイズによってスタイルの変更ができるようにTailwindでは4つのブレイクポイントが準備されています。lg:flexのように付与することで設定を行うことができます。1280px例えば、h1タグのHRの文字を768px以上で小さな文字に変更するためmd:text-xlを設定して動作を確認してみましょう。1つのclassの中にtext-4xlとmd:text-xlを追加します。md:text-xl">HR</h1>768px以上のサイズにブラウザの幅を変更するとHRの文字のサイズが小さくなります。ブレイクポイントで文字のサイズを変えるさらに動作確認するためにブレイクポイントのlgを設定し、1024px以上で背景色を変更してみます。lg:bg-blue-500">ブラウザのサイズが1024px以上になると背景色がグレーからブルーに変わります。サイズを元に戻すとグレーに戻ります。ブレイクポイントとlgで背景を変えるブレイクポイントmdであれば、768px以上のサイズにはすべて適用されます。lgの1024px以上でmdで設定した値を変更したい場合はlgで設定を行う必要があります。mdで設定すれば768px以上1024px未満のサイズに適用されるわけではありません。classについてはすべてのサイズで適用されます。PC画面の作成ブレイクポイントがわかったので、今回はmdである768px以上をPC用画面として設定を行っていきます。ハンバーメニューを非表示にPCの画面ではハンバーメニューは必要ないので非表示にします。非表示にしたい要素にはhiddenを設定します。classの前には必ずmd:をつけます。</button>768px以上のサイズに変更すると右側からハンバーガメニューが非表示になります。768pxより小さいサイズではハンバーガーメニューは表示されます。ハンバーガーメニュー非表示メニューを横並びにモバイル画面ではメニューを縦に表示していましたが、PCの画面ではFlexboxを利用して横表示に変更します。flexでの横並びと同時にメニューのborderも非表示にします。borderを無効にする場合はborder-noneを設定します。classはブレイクポイントを設定したサイズで必要なくなった場合、その設定を解除する設定を追加する必要があります。rounded">お問い合わせ</a></li></ul>ブラウザで確認するとメニューが横並びになっていることが確認できます。メニューを横並び表示メニューの並び方の位置についてはFlexboxの機能を使って変更することが可能です。中央に表示させたい場合は、justily-centerを使います。間隔を均等にして表示させたい場合はjustify-aroundを使います。md:justify-around">justify-aroundを設定メニューを右端に表示させたい場合は、justify-endを使います。md:justify-end">justify-endを設定お問い合わせメニューをボタンへお問い合わせメニューのみ目立つようにボタンに変更します。ボタンを追加するとボタンに設定したpaddingによってメニューの中央揃いがずれてしまうのでli要素が中央揃えになるようにflexを設定したul要素にitems-centerも追加します。</div></li>右側にお問い合わせボタンが表示されます。カーソルをボタンの上に乗せるとhoverにより色がかわります。ボタンに変更PCの画面にボタンを追加したのでモバイル画面も確認しておきます。追加したお問合ボタンが窮屈に感じられるので表示場所と要素同士の間隔を変更します。モバイル画面のお問い合わせボタンお問い合わせボタンはインライン要素なので親要素にtext-centerを設定し真ん中に表示させます。marginが少ないのでmarginも追加します。</div></li>ボタンを真ん中に表示vue.jsを使ってメニューの開閉メニューの開閉設定モバイルの画面ではメニューが開いたままの状態になっているので、開閉を行うためにvue.jsを利用します。vue.jsにデータプロパティisOpenを追加し、isOpenの真偽によりメニューの開閉を行うように設定していきます。vueにisOpenを追加し、デフォルト値はfalseとします。classのblockを適用、falseの時はhiddenを適用します。メニュー要素ulの親要素のdivに設定します。rounded">HRとは</a></li>ハンバーガーメニューを押した時に開閉が行えるようにクリックイベント設定してます。</button>動作確認を行ってみましょう。ページを開いた直後は閉じた状態です。ハンバガーメニューをクリックするとメニューが表示されます。開いた状態から再度ハンバーガーメニューをクリックすると閉じることを確認してください。メニューが開いた時ハンバーガーメニューの画像の切り替え開いた時にハンバーガーメニューをXにするように新たにXのsvgを追加します。ハンバーガーメニューの下に追加し、v-showディレクティブを利用して表示・非表示を切り替えます。</button>上記の設定を行うと開いた時には画像がXに切り替わります。メニューが開いた時はXが表示クリックした際にハンバーガーメニューに四角枠が表示されるので、擬似クラスfoucsを設定して表示されないようにします。class="focus:outline-none">クリック時の四角い枠を消すPCの画面ではメニューは常時表示させる必要があるので、md:blockを追加します。class="md:block">ここまでの設定でTailwindを学びながらナビゲーションバーを作成することができました。コンテンツ領域追加の設定コンテンツ領域の追加ナビゲーションバーの作成の次はその下にコンテンツを入れていきます。id=”app”>の直下にコンテンツ領域を追加します。追加した要素にのcontainerとmx-autoを設定します。<p>コンテンツ領域</p></div>コンテンツ領域を追加このままコンテンツを下に追加することもできますが、メニューをオープンするとオープンしたメニューの下にコンテンツの領域が移動します。メニューオープン時のコンテンツの表示場所コンテンツの内容をメニューの真下(コンテンツの内容がある階層がメニューの階層の下になる)になるようにスタイルを変更していきます。fixedの設定コンテンツ領域とメニューの領域を重ねるためにfixedを利用します。メニューの領域にfixedを追加します。md:block">TailwindだけではなくCSSのpositionの理解も必要になります。あわせて読みたい今回こそ、CSSのpositionを必ず理解したいfixedを設定するとメニューの領域に色の設定が行われていなため透明になります。その下にコンテンツ領域が入っていることを確認できます。メニューにfixedを追加メニューに背景色を設定します。md:block">メニューに背景色を追加fixedを設定すると幅が文字列の長さになってしますため、widthを100%に設定する必要があります。widthを100%にするためにw-fullを追加します。md:block">左側に空白がありますが、コンテンツ領域はメニューの下にあることはわかります。メニューが横に広がる左端の空白を埋めるため、left-0を設定します。md:block">left-0を設定きれいに下のコンテンツを隠すことができました。ここで一度PC画面に戻りましょう。先程までの両端にスペースがありましたが、どこまでサイズを広げてもお問い合わせボタンは右にくっついたまま、またコンテンツ領域も消えています。PC画面の表示これはfixedが設定されたままになっているためです。mdではfixedからデフォルトのstaticを設定します。md:static">元のように右側にも領域があり、コンテンツ領域が表示されました。fixedをmdブレイクポイントで解除コンテンツ領域をもう少し拡大して動作確認を行います。pタグで20行のダミー業を追加します。メニューの下からダミー行が表示されているので正常に動作しているように思えます。コンテンツ領域の行を増やしたブラウザの縦の大きさを少し小さめにしてスクロールを行ってください。スクロールを行うと上部にコンテンツの中身が表示されます。メニューはfixedで固定されていますが、ロゴとハンバーガメニューの領域は固定されていないため、スクロールを行うとブラウザの画面上から消えるためです。スクロールを実施した結果これを避けるためにはHRのロゴ領域も固定させる必要があります。bg-gray-500の設定をまず行います。bg-gray-500">設定を追加した結果、ロゴ領域がfixedとして通常の場所から外れたことで下にあったメニューが上部に来て、ロゴ領域に重なっているためHRの文字列を確認することができません。ロゴ領域にfixedを設定もし重なっていることを確認したいのであれば、メニューの背景色を削除してください。背景色がなくなると下の層に存在するロゴ領域が確認できます。背景色がなくなると下の層が見えるメニュー領域にmt-16(margin-top)を設定することでロゴ領域が見えるようになるので設定を行います。背景色も元に戻しておきます。md:static">ブラウザで確認するとロゴ領域が表示されているのがわかります。margin-topを設定した後mt-16に設定しているので、ロゴ領域の高さをh-16に設定します。bg-gray-500">h-16を追加すると2つの領域間の空間はなくなります。h-16で高さを設定コンテンツ領域の上にもmt-16を設定しておきます。設定しないとコンテンツの上部がロゴ領域の下に隠れていまいます。mt-16">この状態だとスクロールしても問題なく動作します。HRとハンバーガーメニューが両端に隣接しているのpx-2を追加しておきます。px-2">PC画面に戻すとデザインが崩れています。崩れたデザイン崩れたデザインはfixedやmarginなどを解除すると直すことができます。ロゴ領域のfixedをmdでstaticへ。md:static">メニュー領域のmt-16をmdでmt-0へ。md:mt-0">コンテンツ領域のmt-16をmdでmt-0へ。md:mt-0">mdブレイクポイントでの設定を反映すると元の状態に戻ります。元の状態に戻るmarignやpaddingについては調整を行ってください。メニューにスクロールバーを表示メニューがブラウザの画面に収まりないような下記のような場合に右側にスクロールバーを表示させる設定を行います。スクロールバーを表示させるためには、hight:100%、overflow-y-scrollを設定します。mdでは解除できるようにmd:overflow-visibleを設定しておきます。md:mt-0">下記のようにお問い合わせボタンまでスクロールできるように親要素のulにpb-24(padding-bottom)を追加しておきます。mdブレイクポイントではそのpaddingを解除しておきます。メニューにスクロールバーを。