*

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


 
 

関連記事

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

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

記事を読む

Konovaのスライダーとハンドルを買ってみた

実は知らなかった韓国のKonovaというメーカー。照明やリグなんかを出しているらしい。

記事を読む

やっときた!Apple純正激安高性能DTMソフト「Logic Pro X」

突然の新バージョンLogic Pro Xが販売開始されています。クルクル詐欺と言われて数年。一部では

記事を読む

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(8)セキュリティ対策

前回紹介したホームページを参考にソースを書き換えてみました。特に標準の option テーブルにレコ

記事を読む

GH4 V-logアップグレードソフトウェアキーと無料のLUTで遊ぶ

フランスでは大変なことになっているようです。のんきな我が家には「LUMIX DMC-GH4」に「V-

記事を読む

感想!freetel フリーテル SIMフリー スマートフォン priori2 スペシャルパック

メインがMacなのでたまにしか使わない Windows 7。そろそろ10も出てくるようですが、 Wi

記事を読む

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

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 ↑