*

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


 
 

関連記事

海外旅行用のビデオカメラSONY CX430VとCX630Vを比較検討してみる

今年は子供が生まれたので一度も出かけられそうも無いが、去年は半分弱の海外放浪生活だった。これからは子

記事を読む

BeSteady がチュートリアル動画を大量にアップ

紹介する機会がなかったので、こっそり「GimbalMovies」にリンクしておいたのですが、BeSt

記事を読む

マジックランタンRAWムービーのレンズによる違いを軽く試した

残念ながら期待のKiss系にDPAFは搭載されず。おまけに動画はスペックダウンみたいな。70D重いし

記事を読む

動画編集用PCの性能を見てみる

結局のところ、すべてを刷新することになってしまった新PC。総額20万円弱はかかったような気がします。

記事を読む

M.T.H 汎用メタルフードと XCSOURCEステップアップリングの感想

お天気が良いので近所にお散歩。ついでにカメラを持ちだして気になっているボケのテストをしてきました。試

記事を読む

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

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 ↑