"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

クラスレス(No-Class)CSSフレームワークをなんとなく比較する

f:id:arakan_no_boku:20210926214452p:plain

目次

クラスレスCSS

自分の場合、ブログに乗せるサンプル画面や動作サンプルのデモの作成くらいにしか使ってないですけど、クラスレス(No-Class)CSSフレームワークは重宝してます。

タグとCSSへのリンクだけで、それなりに整えてくれます。

自前のCSSを追加してデザインする土台としても使いやすいです。

いつもは「new.css」を使ってます。

でも、他にも色々あるらしいです。

ということで。

今回は適当に作った以下の画面に、クラスレスCSSのリンクを追加してみて、どんな風に表示が変わるかを試してみることにしました。

元画面はこんなやつです。

f:id:arakan_no_boku:20211012235305p:plain

上記はCSS未指定の状態です。

くちゃくちゃです(笑)

これにクラスレスCSSへのリンクだけ張り替えて、表示をスナップしていきます。

なお、サンプルのHTML全体は、最後にのせます。

new.css

まずは、おなじみの「new.css」です。

newcss.net

貼り付けるリンクです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">

テキストボックスの背景が薄いので、ハードコピーだと見づらいですけど、見事にレイアウトはすっきりした感じになります。

f:id:arakan_no_boku:20210926220605p:plain

new.css Night

今度は「new.css」でも、Nightモードというやつです。

貼り付けるリンクです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">

<link rel="stylesheet" href="https://newcss.net/theme/night.css">

黒背景でかっこいいです。

これいいですね。

f:id:arakan_no_boku:20210926220931p:plain

new.css terminal

今度は「new.css」のターミナルモードです。

貼り付けるリンク。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">
<link rel="stylesheet" href="https://newcss.net/theme/terminal.css">

あーー。

なるほど、ターミナルっぽい色です。

f:id:arakan_no_boku:20210926221232p:plain

Bahunya

今度は「bahunya.css」です。

kimeiga.github.io

貼り付けるリンクです。

 <link rel="stylesheet" href="https://cdn.rawgit.com/kimeiga/bahunya/css/bahunya-0.1.3.css"/>

黒背景です。

<h1>タグの文字が馬鹿でかくなるので、これだけ<h2>タグに変更する必要がありましたが、なかなか、かっこいいです。

f:id:arakan_no_boku:20210926222138p:plain

sakurat

今度は「sakura.css」です。

github.com

貼り付けるCSSです。

<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">

白背景で、シンプルですけど、まとまった感じがします。

new.cssノーマルモードに似てます。

f:id:arakan_no_boku:20210926223317p:plain

awsm.css

最後に「awsm.css」です。

igoradamenko.github.io

リンクはこうです。

<link rel="stylesheet" href="https://unpkg.com/awsm.css/dist/awsm.min.css">

シンプルでいいですけど、個人的な好みとしては、もう少しパーツの上下間隔があいてたほうがいい感じがします。

f:id:arakan_no_boku:20210926224751p:plain

まとめ

試すのに使った画面自体が、かなりいい加減なので、なんだかなあ・・な比較になってしまいましたけど、雰囲気はつかめた気がします。

実は、これ以外にもいっぱい試したのですけど、適当すぎる使い方(リンクを張り替えるだけ)のせいもあって、レイアウトが崩れてしまったものとかもあって、そういうのは掲載せず、自分で使ってみようかなと思ったものだけのせました。

たぶん。

自分がメインで使うのは「new.css」かな・・と思います。

あくまで個人の感想ですけど(笑)

最後に今回動作確認に使ったHTMLです
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>クラスレスCSSお試し</title>

        <!-- ここの部分を差し替えて、CSSフレームワークを変更します。開始-->
        <link rel="stylesheet" href="//writ.cmcenroe.me/1.0.4/writ.min.css">
        <!-- ここの部分を差し替えて、CSSフレームワークを変更します。終了-->

		<meta name="description" content="クラスレスCSSをいろいろ試してみる" />
		<meta name="author" content="BOKU" />
	</head>
	<body>
		<header>
			<h1><header>タグ</h1>
		</header>
		<nav>
           <nav>タグ開始
           <img src=".\images\t01.jpg" />
		</nav>
		<main> 
            <main>タグ開始</br>
			<table>
                <tr>
                    <td style="border:none;">テキストボックス</td>
                    <td style="border:none;">
                        <input type="text" />
                        <input type="checkbox" checked>チェックボックス</input>
                    </td>
                </tr>
                <tr>
                    <td style="border:none;">SELECT</td>
                    <td style="border:none;"><select>
                            <option>かっこいい</option>
                            <option>そうでもない</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td style="border:none;">ラジオボタン</td>
                    <td style="border:none;">
                        <input type="radio" name="test" value="1">好き</input>
                        <input type="radio" name="test" value="2">そうでもない</input>
                        <input type="radio" name="test" value="3">嫌い</input>
                    </td>
                </tr>
                <tr>
                    <td style="border:none;" colspan="2"><input type="button" value="ボタンその1" /></td>
                </tr>
            </table>
            <table>
                <tr>
                    <th>タイトル</th>
                    <th>著者</th>
                    <th>内容</th>
                </tr>
                <tr>
                    <td>はじめての哲学的思考</td>
                    <td>苫野一徳</td>
                    <td>なぜ人を殺してはいけないのか。そんな人生の問いかけから社会の難問まで解き明かす哲学の考え方をやさしく語る</td>
                </tr>
            </table>
		</main>
		<footer>
			ここは<footer>タグ部分
		</footer>
	</body>
</html>

ではでは。