*

PCにもスマートフォンにも対応できるCSS framework

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

スクリーンショット 2012-11-06 19.55.43
これがいわゆる「レスポンシブデザイン」ってやつでしょうか?
レスポンシブデザイン用のフレームワークKubeCSS-framework for professional developersを見つけたので遊んでみます。


CSS-framework for professional developers
http://imperavi.com/kube/
使い方はリンクを貼るだけ(で 今あるサイトが何でもレスポンシブになるわけじゃないけどね)

<link rel="stylesheet" type="text/css" href="css/kube.css" />

License
Kube Framework is absolutely free for personal or commercial use.
ライセンスは個人・商売利用でも完全に無料。素敵。
早速解凍してみると index.htmlとcssフォルダ。cssフォルダには目的の kube.cssとkube.min.cssとmaster.cssが入っています。ともかくindex.htmlをサクッとブラウザで開くと…..真っ白(T_T)
htmlの書き方は、画面右上のメニューから選べばわかるみたいです。Typography、Grid、Forms、Tables、Goodies、Buttonsとシンプルですっきりしたレイアウトを見ることができます。
th_スクリーンショット 2012-11-06 20.54.25
th_スクリーンショット 2012-11-06 20.54.36
th_スクリーンショット 2012-11-06 20.55.17
幾つかテストしてみます。まずはindex.htmlを修正。フレームワークの修正はしないほうが良さそうなのでオリジナルのcssファイル(mystyle.css)をリンクさせます。そして最初から書いてあるクラスpageの中にサンプルページ(Grid)のソースを書き足します。

<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>
....

分かりやすいように、mystyle.cssに以下の設定を書きます。

.half {
background-color: #CCC;
}

問題なく表示されたようです。でもサンプルはhalfの文字がセンタリングだしバックに色もついてるのに….
th_スクリーンショット 2012-11-06 23.07.50
ブラウザの幅を狭くすると
th_スクリーンショット 2012-11-06 23.08.00
上下に並びます。でも右側がキレちゃっています。なんだか微妙な感じ。なにか間違えているのでしょうか???
ちなみにデモのソースを見ると、
http://imperavi.com/kube/demo/

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/kube.min.css" media="all" />
<link rel="stylesheet" href="/css/kube.responsive.min.css" media="all" />
<link rel="stylesheet" href="/css/demo.css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>

見慣れないcssがリンクされています。この辺を配布していないのに意味があるのかわかりませんが、まずは楽しそうなので今後の勉強課題とします。


Sponsored Link


 
 

関連記事

no image

WordPressの引越し作業

WordPress サイトを引越しした時に困ったことがあったのでメモ。   現在動いているデー

記事を読む

高感度ジャイロオンで適応PIDオフにして自動PIDチューニング

Windows7が過日の破壊工作的アップデートでメタメタな状態。ソフトを立ち上げるとブルースクリーン

記事を読む

スライダーの画角による違い

雨が降っていて夜景テストができなかったので、ちょっとテストしてみたスライダーの映像で本日はお茶を濁し

記事を読む

kenasanoさんのSimpleBGC GUI設定を一括公開

アンケートサイトを使ってYouTubeで生計を立てている人を調査したという記事をどこかで読んだけどど

記事を読む

無料のLUT「LUTIFY.ME」をちょっとだけ試してみる

3月23日にGH5が発売されるようです。24万円ですが、内容を見ると順調に進化しているようで、パナソ

記事を読む

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

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 ↑