RACCOON TECH BLOG

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。

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とつけるような感じです。
その要素の種類に合わせたスタイルシートを書くべきで、スタイル指定のためのクラスは本末転倒です。

CSS Framework for Dummies, Without Classes

とは言うものの、最初に言ったように全部自分で書ければいいのですが、そううまく出来ません。
そこで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使ってみませんか?

一緒にラクーンのサービスを作りませんか? 採用情報を詳しく見る

関連記事

運営会社:株式会社ラクーンホールディングス(c)2000 RACCOON HOLDINGS, Inc