クラスレスなCSSフレームワーク new.css │ Webty Staff Blog

どうもこんにちは塚本です！

本日はクラスレスなCSSフレームワーク，
new.cssを見つけたので紹介したいと思います．

1. new.css
- 1.1. クラスフル
- 1.2. クラスレス
2. 使用例
- 2.1. まずはピュアHTML
- 2.2. new.cssを適用する
3. まとめ

new.css

new.cssとは，下記の標語の通り…

A classless CSS framework to write modern websites using only HTML.

モダンなWebサイトをHTMLだけで作ろう〜☆というフレームワークになっています．

クラスフル

<div class="row">
    <div class="col-md-6">
        <p class="text-center mt-3">
            クラスである程度デザインしていける！
        </p>
    </div>
</div>

例えば，BootstrapやTailWind CSS 等のフレームワークではこのように
クラスを指定してある程度デザインを作っていくと思います．

クラスレス

Bootstrap等はクラスフルなフレームワークであることに対して，new.cssはクラスレスです．
クラスレスということはつまり，HTMLタグのみ使うということになります．

<p>とか<h1>にスタイルを自動的に当ててくれる感じです

使用例

まずはピュアHTML

自分で考えるのが面倒だったのでWikipediaから「ロピタルの定理」を拾ってきました．
適当にそれっぽくHTMLにしてみました．

<body>
    <header>
        <h1>ロピタルの定理</h1>
    </header>
    <article>
        <section>
            <p>
                ロピタルの定理 (ロピタルのていり，英: l'Hôpital's rule) [注 1]とは，微分積分学において不定形（英語版）の極限を微分を用いて求めるための定理である．ベルヌーイの定理 (英語: Bernoulli's rule) と呼ばれることもある．本定理を (しばしば複数回) 適用することにより，不定形の式を非不定形の式に変換し，その極限値を容易に求めることができる可能性がある．
            </p>
            <h2>発見</h2>
            <p>
                本定理はスイスの数学者，ヨハン・ベルヌーイによって発見されたものであるとされている[1] (ロピタルの定理論争を参照)．本定理の名称としては，欧州で最初の微分学書である l'Analyse des Infiniment Petits pour l'Intelligence des Lignes Courbes (西暦1696年, 直訳: 曲線の理解のための無限小の解析)
                を出版し[2]，その中で本定理を広く世に知らしめた17世紀のフランスの数学者，ギヨーム・ド・ロピタルの名を冠してロピタルの定理と呼ばれることが通例である．ベルヌーイとロピタルとの間には契約があってロピタルは命名権のためにいくらかの対価を与えたということである．ロピタルの死後にベルヌーイが自分こそが定理の発見者であると暴露した[3]．
            </p>
            <h2>関連項目</h2>
            <ul>
                <li><a href="">不定形</a></li>
                <li><a href="">平均値の定理</a></li>
                <li><a href="">シュトルツ＝チェザロの定理</a></li>
            </ul>
        </section>
    </article>
</body>

ブラウザで表示させてみた結果はコチラになります．

まあ，予想通りと言いますか，
これに淡い背景色とアクセスカウンタを付ければ立派な懐かしWebサイトになります．

new.cssを適用する

先程と同じHTMLで，new.cssを適用させてみます．

<link rel="stylesheet" href="https://newcss.net/new.min.css">

コチラのタグをコピペするだけで適用させることができます．

うーん，だいぶ変わりました!
確かにモダンでおしゃれな感じになっているかと思います．

まとめ

new.cssを適用させることで素っ気なかったHTMLがモダンな感じになります．

普段よく使うHackMDやGithubっぽい雰囲気が出てるな〜と思います．

バニラHTMLにちょっとプラスしてる感じが，バニラアイスチョコチップのせみたいな感覚ですね!

スタイルを気にせず，Emmet使ってサクサクとHTMLを書いて
それっぽいドキュメントが作れると思います〜
MarkDown苦手という方にもオススメかな？

活用法はあなた次第!!

公式デモ　　　　：https://newcss.net/demo/
ナイトテーマ　　：https://newcss.net/theme/night/
ターミナルテーマ：https://newcss.net/theme/terminal/

クラスレスなCSSフレームワーク new.css