HTMLをCSSにあわせるな！クラス無しCSSフレームワーク tacit

tacit_logo
開発チームの下田です。

HTMLで簡単な画面を作るとき、困りますよねデザイン。
HTMLもJSも書けて、そのうえデザインしながらCSSも書けます！という超人なら良いんですが、私はそうではないのでCSSフレームワークを利用しています。

ですが、多くのCSSフレームワークを使うとHTML文書の構造が崩れます。
HTMLは文書の構造を表すものであって、スタイル指定はCSSで行うべきです。
どういうことか、おそらく一番メジャーなCSSフレームワークであろう、Bootstrapを例にみてみます。

ボタンの場合

普通のボタンはBootstrapではこうなります。

<button type="button" class="btn">OK</button>

classにbtnをつけています。buttonタグなんだから、クラスにbtnとつけなくてもボタンとわかるだろ！と突っ込みたくなりますね。
これは、Bootsrapのボタンらしい見た目にしてほしいと、cssフレームワークにスタイル指定するためのクラス付けです。

本来はクラスは要素の種類を表すために使うべきです。
例えばあるdivが商品を表す場合にproductとつける、その中に商品名を表すspanがあったらnameとつけるような感じです。
その要素の種類に合わせたスタイルシートを書くべきで、スタイル指定のためのクラスは本末転倒です。

とは言うものの、最初に言ったように全部自分で書ければいいのですが、そううまく出来ません。
そこでHTMLは書けるけどデザインは出来ない人はきれいなHTMLを書いて、仮の「それなりにきれいに見えるスタイル」をあててあげると解決です。

そんなCSSフレームワークが今回ご紹介するtacitです。
tacitを直訳すると「暗黙的な」という意味です。暗黙的に要素の種類から良い感じのスタイルをあててくれます。

CDNから読み込むだけで使えます。
バージョンは更新されていくので、適宜書き換えてください。

<link rel="stylesheet" href="https://cdn.rawgit.com/yegor256/tacit/gh-pages/tacit-css-1.2.9.min.css"/>

tacitで普通のボタンを書くと、こうなります。

<button type="button">OK</button>

tacit_button

submitタグも、それなりに送信できそうな見た目になります。

<input type="submit">

tacit_submit
普通のアプリケーションを作成するのに必要なtableやinputなどは、きれいに表示できます。
公式のgithub pagesに一通りのサンプルがのっています。

tacitを利用すればstyle指定をせずに単純にHTMLを書くだけで、それなりの見た目の画面が作成できます。
出来上がるのはCSSの読み込み部分以外はきれいなHTMLのため、デザイナーを入れて本気で画面をつくる場合もCSSを差し替えるだけで済みます。

学習コストはほぼ0なので、一度tacit使ってみませんか？