LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@SKY-HaYaTo

【CSSフレームワーク『Bulma』】グリッドシステムを使って簡単なフォーム画面を作成する。

Posted at

【グリッドシステムを使うことのメリット】

グリッドシステムを使うメリットとして異なるデバイス(PCやモバイル端末など)でも画面崩れしないレイアウトを作成することが出来ます。
シンプルな構造なので使いまわしが可能で、メンテナンスが容易です。

【Bootstrapと異なる点：rowの代わりにColumnsクラスを使う】

rowクラスの代わりにColumnsクラスを使って作成します。

【グリッドシステムの構成と手順】

①外枠に『箱』であるcontainerクラスをあててコンテンツを入れる区画を作る。
②箱ができたら、『行』であるcolumnsクラスをあててヨコを分割する。
③行ができたら、『列』であるcolumnクラスをあててタテに分割する。

【手順】

①containerクラスを使う。
②columnsクラスを使う。
③column is-〇〇　※〇〇は数字が入る

sample.html
<!DOCTYPE html>
<head>
    <title>グリッドシステムを使ったフォーム画面</title>
    <!--fontawesomeをCDN経由で取得する。-->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <!--bulmaをCDN経由で取得する。-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
    <div class="container">
        <div class="columns">
            <!--画面を2分割(is-6プロパティを使う)して、名前（姓）エリアを作る。-->
            <div class="column is-6">
                <!--fieldプロパティでラベルと入力欄をグループ化する-->
                <div class="field">
                    <!--名前（姓）ラベルエリア-->
                    <div class="nameSeiLabelArea">
                        <label class="label">名前（姓）</label>
                    </div>
                    <!--名前（姓）入力エリア-->
                    <div class="control nameSeiInputArea has-icons-left has-icons-right">
                        <!--inputタグ属性と枠線の配色を設定する(例：input is-success)-->
                        <input class="input nameSeiInput is-success" type="text" placeholder="姓" />
                        <span class="icon is-small is-left">
                            <i class="fas fa-user"></i>
                        </span>
                        <span class="icon is-small is-right">
                            <i class="fas fa-check"></i>
                        </span>
                    </div>
                </div>
            </div>
            <!--画面を2分割(is-6プロパティを使う)して、名前（名）エリアをつくる。-->
            <div class="column is-6">
                <!--fieldプロパティでラベルと入力欄をグループ化する-->
                <div class="field">
                    <!--名前（名）ラベルエリア-->
                    <div class="nameMeiArea">
                        <label class="label">名前（名）</label>
                    </div>
                    <!--名前（名）入力エリア-->
                    <div class="control nameMeiInputArea has-icons-left has-icons-right">
                        <!--inputタグ属性と枠線の配色を設定する(例：input is-success)-->
                        <input class="input nameMeiInput is-success" type="text" placeholder="名" />
                        <span class="icon is-small is-left">
                            <i class="fas fa-user"></i>
                        </span>
                        <span class="icon is-small is-right">
                            <i class="fas fa-check"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!--住所、電話番号、E-mailを並列に表示する-->
        <div class="columns">
            <!--画面を3分割(is-4プロパティを使う)する。-->
            <!--【住所】：fieldプロパティでラベルと入力欄をグループ化する。-->
            <div class="column is-4">
                <div class="field">
                    <div class="addressLabelArea">
                        <label class="label">住所</label>
                    </div>
                    <div class="control addressInputArea">
                        <!--inputタグ属性と枠線の配色を設定する(例：input is-success)-->
                        <input class="input addressInput is-success" type="text" placeholder="住所"/>
                    </div>
                    
                </div>
            </div>
            <!--画面を3分割(is-4プロパティを使う)する。-->
            <!--【電話番号】：fieldプロパティでラベルと入力欄をグループ化する。-->
            <div class="column is-4">
                <div class="field">
                    <div class="telLabelArea">
                        <label class="label">電話番号</label>
                    </div>
                    <div class="control telArea">
                        <!--inputタグ属性と枠線の配色を設定する(例：input is-success)-->
                        <input class="input telInput is-success" type="text" placeholder="0120-123-4567" />
                    </div>
                </div>
            </div>
            <!--画面を3分割(is-4プロパティを使う)する。-->
            <!--【E-mail】：fieldプロパティでラベルと入力欄をグループ化する。-->
            <div class="column is-4">
                <div class="field">
                    <div class="emailLabelArea">
                        <label class="label">E-mail</label>
                    </div>
                    <div class="control emailInputArea">
                        <!--inputタグ属性と枠線の配色を設定する(例：input is-success)-->
                        <input class="input emailInput is-success" type="email" placeholder="emailTaro@emailtaro.com" />
                    </div>
                </div>
            </div>
        </div>
        <!--ドロップダウンリスト、チェックボックス、ラジオボタンを並列に表示する-->
        <div class="columns">
            <!--画面を3分割(is-4プロパティを使う)する。-->
            <div class="column is-4">
                <div class="field">
                    <div class="selectOptionArea">
                        <label class="label">選択オプション</label>
                    </div>
                    <div class="control selectBoxArea">
                        <div class="select">
                            <select>
                                <option>選択１</option>
                                <option>選択２</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <!--画面を3分割(is-4プロパティを使う)する。-->
            <div class="column is-4">
                <div class="field">
                    <div class="checkboxArea">
                        <label class="label">チェックボックス</label>
                    </div>
                    <div class="control">
                        <label class="checkbox">
                            <input type="checkbox" />
                            チェックボックス
                        </label>
                    </div>
                </div>
            </div>
            <!--画面を3分割(is-4プロパティを使う)する。-->
            <div class="column is-4">
                <div class="field">
                    <div class="radioArea1">
                        <label class="radio">
                            <input type="radio" name="selectradio" />
                            選択A
                        </label>
                    </div>
                    <div class="radioArea1">
                        <label class="radio">
                            <input type="radio" name="selectradio" />
                            選択B
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <!--「送信する」ボタン、「キャンセルする」ボタンを並列表示する。-->
        <div class="columns">
            <div class="column">
                <!--is-groupedプロパティを使ってボタン群をグループ化する-->
                <div class="field is-grouped">
                    <div class="control">
                        <button class="button is-link">送信する</button>
                    </div>
                    <div class="control">
                        <button class="button is-danger">キャンセルする</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

完成図

bulmaForm.png

【参考サイト】

■【公式サイト】Bulma Column sizes
URL:https://bulma.io/documentation/columns/sizes/

■【公式サイト】Bulma Form controls
URL:https://bulma.io/documentation/form/general/

■とんよー。ブログさん　CSS フレームワーク「Bulma」
URL:https://tonyo.design/posts/recommended-bulma-no1/

0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?