LoginSignup
3
0
@Hashimoto-Noriaki(Noriaki Hashimoto)

一撃で理解できる! CSSのフレームワークTailwindをCSSと比較しながら解説!

Last updated at Posted at 2023-10-24

はじめに

まず自分はフロントエンド開発の案件に初参画をしてTailWindを初めて使いました。
実際に使ってみたら使いやすかったのでこの記事にまとめてみました。

TailWindとは

CSSのフレームワークです。最近利用者が増えているみたいです。
使ってみた感想はとにかくCSSの実装が簡単です。
最初はCSSが頭から抜けなかったのですが、実際に書いて見るとすごく使いやすいです。

どのように使うか

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="heading">Hello, World!</h1>
        <p class="text">This is a simple example using CSS.</p>
    </div>
</body>
</html>

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f0f0f0;
}

.heading {
    font-size: 24px;
    color: #333;
}

.text {
    font-size: 16px;
    color: #666;
}

これがHTMLとCSSのコードです。Tailwindに修正したらどうなるでしょうか。

⚫︎Tailwind

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mx-auto p-4 bg-gray-200">
        <h1 class="text-2xl text-black">Hello, World!</h1>
        <p class="text-base text-gray-600">This is a simple example using Tailwind CSS.</p>
    </div>
</body>
</html>

このようにファイル１つで実装できました。

引用　　ChatGPT

ClassNameとStyle

まず1点注意としてClassNameとStyleで書き方が変わるので注意してください。

ClassNameはスタイルを適用するためのクラス名をHTML要素に追加します。
styleは通常のCSSで使用されるようなプロパティと値の組み合わせです。

CSSと比較していく

実際にCSSと書き方を比較していきます。自分はNext.jsを使った現場で使用しました。
(あくまで書き方を伝えるための記事です。)ChatGPTからも引用させていただきます。
理由はソースコードを公開できないからです。

⚫︎CSS

<AppBar
  className="custom-appbar"
>
  {/* ...コンテンツ... */}
</AppBar>

.custom-appbar {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px; /* text-xs 相当のフォントサイズを12px に設定 */
  background-color: red;
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px; /* h-10 相当の高さを40px に設定 */
  width: 40px; /* w-10 相当の幅を40px に設定 */
}

⚫︎Tailwind

<AppBar
className="flex justify-center text-center text-xs bg-red text-white  absolute inset-x-0 bottom-0 h-10 　w-10" // 必要なスタイルに変更する
Tailwind 説明
flex 要素の表示をフレックスボックスに設定。横並びまたは縦並びに配置するためのレイアウト方法。flexクラスを使用すると、要素内の子要素が横並びに配置
justify-center 横軸（主軸）方向で要素内のコンテンツを中央に配置
bg-red-500 赤い背景色
text-white テキストの色を白
inset-x-0 X軸（左右）の位置を0
bottom-0 下に配置
h-10 高さを10単位
w-10 要素の幅（width）を10単位
text-xs テキストのフォントサイズを小さなサイズに設定

別のコードも例に出します。

⚫︎CSS

<div class="custom-container">
  <button onClick={handleBackClick} class="custom-button">戻る</button>
</div>

.custom-container {
  margin: 280px;
  text-align: center;
}

.custom-button {
  background-color: blue;
  color: white;
  border: none;
  padding: 20px 20px; /* 上下のパディングを20pxに設定 */
  cursor: pointer;
  border-radius: 30px;
  width: 150px;
  height: 100px;
}

⚫︎Tailwind

return (
    <div style={{ margin: "280px", textAlign: "center"}}>
      <button
        onClick={handleBackClick}
        style={{ 
          backgroundColor:"blue",
          color:"white",
          border:"none",
          padding:"10px 20px",
          cursor:"pointer",
          borderRadius:"30px",
          width:"150px",
          height:"100px",
        }}
      >戻る</button>
    </div>
  );
Tailwind 説明
margin コンテナの外側のマージンを280px
textAlign テキストを中央揃え
backgroundColor: "blue": ボタンの背景色を青
color: "white": ボタンのテキストの色を白
border: "none": ボタンに境界線を設定しない
padding: "10px 20px": paddingを上下10px、左右20pxに設定
cursor: "pointer" ボタンがクリック可能
borderRadius: "30px": ボタンの角を30pxの丸くする
width: "150px": ボタンの幅を150px
height: "100px": ボタンの高さを100px

他にも色々と比較してみます。
⚫︎CSS

/* カスタムコンテナ */
.custom-container {
  margin: 280px;
  text-align: center;
  background-color: #f0f0f0;
}

/* カスタムボタン */
.custom-button {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 30px;
  width: 150px;
  transition: background-color 0.3s, transform 0.2s;
}

/* ホバー時のカスタムボタン */
.custom-button:hover {
  background-color: #0073e6;
  transform: scale(1.05);
}

/* フォーカス時のカスタムボタン */
.custom-button:focus {
  outline: none;
}

/* テキストスタイル */
.custom-text {
  font-size: 18px;
  color: #333;
  line-height: 1.5;
}

/* リンクスタイル */
.custom-link {
  color: #0073e6;
  text-decoration: none;
}

/* リンクホバー時のスタイル */
.custom-link:hover {
  text-decoration: underline;
}

⚫︎Tailwind

<div class="m-10 text-center bg-gray-200">
  <button onClick={handleBackClick} class="bg-blue-500 text-white px-4 py-2 rounded-full w-32 hover:bg-blue-700 transform scale-105 focus:outline-none">戻る</button>
</div>

<p class="text-lg text-gray-700 my-4">これはTailwind CSSの例です。リンクを<a href="#" class="text-blue-500 hover:underline">クリック</a>してみてください。</p>

実際のコードで説明していきます。

Tailwind 説明
m-10 マージンを指定。mはマージンのことで-10は上下左右のマージンを10単位
text-center テキストの中央揃え
bg-gray-200 背景色をグレーに設定　。数字はカラーコードで、200は色の濃さ
bg-blue-500 背景色を青に設定
text-white ボタンの文字の色を白
px-4 py-2 paddingを横に4単位、縦に2単位
rounded-full ボタンの角を丸くする
w-40 ボタンの幅を40単位
hover:bg-blue-500 ボタンにマウスホバーしたときの背景色を濃い青
transform scale-105 ボタンにマウスホバーしたときに少し大きく拡大
focus:outline-none ボタンがフォーカスされた時にアウトラインを非表示
text-lg テキストのサイズを大きめ
text-gray-500 テキストの色を灰色
my-4 上下のマージンを4単位。横ならyではなくx
hover:underline リンクにマウスホバーしたときに下線を表示

有益資料、動画、教材

以下の物もチェックしてみてください。

Tailwind

Udemy

有益資料

有益動画

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0