*

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


 
 

関連記事

Color Grading Central Color Finale 買ってみた!

それにしてもα6300ですが、どうも絵が甘い。4K30pでGH4に負けてるような...撮影が下手? 

記事を読む

ブレイクスルーなのか? SimpleBGC 32bit User-written scripts のお勉強

SimpleBGC GUI 2.44b4 (beta) がでて数日。そろそろ新しいのが出ているかとチ

記事を読む

カラーコレクション超入門(独自解釈)

私が欲しいのは eos Kiss なのに60PでDPAF付き。5Dの新型にはDPAFは当然!FHDで

記事を読む

気になるブラシレスジンバル

暑くて作業ができないので小ネタの日。雨が少ない気がしますが大丈夫でしょうか?前から気になっていた新型

記事を読む

謎のDigital Filters tab

トラブルの絶えない日韓関係。女性大統領と安部総理の会談も未だ行われていませんが、別に無理してやらなく

記事を読む

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

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 ↑