【Web】Spectre.cssとやらをいじってみる

【Web】Spectre.cssとやらをいじってみる

あぁ、FF7をクリアしてしまったからタイクツですな。
そのあとトマラルクやってたが、ムズい上、目が疲れるのでやめ。
なんか、違うゲームをやろう。

さて、今回はCSSフレームワークについて。
表題にもあるとおり、Spectreというフレームワークをいじってみる。
CSSフレームワークで有名なのはBootstrap。あいつは重たすぎる。
車もそうですけど、軽い方がいい場合もあるのです。それに、業務で使うレベルのものであれば、あんなに多機能はいらん。
なぜSpectreをいじってみるかというと、このサイトのコンテンツを作成する際にはSpectreのフレームワークに従って作成されているからである。
ま、知らなくてもいいこのなのだが、知っておいて損はなし。

そういえば、知らなくていいコトというドラマがやってましたが、知らなくていいコトと判断できるのは知ったあとだよな。
知った後に不要だったものは、事柄と不要フラグだけ頭の中に残せばいい。
何においても言えるが、だと思う。では説得力に欠けるのである。そりゃぁ気持ちだけじゃねぇ…。

では軽ーくいじってみようかな

・タイポ

パターンとして、HTMLタグを使うパターンと、クラス指定するパターンがある模様。

<h3>HTMLタグのH3ですよ</h3>
<span class="h3">クラス指定のH3ですよ</span>

・テーブル

ただただ、テーブルタグを組んでクラス指定したのみ。
とりあえずきれいに整形されているって感じ。

<table class="table">
  <thead>
    <tr>
      <th>名称</th>
      <th>住所</th>
      <th>開設期間</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>オートリゾート滝野</td>
      <td>札幌市南区滝野２４７番地</td>
      <td>4月20日～10月31日</td>
    </tr>
    <tr>
      <td>三重湖公園キャンプ場</td>
      <td>空知郡南幌町南13線西3番地</td>
      <td>4月1日～10月31日</td>
    </tr>
    <tr>
      <td>三重湖公園キャンプ場</td>
      <td>北海道樺戸郡月形町北農場1</td>
      <td>謎</td>
    </tr>
  </tbody>
</table>

・ボタン

これもいたって普通ね。
くるくるは…何に使うか？

<div class="container">
    <div class="columns">
        <div class="column col-2" >
            <button class="btn">Default</button>
        </div>
        <div class="column col-2" >
            <button class="btn btn-primary">Primary</button>
        </div>
        <div class="column col-2" >
            <button class="btn btn-link">Link button</button>
        </div>
        <div class="column col-2" >
           <button class="btn btn-success">success button</button>
        </div>
        <div class="column col-2" >
           <button class="btn btn-error">success button</button>
        </div>
        <div class="column col-2" >
           <button class="btn loading">kurukuru</button>
        </div>
    </div>
</div>

・入力フォーム関連

さて、入力関連。
どんなものがあるか。

<div class="container">
    <div class="columns">
        <div class="column col-4" >
            <div class="form-group">
                <label class="form-label" for="input_name">お名前</label>
                <input class="form-input" type="text" id="input_name" placeholder="お名前">
            </div>
        </div>

        <div class="column col-4" >
            <div class="form-group">
                <label class="form-label" for="select_age_1">年齢</label>
                <select class="form-select" id="select_age_1">
                    <option>若年</option>
                    <option>中年</option>
                    <option>老人</option>
                    <option>老害</option>
                </select>
            </div>
        </div>
        <div class="column col-4" >
            <div class="form-group">
                <label class="form-label" for="select_age_2">年齢</label>
                <select class="form-select" id="select_age_2" multiple="">
                    <option>若年</option>
                    <option>中年</option>
                    <option>老人</option>
                    <option>老害</option>
                </select>
            </div>
        </div>
        <div class="column col-4" >
            <div class="form-group">
                <label class="form-label">性別</label>
                <label class="form-radio">
                    <input type="radio" name="gender" checked>
                    <i class="form-icon"></i> オトコ
                </label>
                <label class="form-radio">
                    <input type="radio" name="gender">
                    <i class="form-icon"></i> オンナ
                </label>
                <label class="form-radio">
                    <input type="radio" name="gender">
                    <i class="form-icon"></i> ドチラデモナイ
                </label>
                <label class="form-radio">
                    <input type="radio" name="gender">
                    <i class="form-icon"></i> ワカラナイ
                </label>
            </div>
        </div>
        <div class="column col-4" >
            <div class="form-group">
                <label class="form-switch">
                    <input type="checkbox" checked>
                    <i class="form-icon"></i>他人の事を信じやすいタイプである
                </label>
                <label class="form-switch">
                    <input type="checkbox">
                    <i class="form-icon"></i>自分に自信がない
                </label>
            </div>
        </div>
    </div>
</div>

…入力フォームはこの辺で。。。。
しんどくなってきた。

グリッド

今度は配置関係。
一般的な12列分割である。
これはそんなに学習コストがかからんかな。
どうもこのCMSは独自にカスタムしているのか、マージンが無い状態になる。
ま、影響なし。

<div class="container">
    <div class="columns">
        <div class="column col-12 bg-success">フル</div>
    </div>
    <div class="columns">
        <div class="column col-6 bg-success">左側</div>
        <div class="column col-6 bg-success">右側</div>
    </div>
    <div class="columns">
        <div class="column col-4 bg-success">４ぶんかつ</div>
        <div class="column col-4 bg-success">４ぶんかつ</div>
        <div class="column col-4 bg-success">４ぶんかつ</div>
        <div class="column col-4 bg-success">４ぶんかつ</div>
    </div>
</div>

特段難しいデザインじゃない限り、大丈夫でしょ。
ＰＣで書いた記事だし、スマホを考慮するならもっとモバイル機器向けのクラスだらけになりそう。

・ナビゲーションバー

ん？
モバイル端末に対応するために、少し加工が必要かもしらんな。
JSを自前で組まなきゃならんわけだ。

<header class="navbar bg-gray">
    <section class="navbar-section">
        <a href="..." class="navbar-brand mr-2">This is nav</a>
        <a href="..." class="btn btn-link">Hahaha</a>
        <a href="..." class="btn btn-link">Hey you</a>
        <a href="..." class="btn btn-link">Oooops!!!</a>
    </section>
</header>

これだけできりゃ十分でしょう。
CSSだけでこんだけできれば、優秀優秀。