*

Kube でイマドキなホームページを作るのだ

公開日: : 最終更新日:2013/08/15 WEBDESIGN

スクリーンショット 2012-11-07 0.27.55
Kube CSS-frameworks を頑張って使いこなせるようになりたい!


今回はデモページを参考に実験してみます。
http://imperavi.com/kube/demo/
デモページを見ると感激ですが、良くわからない人(含む自分)のためブラウザの枠を狭くしたり広げたりしてみましょう。枠の幅によって画像が縮小したり、横に3つ並ぶ枠が立て一列になったり。すごいでしょ?これの調査です。
まずはダウンロードしたソースをそのままアップして表示させます。もちろんkube.min.cssはしっかりリンクさせてから。すると表示されるのは
スクリーンショット-07 0.43.43のコピー
もちろん枠の変化に追従しています。そこでダウンロードしたソースから、まずは横に3個並ぶ枠の部分を取り出します。取り出したものは

<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" />

問題無く表示されました。枠の変更にも目的通り追従しています。
スクリーンショット 2012-11-07 0.39.46
スクリーンショット 2012-11-07 0.39.54
デモ画面と違うのは左右の余白。これは別の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行を削って表示させてみると、
スクリーンショット 2012-11-07 0.59.45
スクリーンショット 2012-11-07 0.59.55
ばっちり予想通りに表示されました。
 


Sponsored Link


 
 

関連記事

no image

CakePHP 本命の Controller を作成

controllerはdb名_controller.phpがお約束です。 Class名は Memb

記事を読む

激安なマットボックス Matte Box M3 が届いたので開封し身体検査

懲りずに激安に挑戦のふたたびマットボックスを輸入。価格は 11,000円程度でした。アマゾンでも同じ

記事を読む

「文系でもわかる!」3軸ブラシレスジンバルの「PID」キホン

最近お出かけする機会が多く、なかなか記事を書く時間がとれません。今日も色々届く予定なのですが、朝から

記事を読む

画質は? KIPON BAVEYES フォーカルレデューサーマウントアダプターEF-MFT

風邪気味だったのが、だいぶ良くなってきて、天気も良いので撮影実験。 そもそも GH4のクロップ

記事を読む

もう出たの?SimpleBGC GUI 2.43b5 登場

天気!!!というわけで先に紅葉撮影に出発してきました。来週がピークかな?ってことで、来週もう一度撮影

記事を読む

ご質問は掲示板へお願いいたします。

Message

メールアドレスが公開されることはありません。

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKにジンバルを入れる

やっぱり高いけどEndurance (エンデュランス) カメラバッグの

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKが北の国から

一年中GWの美少女です。 Lowepro カメラリュック フリッ

MOZA Mini-S スマホ用スタビライザーが届いた!

1万円弱で買えるスマホ用ブラシレスジンバルの新型 MOZA Mini-

GoPro Hero7 Black用 保護ケース アルミ合金保護フレームがいいよって話

別に大した話ではありません。 最近書くことが少ないのでたまには書

期待の新製品 MOZA Mini-S スマホ用スタビライザーが発売されたみたい

教えてもらった新製品のホームページで MOZA Mini-Sが紹介され

→もっと見る




  •  

PAGE TOP ↑