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
関連記事
-
-
ブログをはじめて２ヶ月経過のアクセスログなど
このブログをはじめて２ヶ月程度経過しました。若干の振り返りとアクセス状況などを後の世に続くひとたちに
-
-
無料のLUT「LUTIFY.ME」をちょっとだけ試してみる
３月23日にGH5が発売されるようです。24万円ですが、内容を見ると順調に進化しているようで、パナソ
-
-
無料3D作成ソフト xismo がすごくわかりやすい感じ
こんばんは 心は美少女です。 Blenderを使いこなす、というか覚えるためには、多くのキーコ
-
-
MacBook Pro13 2011 Late にCubase7を入れてみると
仕事が忙しいので現実逃避のDTMモード。一番避けていたYAMAHAいっちゃいました。なんとなくYAM
-
-
SimpleBGC GUI 2.43b4 登場
やっと海外放浪が終わり自宅待機。色々あって撮影はあまり出来なかったけど、暇な時にチラッとタイムラプス
- PREV
- 恋に落ちるブログを作ってみる（４）
- NEXT
- 宿の予約システムを作ってみる
ご質問は掲示板へお願いいたします。