前回は、webデザインの「色」についての記事を書きましたので、今度はそれを表現するスタイルシートと、フレームワークについて書こうと思います。
■スタイルシートとCSSをおさらい
フレームワークを使う前提知識として、スタイルシートとCSSの学習は必須事項です。
スタイルシート
「いまさらこんなこと知るまでもないわ！」な方は読み飛ばしOKです。
スタイルシートはwebデザインの根本に根差しており、これを知らずしてはCSSもフレームワークも理解できません。
また、CSSやフレームワークでも完全にまかないきれなかったり、最終的な表示の仕方を決めたい際に、html上にスタイルシートを記述することは普通にあります。
スタイルシートは、htmlタグに直接「style=””」の属性を加え、この中にスタイルシートとして定義されたコードを入力することで表示されます。
例えば、
style=”background:#f3f781;”で、
背景色をつける
style=”border:solid 1px #000; color:#00f;”で、
枠で囲う、文字色を変える
style=”text-align:center; font-weight:bold;”で、
といった基本要素から始まり、そこから、
style=”display:block; background:#facc2e; height:10px; width:10px;”で
こんな箱を作ったりして、
この箱に上記の文字を入れれば、
ボタン
こんなボタンっぽいものができあがります。
基礎中の基礎なので自分でもいまさら感はあるのですが、こうしたものは意外とあとになって振りかかってくるというか、フレームワークで使われる名称と役割が直結しやすいので、常に意識しているに越したことはありません。
CSS
Cascading Style Sheet （カスケーディング・スタイル・シート）の略。
「Cascading」とは、
カスケードとは、何段も連なった小さな滝のこと。転じて、同じものがいくつも数珠つなぎに連結された構造や、連鎖的あるいは段階的に物事が生じる様子を表す。（IT用語辞典より）
平たく言えば前述の「スタイルシート」のように、一個一個タグにスタイルシートを定義するのではなく、あらかじめ別の場所にスタイルに名前を付けてclassを定義しておき、そのタグにclassが割り振られた時だけ、定義したスタイルを呼び出すという概念です。
例えば先ほどのボタンぽいものも、
.buttonpoimono{display:block; background:#FACC2E;width:80px;text-align:center; font-weight:bold;}
というようにclassを定義して、＜div ＞タグにclass=”buttonpoimono”を追加するだけで、
このように共通した内容を引き回せるようになります。
これだけでもだいぶ拡張性、管理性は増したのですが、同時に別の問題もあります。
前々回の記事でも書いたように、classの「名前を定義する」がコードを書く人間によって変わってしまうからです。
なぜなら、記述さえ間違っていなければ形にできてしまい、厳密なルールもないからです。
また、CSSの書き方も違ったり、CSSの文体（class名の順番等）も違ったり、
そもそも自分で書いたコードじゃなくて、外部からの丸コピだったりとさまざまです。
これも一人で書いているなら、自分さえわかっていればよいのですが、誰かと共有したり、引き継いだり、コードを公開する際には当然問題が起きるでしょう。
また、スタイルシートとCSSの根本的な問題として、コーディングに時間がかかるという点も挙げられます。
CSSも用途や目的に合わせて、どんどんかさばり冗長化して行きますし、書いた人間が、どのclassにどのスタイルを割り振ったかを忘れるなんてこともしばしば起こります。
そんなわけで登場するのが、CSSフレームワークです。
■CSSフレームワーク
フレームワークとは、枠組み、骨組み、骨格、下部構造、構造、組織などの意味を持つ英単語。（IT用語辞典より）
CSSの場合、雛形（テンプレート）を意味します。つまり、自分で書くのではなく、さまざまなCSSをあらかじめ別の人間が定義・構築し、あとはclassを呼び出すだけで、webデザインの組み立てができてしまうものです。
上記で触れた”自分で書いたコードじゃなくて外部からの丸コピ”どころか、そのまんま使ってしまうというわけです。
フレームワークの良いところは、
- 一般公開されている＝実用に耐えうるデザイン
- 名前が統一化されているため、他者との共有化がしやすい
- 少し面倒な記述も、classを呼び出すだけでよい
- 複数のclassの組み合わせで制御が簡単
- ライブラリが充実している
等が挙げられます。
前回の「色」の話にもなるのですが、フレームワークで用いられるclassの色はある程度最初から決められており、それ以外の色はデフォルトでは使えないようになっています。
つまり、最初から色が絞られた状態であるため、余計な色を追加したり減らしたりで悩む必要がありません。
また、公開時点での流行りのデザインを取り入れているため、古臭さや素人感が出なくて済む面もあります。
しかし同時に欠点というか、文字通り枠組みをカッチリさせているので、「ここのデザインをもうちょっとこうしたい」など考えはじめると、途端にやりづらい側面も目につきます。
そういう時は、結局独自のCSSや外部プラグインの出番だったりするのですが、CSSフレームワークは膨大な量のclass名を定義しているため、独自CSSを定義する際に名前の重複が発生します。
スタイルシートというかプログラムの性質として、”同じ名前のものはあとからきた内容を上書きする”という仕様になっており、htmlの場合は、CSS＜タグ上のスタイルシートが優先されるので、classの重複やプラグインによるタグへのスタイル追加によって、デザインが崩壊する場合もあるので注意が必要です。
その辺を考慮しておけば、CSSフレームワークはコーディングやデザインに悩む時間を大幅に短縮することができるので、CSSの知識があればぜひ利用すべきです。
最も簡単で有名どころなのは、やはり「BootStrap」ですね。ボタンのデザインの判りやすさのほかに、グリッドシステムを用いてclassを割り振るだけでページが簡単に組みあがっていきます。ヘッダーやサイドバーなどの固定も簡単に行えるのが魅力的ですね。
有名どころなだけあって外部の拡張機能も豊富で、「ここをこう変えたい」と考えた場合でも、わりと融通が利く構造をしています。
■メールマガジンのスタイルシート
さまざまなオンラインショップで会員登録されたお客様には、メールマガジンが日夜飛んでると思われます。
一昔前はガラケーユーザーが多かったためか、単純なテキスト形式のメールマガジンが大半でしたが、スマホが普及している昨今では当たり前のように「HTMLメール」が用いられていますね。
Amazonが一番わかりやすいですね。見出しがあって、商品の写真があって、[商品ページはこちら！]ボタンがあるみたいなやつです。
ものにもよるのでしょうが、こうした「HTMLメール」は、CSSを用いず、タグにスタイルシートを埋め込む形式のようです。
スタイルシート⇒CSS⇒CSSフレームワークと推移はしているものの、独立したHTMLで配信されるメールマガジンなどは、逆にスタイルシートを直接書いたほうがいいのかもしれませんね。
というより、そうせざるを得ないケースもあるわけですが・・・
