【TailWind CSS】レスポンシブな開発をするための準備をする

執筆に至った経緯

みなさんはレスポンシブなサイトを作る時、苦戦する事はなんでしょうか。
私は表示端末事の動作確認に時間をとられる事が多いです。
他にも独自に@media screenを設定するとスタイルシートが汚くなりがちなので改善していきたいです、

やりたいこと

• レスポンシブデザインのブレイクポイント事に背景の色を変更する事でブレイクポイントを可視化し。
• TailWind CSSでレスポンシブレイアウトを楽にする

レスポンシブデザインとは

ウェブデザインの手法のひとつで、デスクトップ版のウェブページを閲覧者の画面サイズまたはウェブブラウザに応じて表示できるようにする。
加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることも、そのタスクに含まれる点を理解しておくことが重要である。
引用：レスポンシブウェブデザイン

ブレイクポイントとは

ブレークポイントとは、コンピュータプログラムを実行する際に、開発者の指示で強制的に実行を一旦停止する箇所のこと。
プログラムの開発時に設定されるもので、実行中のプログラムの状態を確認し、不具合の原因などを探るために用いられる。
引用：IT用語辞典

レスポンシブデザインのブレイクポイント

1つのウェブサイトで多様なデバイスを同様にサポートするためにはある一定のワイドでレイアウトが切り替わるポイントを作成する必要があります。

ブレイクポイントを設定する

TailWind CSSで予め設定されたブレイクポイントを利用する

切り替わるポイントは下記の通り、そしてブレイクポイント事に背景を切り替える

| 接頭文字 | 切り替わるポイント | class(背景) |
| ---- | ---- | ---- | ---- |
| sm: | 640px | bg-red-200 |
| md: | 768px | bg-yellow-200 |
| lg: | 1024px | bg-green-200 |
| xl: | 1280px | bg-blue-200 |
| | all(mobile) | bg-gray-200 |

TailWind CSSではsm:、md:、lg:、xl:、をclassの接頭に付ける事で適応されます。

実際に適応してみる

【WEB開発】Vue.js開発環境を作ろう 導入編で作ったプロジェクトに編集を加えていくよ！

App.vue Before

<template>
  <img class="m-auto" alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

App.vue After

<template>
  <!--
    開発用ブレイクポイントに色分けを行う
    all(mobile): bg-gray-200
    sm(min-width: 640px):red
    md(min-width: 768px):yellow
    lg(min-width: 1024px):green
    xl(min-width: 1280px):blue
  -->
  <!-- <article> -->
  <article class="bg-gray-200 sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 xl:bg-blue-200">
    <img class="m-auto" alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Hello Vue 3 + Vite" />
  </article>
</template>

※動作画面のスクショは枚数が多くなってしまうので実装したコードのみ記載

まとめ

全5段階のポイントに分けてレイアウトを切り替えて行くことになります。
コーディングはTailWind CSSの接頭文字を使い切り分け、背景色で各ポイントのレイアウトを確認する事ができます。
これで動作確認時にどの端末表示でレイアウトが崩れているのかも確認しやすくなり作業効率もあがると思います。