*

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


 
 

関連記事

またまた発見!アイスクリーム型ブラシレスジンバル MiniSturdyFlight 他

RONIN M で決まりか? とかさんざん書いておいて、今更なんですが、小さいブラシレスジンバルも新

記事を読む

Smallrig DSLR Cage のアレンジ

マイク関係はお盆休みのためか問い合わせても返信無し。しかたがないのでリグ遊び。マイクを買うことを前提

記事を読む

Foundation4 でCustom CSS が使えないトラブル

BootStrap よりすっきり目な レスポンシブデザインフレームワークのFoundation。ちょ

記事を読む

ワードプレス用宿泊予約プラグイン開発「空室情報の表示」とか

久しぶりのワードプレスネタ。全然完成しませんわ。今回は最初にブラウザのキャッシュを切る作業をしました

記事を読む

no image

CodeIgniterに認証用ライブラリTank Auth導入

久しぶりに認証まわりを調べてみると、既にsimpleloginはバージョン2系統に対応していないよう

記事を読む

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

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 ↑