勉強したことのメモ

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

  関連記事

セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法

セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...

CSSで親子関連のセレクターをネスト(入れ子)で指定する方法

CSSで親子関連のセレクターを指定する場合「.parent .child{}」の ...

スマホサイトでviewportを指定しても横スクロールバーが表示される

スマホ用のサイトでviewportが指定されており、widthも100%になって ...

SB Adminよりシンプル&軽量なBootstrap系ダッシュボードのテンプレートについて

ダッシュボード(管理画面)を作る際、SB Adminというテンプレートを利用する ...

CSSで一つの要素に対して複数の背景色を指定する方法

1つのdiv要素に対して複数の背景色をつけたかった。background-col ...