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
関連記事
-
-
ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る（11）空室管理画面 B
空室管理画面の２回目。今回は空室状況の入力欄と月が変わった時の処理を加えてみます。今回は一覧表示なの
-
-
到着！SENNHEISERゼンハイザー MKE600を開封
世間はすっかり連休で道路も超混雑。お天気も順調でブログ書いてるのが虚しくなります。しかし晴れ間を選ん
-
-
【開封】Kenko 三脚・一脚アクセサリ バキュームマウントグリッパーII 吸盤のみ
寒いけどスッキリ晴れ渡った日が続きます。気持ちいいけどイマイチ乗り切れない年末。今年はクリスマスが中
-
-
ブラシレスギンバルのロール軸の水平が修正されてきた
今日も暑そうです。昨晩夕方から某大御所にアドバイスをいただき、諦めかけていた私のジンバルちゃんを再び
-
-
Zomei 可変NDフィルターのテスト（適当）
旅に出て、その街を歩きまわりながら撮影する。リュックサックを背負って、小さめの三脚と小さめのスライダ
- PREV
- 恋に落ちるブログを作ってみる（４）
- NEXT
- 宿の予約システムを作ってみる
ご質問は掲示板へお願いいたします。