Tailwind

tailwind.config

Play CDN:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>
  <h1 class="text-3xl font-bold underline text-clifford">
    Hello world!
  </h1>
</body>
</html>

高さ:

1
2
3
4
5
6
7
8
9

    tailwind.config = {
      theme: {
        extend: {
          height: {
            "112": '28rem',
          }
        }
      }
    }

ブレイクイント

ブレイクポイント幅CSS
sm640ピクセル@media (min-width: 640px) { … }
md768ピクセル@media (min-width: 768px) { … }
lg1024ピクセル@media (min-width: 1024px) { … }
xl1280ピクセル@media (min-width: 1280px) { … }
2xl1536ピクセル@media (min-width: 1536px) { … }

HTML5 レイアウト

1
2
3
4
5
6


<div>
  <header></header>
  <main></main>
  <footer></footer>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

 <!doctype html>
      <head/>
  
      <body>
          <section>
              <header/>
              <nav/>
              <aside/>
              <main>
                <section/>
              </main>
              <footer/>
          </section>
      </body>
  </html>

セマンティック要素:

タグ意味
article独立したコンテンツを表します。例えば、ブログ記事やニュース記事など。
asideメインコンテンツに関連する補足情報を提供します。サイドバーなどに使用されます。
detailsユーザーが表示・非表示を切り替えられる追加情報を含みます。
figcaptionfigure要素内のコンテンツのキャプションを提供します。
figure図やイラストなどの自己完結型のコンテンツを表します。
footerセクションやページ全体のフッターを表します。著作権情報やリンクなどが含まれます。
headerセクションやページ全体のヘッダーを表します。ナビゲーションリンクやロゴなどが含まれます。
main文書の主要な内容を表します。メインコンテンツが含まれます。
navナビゲーションリンクのセクションを表します。メニューや目次などに使用されます。
section文書の自立したセクションを表します。主題ごとに区切るために使用されます。

マルチメディア要素

タグ意味
audio音声コンテンツを埋め込むための要素です。
video動画コンテンツを埋め込むための要素です。
sourceaudioやvideo要素の複数のメディアリソースを指定します。
trackvideoやaudio要素の字幕ファイルを指定します。

フォーム要素

タグ意味
datalist入力候補のリストを提供します。
output計算結果やユーザーの操作結果を表示します。
progressタスクの進行状況を示します。
meter既知の範囲内の測定値を示します。

記事

シャドウ

色