*

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


 
 

関連記事

気になる情報・新製品発見メモ

日頃ネットをウロウロしていて記事にするほどでもない情報、記事にするほど内容がわからないものなどをメモ

記事を読む

2014年の欲しいものリスト 〜 動画撮影編

謹賀新年。というわけで正月から変わらぬペースでブログ更新です。元日ということで今年の抱負というかたん

記事を読む

新ファーム 2.43b6 で自動PID設定を確認

ハッピーハロウィンの動画が話題になっているようです。日本人的なノリで意味不明なイベントに仕上げて楽し

記事を読む

URSA mini を RONIN-Mに載せたらサポートベスト!

いつもの通り ebayをフラフラしていて発見したのは SMALLRIG Ronin-M用16mm 延

記事を読む

問題は色々あれど – Brushless Gimbal で桜を撮ってきたの

ソトは危険がいっぱいなので、できるだけ引きこもっていたいのですが、おじさん天気が良いと油断して、つい

記事を読む

no image

CodeIgniter は終了

今までメインに使っていたCodeIgniterの使用を中止することにしました。 とっても残念です。

記事を読む

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

Message

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

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

気になる情報・新製品発見メモ

日頃ネットをウロウロしていて記事にするほどでもない情報、記事にするほど

CeVIO Creative StudioがMacのWin10で認証失敗

久しぶりに更新できました。 この時期は寒くて...と言い訳から入

xismoを使ってみて覚えたところと謎なところ(追記あり)

謎と言っても私の理解が足りないだけなんですけどね^^; 一応私の

Macで MikuMikuDanceができる〜 nanoemというフリーソフト

blenderが難しすぎて挫折しかかっていたときに知った xismo

wacom Intuos ペンモデルの small (ミントブルー)がかわいい

誰がなんと言おうと美少女です! すっかり xismoが気に入って

無料3D作成ソフト xismo がすごくわかりやすい感じ

こんばんは 心は美少女です。 Blenderを使いこなす、という

→もっと見る




  •  

PAGE TOP ↑