*

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


 
 

関連記事

注目のPHPフレームワークLaravelについて調べる

FulePHPが気に入っているのだが、やっぱり新しいフレームワークが話題だと聞くと気になりますよね?

記事を読む

DYS GM60-80T Brushless Gimbal Motor のテスト動画2

天気が良いので近所をお散歩。ついでに動画を撮ってみました。はたして GM60-80T はいけてるのか

記事を読む

ブラシレスジンバル:2.42b7と上下動を抑えた歩き方の実験

とりあえずなのかデザインはともかく大注目の製品が間もなく登場するようです。予想通りの製品であれば、今

記事を読む

AT9941か?それともDR-07MK2なのか?

こんな動画を見てしまったがために.... !!! この動画を見るまでは、「マイクはA

記事を読む

ブラシレスジンバル「ネットで見つけた気になるパーツ」など

最近色々動画を見ていて、SONYのα7sがすっかり気に入ってしまいました。噂の5軸がついた新バージョ

記事を読む

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

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 ↑