PCにもスマートフォンにも対応できるCSS framework
公開日:
:
最終更新日:2013/08/15
WEBDESIGN
これがいわゆる「レスポンシブデザイン」ってやつでしょうか?
レスポンシブデザイン用のフレームワーク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とシンプルですっきりしたレイアウトを見ることができます。
幾つかテストしてみます。まずは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の文字がセンタリングだしバックに色もついてるのに….
ブラウザの幅を狭くすると
上下に並びます。でも右側がキレちゃっています。なんだか微妙な感じ。なにか間違えているのでしょうか???
ちなみにデモのソースを見ると、
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
関連記事
-
-
Alexmos Simple BGC GUI 8bit 設定事例を更新しました
毎度お世話になります。初めてごらんいただいたかた、いつもご覧になってくれているかた、みなさんこんばん
-
-
11インチフレキシブルマジックアームがやっと届く
どうも最近のアマゾンは遅い。税金云々って話もあるので、できるだけヨドバシで購入するようになったのです
-
-
センサー欄のジャイロLPFなどを確認する
朝日新聞の誤報問題で社長が辞任したようです。「誤報を誤報と認めた点は正しく評価されるべき」という話も
-
-
Pilotfly H1+ の電源スイッチボード交換
暑すぎて何もする気になれない。一日中車に乗ってお出かけしたりエアコンの聞いた部屋でボーーーーッとした
-
-
ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(5)メニュー階層化
今回はオリジナルプラグインの管理画面でのメニュー作成について。かなりすんなりと出来てしまったので短め
- PREV
- 某インジのシグナルをEA化して改造してみる(4)
- NEXT
- 恋に落ちるブログを作ってみる(4)
ご質問は掲示板へお願いいたします。