勉強したことのメモ

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

  関連記事

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

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

Flash上にHTMLのテキストやリンク(aタグ)を重ねる方法

FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSか ...

IE11でSB Admin2のログインページの表示がおかしい

ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...

HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)

HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...

要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...