はちど

ボードゲームのレビューなど。

*

試作ページ用CSSフレームワークを作ってみよう、と思った。

      2013/03/08

Hachiです。
最近の更新頻度の高さは、自分でも驚いているんですが、多分これのおかげです。

ロディアラマ。
上質な紙のブロックメモで有名なロディアが出した、モレスキン風ハードカバーノートです。
先日紹介した「空が灰色だから」の4巻を買いに行った際に、つい欲しくなって買ってしまったものですが、大正解でした。

文房具好きとしては、モレスキンは一度使ってみたいノートブックだったのですが、
紙の質が良くないという欠点を持っていて、購入に二の足を踏んでいました。
「ロディアの紙質でモレスキンみたいなのが出れば買うのになぁ」と常々思っていた自分にとって、
このロディアラマは買うべくして買ったものと言えます。

実際の用途としては、

仕事中に新しく知ったあれやこれについてとりとめもなく書いてみたり、

HTMLやCSSのチートシートを切り貼りしてみたりして使ってます。
これがネタ帳代わりになって、ここに書くネタも最近はあまり困らないのかな、と。

レビューですが、紙質はやはり良く、万年筆のドバドバインクでも裏抜けしないので、書き心地は最高です。
ただ、あまり紙質が良すぎるせいで、チートシートの切り貼りは紙面の無駄な気がして、少し躊躇ってしまいました。。

閑話休題。
Webの新しいお仕事が入って、私がまずやることは試作です。
要件定義も済んでいないうちから、まずは試作品1号を作り始めていたりします。

要件定義の段階って、まだまだ経験の浅い自分からすると、
雲を掴むようなことを言われて戸惑うことが多いんです。
具体的に説明されても、こちらがそれを正しく把握できないとか。
こちらが説明していることも、正しく伝わってるのかよくわからないとか。

んじゃ叩き台あった方がいいよね、ってことでまず試作から入るわけです。
こちらが案件をどう解釈したのかは見ればわかりますし、見せながら説明できる。
相手からの具体的な要望もその試作の上で説明されるので、こちらも理解しやすい。
案件の確認回数を減らして、結果的に全体の工数短縮。こうして世界は平和になったのだ。
なかなか良いアイディアじゃないか、と思って、叩き台はさっさと作るようにしてます。

ただ、今までのWeb制作環境は、自分が楽しいからというのもあって、毎回ゼロから作り始めていました。
一応テンプレートは自分用のを持っていますが、本当に必要なものだけ。
<html>,<head>,<body>とヘッダの中身くらいなものでした。
いかんせん、ここからでは時間がかかりすぎる。

そんな流れで、HTMLテンプレートの拡充を計画していたのですが、
よくよく考えるとCSSもブロック配置はほぼ毎回同じような構図にするんだし、
同じようにHTML組んで、用意してあるCSSを突っ込むだけでデザインできあがるような
自分の試作用フレームワーク作ったらいいんじゃないのかな、ということに気がついて。
そんな感じで表題の話になっていくわけです。

CSSフレームワークの代表的なものに、Twitter Bootstrapというものがあります。
簡単な実装でTwitter風デザインに、といわれるものです。
あとは、グリッドデザイン手法を使ったCSSフレームワークなんかも探せば出てきますね。
そういうのを使えば確かに手っ取り早いんですが、自分で書かないなんて楽しくないじゃないですか。
というのは置いといたとしても、用意されたクラスをいちいちHTMLに突っ込む必要があったりなど
フレームワークの方からHTMLの記述方法を指定されることも多く、練習が必要そうだと思います。

その点、自分でCSSフレームワークを作ると何がいいのかというと。

  • 無駄にクラスを量産しなくても、タグ自体にスタイルぶち込める。
  • 自分の癖に合わせたCSSの記述が思いのまま。CSSは添えるだけ。
  • ついでに一般的にはサポート外のIEとかいうブラウザにも対応できる。
  • 何か問題があったときにも自分で作ったのだから対処しやすい。

なかなかよさそうです。特にIEの辺りが。

じゃあ作るとなると実際どういうのが必要なのかについても考えてみました。

  • bodyに指定してページ全体
  • div#wrapper,header,div#main,footerの大きさと配置
  • div#mainの中に配置する箱の大きさ(1カラムから3カラムまで)
  • article,sectionあたり、必要ならば
  • h1,h2,h3,h4くらいの見出しタグを適当に装飾など

もう少しありそうですが今のところ思いついたのはこれくらいです。
HTML5で書かれた大抵の(自分の)HTMLには必ずある要素やid,classを挙げてみました。

あとは実際に作ってみよう、ってところで、今回の話題は終わりです。
次の更新では、実際に作ったものとそれを適用したサンプルページでも載せようと思います。

sns-widget

更新情報の確認にはこちら!

 - Web技術, 文房具