Bootstrapいいわ～。もうこれでいいや。例えばちょっとしたブログやブログっぽいCMSのサイトを作るときの選択肢がWordPress一択になったように、ちょっとレスポンシブなサイトを作るときはBootstrap一択でいい気がしてきた。
この1ヶ月間でちょっとしたサイトを作るのに、初めてBootstrapを使った。こちらのBootstrap3日本語リファレンスにはずっとお世話になった。ありがてぇ。
BootstrapはまだCSSの部分しか使っていないけど、何が良かったのかを書こう。
まず、たいていのPCのブラウザやスマホやタブレットで同じように表示されるようにしてくれるところがいい。全てではないらしいが、こっちが何もしないでも大抵をカバーしてくれるなら十分だ。
つぎに、CSSを書き足せばカスタマイズができること。Bootstrapとかいう新技術にビビっていたけど、要するに表示を共通化するCSSの設定集ってことみたい（他にJavaScriptによる機能もある）。だからBootstrapの設定を下地にしつつ、色やサイズなんかの設定を追記して上書きすればいいのだ。BootstrapのCSSには bootstrap.css というファイルと bootstrap.min.css というファイルがある。この2つは全く同じ設定で、前者は改行された人間に見やすい内容確認用のファイル、後者は改行空白を取り除いて軽量化された実際にサイトへ組み込むファイルとなっている。んで前者のファイルを見ながらclassのCSS設定方法を確認し、<style>タグ内なり外部CSSファイルなりへカスタマイズ内容を書けばいい。
そしてHTMLを手っ取り早く書けることも良かった。これは良し悪しだったが、良い部分もあった。何しろ、とにかく片っ端からclass付きの<div>で囲っていけばいいのだ。このclass属性で4通りの画面幅ごとに応じた表示内容を設定する。これだけでレスポンシブ対応完了だ。バンバン<div>タグを使っていくと、HTML4.0時代のノリを思い出す。文字の色サイズを変えるために<font size=”” color=””>を使い、太字にするため<strong>を使い、中央に寄せるために<center>を使っていた頃の。初めのうちは心情的に受け入れられないが、無理してアホになりバンバン<div>を並べていこう。レッツ・レスポンシブ。
あとスマホ/タブレットサイズの表示時に自動的にナビゲーション部分を折りたたんでくれ、その展開用のボタンを表示してくれるのは助かった。個人的にそういうJavaScriptやjQueryなどの領域はさっぱりわからないので。
ただし、<strong>を使えば太字に、<small>を使えば85%の小さい文字になるっていうのはやっぱり良くないと思った。そうだろうけど、そこは自分でCSSでやったほうがいいんじゃないかと。
それと使っているうちにCSSやJavaScriptの外部読み込みファイル数が増えていくのも気になった。ブログにブログ・パーツを沢山設置してものすごく重たくなってしまったトラウマを思い出す。当初はCSSやjQueryのファイルをBootstrapやGoogleなどから読み込んでサーバのデータ転送量をケチろうとしたが、やっぱり若干重くなった気がしたので結局自分のサーバに置いた。
一応、図書館でBootstrapの本を何冊か借りて読んだけど、ネットにある情報のほうが新しいし詳しいのであまり意味はなかった。
