More than 3 years have passed since last update.

【CSSフレームワーク TailWind CSS】"グリッドシステム"を使った超シンプルなサンプルを作る。

tailwindcss

Last updated at 2021-07-11Posted at 2021-07-11

CSSフレームワーク"tailwindcss"でグリッドシステムを使ったサンプルについてです。

皆さんもなじみ深いメジャーなCSSフレームワーク『Bootstrap』ではwebページを12等分に分割して開発する"グリッドシステム"が採用されています。

この"グリッドシステム"を活用するメリットとして"シンプルで開発や改修しやすい"という理由が挙げられます。
少ないコ－ドでユーザフレンドリーなWebサイトを開発するためには"グリッドシステム"という考え方が不可欠です。

今回は"tailwind css"というフレームワークを使って"グリッドシステム"を活用した超シンプルなサンプルを作ってみました。

sample.html

<!Doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!--tailwind cssをCDN経由で読み込み-->
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mx-auto">
    <!--/*2行分の行を取得する*/-->  
    <div class="grid grid-rows-2">
        <!--/*2分割したカラム幅を取得する。*/-->
        <div class="grid grid-cols-2">
            <!--名前（姓）のエリア-->
            <div class="firstNameArea">
                <!--Labelエリア-->
                <div class="firstNameLabelArea">
                    <label class="firstNameClass">名前（姓）</label>
                </div>
                <!--inputエリア-->
                <div class="firstNameInputArea">
                    <input type="text" class="firstNameInputClass border border-black" id="firstNameInput" placeholder="名前（姓）"/>
                </div>
            </div>
            <!--名前（名）のエリア-->
            <div class="lastNameArea">
                <!--Labelエリア-->
                <div class="lastNameLabelArea">
                    <label class="lastNameClass">名前（名）</label>
                </div>
                <!--inputエリア-->
                <div class="lastNameInputArea">
                    <input type="text" class="lastNameInputClass border border-black" id="lastNameInput" placeholder="名前（名）"/>
                </div>
            </div>
        </div>
    </div>
  </div>
</body>
</html>

普段触っているBootstrap以外にも他のCSSフレームワークでもサンプルを作成することで各フレームワークごとのクセを理解しつつ技術力をもっともっと上げたいと思っています。

【表示結果】

【参考サイト】
■tailwindcss Grid Template Rows
URL:https://tailwindcss.com/docs/grid-template-rows

■tailwindcss Grid Template Columns
URL:https://tailwindcss.com/docs/grid-template-columns

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up