目次
クラスレス（No-Class）CSSフレームワークをいくつか試す
クラスレス（No-Class）CSSフレームワークは、動作説明用のサンプルなどを作る際にかなり重宝します。
タグとCSSへのリンクだけで、それなりに整えてくれるので、余分な記述が必要なくて人にソースを見せても、とても説明がしやすいからです。
クラスレスCSSフレームワークにはいくつか種類があるので、主だったものを試してみて、個人的に好みのものを選びたいなと思います。
比較元（CSS未指定）の画面イメージ
適当に作った以下の画面に、クラスレスCSSのリンクを追加してみて、どんな風に表示が変わるかを試してみることにしました。
元画面はこんなやつです。
上記はCSS未指定の状態なので、くちゃくちゃです（笑）
これにクラスレスCSSへのリンクだけ張り替えて、表示をスナップしていきます。
なお、サンプルのHTML全体は、最後にのせます。
new.css
おなじみの「new.css」です。
貼り付けるリンクです。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">
テキストボックスの背景が薄いので、ハードコピーだと見づらいですけど、見事にレイアウトはすっきりした感じになります。
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">
黒背景でかっこいいです。
これいいですね。
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">
あーー。
なるほど、ターミナルっぽい色です。
Bahunya
今度は「bahunya.css」です。
貼り付けるリンクです。
<link rel="stylesheet" href="https://cdn.rawgit.com/kimeiga/bahunya/css/bahunya-0.1.3.css"/>
黒背景です。
<h1>タグの文字が馬鹿でかくなるので、これだけ<h2>タグに変更する必要がありましたが、なかなか、かっこいいです。
sakurat
今度は「sakura.css」です。
貼り付けるCSSです。
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
白背景で、シンプルですけど、まとまった感じがします。
awsm.css
最後に「awsm.css」です。
リンクはこうです。
<link rel="stylesheet" href="https://unpkg.com/awsm.css/dist/awsm.min.css">
シンプルでいいですけど、個人的な好みとしては、もう少しパーツの上下間隔があいてたほうがいい感じがします。
今のところ個人的には「new.css」を使ってます
試すのに使った画面自体が、かなりいい加減なので、なんだかなあ・・な比較になってしまいましたけど、雰囲気はつかめた気がします。
実は、これ以外にもいっぱい試しました。
でも、リンクを張り替える以外何もしないとレイアウトが崩れてしまうものとかもあったので、そういうのは掲載していません。
個人的には。
今のところ「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="ボタンその１" /></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>
ではでは。
