Kube でイマドキなホームページを作るのだ
公開日：
:
最終更新日：2013/08/15
WEBDESIGN
Kube CSS-frameworks を頑張って使いこなせるようになりたい！
今回はデモページを参考に実験してみます。
http://imperavi.com/kube/demo/
デモページを見ると感激ですが、良くわからない人（含む自分）のためブラウザの枠を狭くしたり広げたりしてみましょう。枠の幅によって画像が縮小したり、横に３つ並ぶ枠が立て一列になったり。すごいでしょ？これの調査です。
まずはダウンロードしたソースをそのままアップして表示させます。もちろんkube.min.cssはしっかりリンクさせてから。すると表示されるのは
もちろん枠の変化に追従しています。そこでダウンロードしたソースから、まずは横に３個並ぶ枠の部分を取り出します。取り出したものは
<body> <ul id="intro" class="block-three"> <li> <div class="inner"> 33333 </div> </li> <li> <div class="inner"> 44444 </div> </li> <li> <div class="inner"> 123 </div> </li> </ul> </body>
これをまっさらなHTML5のソースに貼り付けます。そしてCSSの設定を次のように書換えます。mystyle.css内には.innerのバックグラウンドカラーを設定しただけです。
<link rel="stylesheet" href="css/kube.min.css" media="all" /> <link rel="stylesheet" type="text/css" href="css/mystyle.css" />
問題無く表示されました。枠の変更にも目的通り追従しています。
デモ画面と違うのは左右の余白。これは別のCSSで調整していると考えて良さそうです。そこで前回のソース（ダウンロードしたファイルに入っていたindex.html）をもう一度見直します。まずは前回のHTMLソース。
<link rel="stylesheet" type="text/css" href="css/kube.css" /> <link rel="stylesheet" type="text/css" href="css/master.css" /> <link rel="stylesheet" type="text/css" href="css/mystyle.css" /> .....省略 <body> <div id="page"> <div class="row"> <div class="half">Half</div> <div class="half">Half</div> </div> </div> ....
page に問題がありそうです。cssファイルを探してみると,master.cssに#pagの設定がありました。
#page {
width: 940px;
padding: 0 10px;
margin: 24px auto;
}
ここから width行を削って表示させてみると、
ばっちり予想通りに表示されました。
Sponsored Link
関連記事
-
-
xismoを使ってみて覚えたところと謎なところ（追記あり）
謎と言っても私の理解が足りないだけなんですけどね^^; 一応私の自画像（美少女）３Dモデルがあ
-
-
安定合格ラインな 2.43b6 自動PID設定のまとめ
いつの間にか vimeo が微妙に日本語になっています。これって前からなんでしょうか？なんかすごく見
-
-
Canon EF50mm対決：コンパクトマクロ MACRO F2.5 対 撒き餌F1.8 II
キヤノンEF安レンズ対決！ 中古で買ったコンパクトマクロ50mmF2.5と激安なのに写りが良いと言
-
-
Glitch – 無料のVST プラグインで遊ぶ
先日ダウンロードした Glitch には見慣れないVST dllがいくつか入っていた。試しに起動して
-
-
CI-CMSのインストール
CI-CMSという名のCodeIgniterで書かれたCMSを発見。CI-CMSのインストールさんに
- PREV
- 恋に落ちるブログを作ってみる（４）
- NEXT
- 宿の予約システムを作ってみる
ご質問は掲示板へお願いいたします。