勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Bootstrapよりも簡単でClassを付与する必要のないCSSフレームワーク「Simple.css」の利用方法

  CSS

何らかのテストページを提出する際、見た目を整えるためBootstrapを使用したりする。ただ、1ページだけとかの場合までBootstrapを使うのは面倒くさいケースも多い。Classとか付与せずにHTMLタグだけで適当に見た目を整えてくれないものかと探したところ「Simple.css」が良さそう。以下に利用方法をメモ。

 

サンプル

https://taitan916.info/sample/Simple.css/

 

Simple.css

公式サイト

https://simplecss.org/

GitHub

https://github.com/kevquirk/simple.css

CDN

CDNで使う場合は以下を記述する。

<link rel="stylesheet" href="https://cdn.simplecss.org/simple-v1.css">

 

利用方法

ソースコード

ヘッダー、フッターとよく使うと思われるtable / formタグの記述例が以下になる。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="https://cdn.simplecss.org/simple-v1.css">
        <title>Bootstrapよりも簡単でClassを付与する必要のないCSSフレームワーク「Simple.css」の利用方法</title>
    </head>
    <body>
        <header>
            <h1>ヘッダー</h1>
        </header>
        <main>
            <section>
                <h2>table</h2>
                <table>
                    <thead>
                        <tr>
                            <th>商品名</th>
                            <th>価格</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>みかん</td>
                            <td>200</td>
                        </tr>
                        <tr>
                            <td>メロン</td>
                            <td>3,000</td>
                        </tr>
                        <tr>
                            <td>桃</td>
                            <td>700</td>
                        </tr>
                    </tbody>
                </table>
            </section>
            <section>
                <form>
                    <h2>form</h2>
                    <div>
                        <div>セレクトメニュー</div>
                        <select>
                            <option selected="selected" value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </div>
                    <div>
                        <div>テキストボックス</div>
                        <input type="text">
                    </div>
                    <div>
                        <div>ラジオボタン</div>
                        <label>
                            <input checked="checked" name="type" type="radio" value="1">1
                        </label>
                        <label>
                            <input name="type" type="radio" value="2">2
                        </label>
                        <label>
                            <input name="type" type="radio" value="3">3
                        </label>
                    </div>
                    <div>
                        <div>チェックボックス</div>
                        <label>
                            <input type="checkbox" id="checkbox" value="1">1
                        </label>
                        <label>
                            <input type="checkbox" id="checkbox" value="2">2
                        </label>
                    </div>
                    <div>
                        <div>テキストエリア</div>
                        <textarea></textarea>
                    </div>
                    <button>送信ボタン</button>
                </form>
            </section>
        </main>
        <footer>フッター </footer>
    </body>
</html>

解説等

解説というほどではないがCDNで呼び出して普通にHTMLをタグを書くだけ。強いて言うならデモページでどんなタグだとどんな見た目になるか分かるので参考にするぐらい。

特長

  • Classが不要
  • レスポンシブ対応

 

所感

数ページあるような場合(特にダッシュボード系の場合)はBootstrapである程度見た目を整えたいところだけど、1ページとかだけだとSimple.cssで問題無さそう。今後使っていきたいところ。

 - CSS

  関連記事

Material Design Liteでセレクトメニュー(プルダウン)の作成方法

Material Design Liteでformのセレクトメニュー(プルダウン ...

CSSでカラーコード等を変数(カスタムプロパティ)として使用する方法

他社が作成されたCSSのソースコードを拝見していると、背景等の色を指定する部分に ...

「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法

「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...

tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法

tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...