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
関連記事
-
-
FollowタブのDisableで安定しない SimpleBGC_GUI_2_41b5
一晩悩みました。バッテリー２本消費して結局 Disable は諦めました。どうやっても安定しないで暴
-
-
Panasonic GH3 でカラー調整してみる
近所にプラスチックダンボールが置いてあるか見に行ってきましたが、白だけ(T_T) キッチリサイズを計
-
-
激安UTEBIT Godox ソフトボックス ストロボ 60 x 60 cmを買ってみた
そんなわけで？ 写真撮影用はトレーシングペーパーにするか、アンブレラか？ それともソフトボックスにし
-
-
Pixel Film Studios ProWrite を購入して数年放置してから試す
BlackMagicDesign URSA mini 4.6K EF 販売中！ URSA
-
-
filmconvert を簡単にテスト＆大好きな動画
家に戻ったら日本が負けてる....グヌヌ...と唸りながらご飯も食べずに応援。やっと追いついたと思っ
- PREV
- 恋に落ちるブログを作ってみる（４）
- NEXT
- 宿の予約システムを作ってみる
ご質問は掲示板へお願いいたします。