【フロント_4日目】Tailwind CSS_1冊目

こんにちは投資ロウトです。

背景

・諸事情があり、急いでTailwind CSSを学ぶ必要性に迫られています。
※Dockerも早急に学ぶ必要があり、並行で進めていきます。
→完了
※他の優先順位でstopする可能性あり

基本的なユーティリティー

文字の揃えと配置

# 例 左よせ表示
<div class="text-left">左に寄せて表示</div>

# 例2 テキストを上部に寄せる
<div class="align-top">テキストが上部に</div>

# 例3 下線を引く
<div class="underline">下線が入る</div>

# 例3 マージンのトップを調整
<div class="mt-{Number}">マージントップが入る</div>

要素の間隔を開ける

# 例4 -16px間隔で空いているもの
# 先頭に「-」をつけるとネガティブマージンとのこと
<div class="flex -space-x-4">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

# 例5 逆順にすることも可能
<div class="flex flex-row-reverse space-x-4 space-x-reverse">
    <div>D</div>
    <div>E</div>
    <div>F</div>
</div>

ボーダー

# 例6 ボーダートップをつける
<div class="border-t-{Number}">ボーダートップが入る</div>

サイズ

# 例7 幅の調整
<div class="w-{Number}">横幅を調整</div>

# 例8 高さの調整
<div class="h-{Number}">高さを調整</div>

アスペクト比

# 例9 動画の埋め込み(youtubeの埋め込み)
<iframe class="w-full aspect-video" src="https://www.youtube.com/{Link}">
</iframe>

角丸

# 例10 少し角を丸くする
<div class="rounded-sm">角がまるくなる</div>

表示と非表示

# 例11 非表示
<div class="hidden">表示されない</div>

フレックス

# 例12 フレックスレイアウトの指定 
<div class="flex ...">
    <div>フレックスの表示設定</div>
</div>
# flex-row・・・横並び
# flex-col・・・縦並び
# flex-wrap・・・折り返す

と短いですが以上で学習を区切りたいと思います。ご精読ありがとうございました。焦らずコツコツ頑張っていきたいと思います。