*

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


 
 

関連記事

可変NDフィルターの色かぶりを調整する【追試あり】

しかしセキが止まりませんな。既に二ヶ月近くゴホゴホ。鼻水ずるずる。熱はないのでなんとか普通に生活は出

記事を読む

80cmのカメラスライダーが欲しい!安くて軽いのはどれ?

せめて土曜日はブログの更新を休もうかと思っていました。しかし今後、しばらく更新が止まるかもしれないの

記事を読む

FL STUDIO & KORG microKEY-25BKRDをツナグ

VirtualBox FL Studio で microKEY-25BKRDをツナグのがこれまた^^

記事を読む

物欲退散!マイクロフォーサーズで60mm以上のレンズのまとめ(自分用)

YouTube見ていて英語がわかりません。なんの話をしているか程度は聞こえますが、細かい点はまったく

記事を読む

カスタマイズ続編!ブラシレスジンバル (3 Axis Brushless Gimbal)

またまた来ましたギンバルカスタマイズのご紹介。今回も引き続き、あの方のカスタマイズ続編を画像付きで送

記事を読む

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

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 ↑