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
関連記事
-
-
恋に落ちるブログを作ってみる（３）
CSSや画像のURLをスマートに書くんだ編のはじまりはじまり〜 いったいつになったらブログを書
-
-
iBUFFALO BlueLEDマウスBSMBB10NBKをレンジでチン
NFC tag搭載でパソコンやタブレットにかざすだけでつながるというBluetooth®3.0対応B
-
-
やっぱり信用できない自民党政権がスタートする
日本外交立て直しの一番はじめが天皇陛下を侮辱した韓国への親書。 選挙前には竹島の式典を政府主催
-
-
Final Cut Pro Xの有料プラグイン(？) PROWRITE 紹介＆ストロボエフェクトで動画をタイムラプスにする
BlackMagicDesign URSA mini 4.6K EF 販売中！ URSA
-
-
Macのchrome で英語フォントの表示がおかしい
予想通り１月は円高。ジワジワ進んでいます。もうちょっと待って月末には色々発注しようと我慢しながら見て
- PREV
- 恋に落ちるブログを作ってみる（４）
- NEXT
- 宿の予約システムを作ってみる
ご質問は掲示板へお願いいたします。