フレームワークの一種、Twitter BootStrapを使用して、
サイトを構築する事もあります。
ですが、なかなか公式サイトやサンプルなどのように、うまくいかず、
どのように調べても、どうしても出てこないこともあります。

そういうときは、調べるよりも、
その導入しているサイトを解析するようにしています。
FireFoxではプラグインの「Firebug」、
Google Chromeでは「要素を検証」を利用すれば、
対象のタグに対して指定されているCSSなどがわかるようになり、
それを一時的に改変して、検証する事もできます。

例えばこのclass属性を外せばどうなるか、
このスタイルを解除すればどうなるか、と、
気になった部分を１つずつ解除し、その動きを確かめれば、
どの要素がその動きを担っているのかが、わかってきます。

そして結果的に出た答えは、
意外にもそのフレームワークにはない、標準的な要素でもあったりします。

そのひとつとしては、ブラウザ上部にメニューバーを配置すると、
普通ではコンテンツの頭が、そのメニューの下にかぶってしまう。
それを公式サイトを解析してわかったのが、
bodyタグに、「padding-top:40px;」を指定していた事に気が付きました。

FireFoxの「Firebug」で検証してみると、
サイトの上部に、パディングを示す紫のエリア、
右下のCSS表示を見てみると、「padding-top:40px;」が表示されています。

他にも気になっていたのが、ブラウザを広げた際に、
コンテンツも特定の広さ以上に広がらないという事も、わからなかったのですが、
これは、普通に自分がCSSで指定できる部分でした。

@media(min-width:800px;){
    .main_contents{
        width:800px;
    }
}

このように記述すれば、ブラウザ内が幅800pxよりも大きくなった際に、
中のスタイル「width:800px;」が適用されるようになります。
逆に「@media(max-width:400px;){}」とすれば、
幅400pxまでブラウザを縮めた際のCSSも指定できます。
ただし残念なことに、これはIEでは対応していないようです。
この部分では公式サイトやサンプルでもあきらめていて、
完全固定にしているようです。

これらは、Bootstrapの機能ではなく、CSSの基本的な要素だったせいか、
どこのリファレンスにも掲載していないようです。
一応、常識の範囲内という事だったのでしょうね、きっと。

こういう局面は、もちろんBootstrapに限らず、他の分野でもありました。
そこで出た結論のひとつは、フレームワークでは不可能と思った部分は、
自分で独自に操作をする事で行う可能性があるという事です。
ただ問題なのは、本当にその方法で正しいのかが証明できなければ、
原始的だったり、強引な方法だったりなど、心残りな面もあったりもしますが。

Tweet