*

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

cakePHP で Authコンポーネントの使い方をメモ

なんとか動いているようなので忘れないようにメモ。 ねねとまつの小部屋 さん 【CakePHP】Aut

記事を読む

お正月なのにヨドバシの神対応に惚れた!当日配送が無料 !!

かつてパスワードがダメだのホームページが意味不明だの支払い方法が残念だのとディスりまくったヨドバシド

記事を読む

SmallRigとBENRO S6の組み合わせを試行錯誤

風引いて寝込んでました。まだちょっと熱がある状態です。やたら忙しいところに急に暑くなったり寒かったり

記事を読む

準備完了~明るい単焦点レンズ

明るい単焦点が揃った。PanasonicのLUMIX G 20mm F1.7 ASPHと14mm F

記事を読む

激安なマットボックス Matte Box M3 が届いたので開封し身体検査

懲りずに激安に挑戦のふたたびマットボックスを輸入。価格は 11,000円程度でした。アマゾンでも同じ

記事を読む

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

Message

メールアドレスが公開されることはありません。

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

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

日頃ネットをウロウロしていて記事にするほどでもない情報、記事にするほど

録音ミニスタジオ完成の図と12色のリモコンLED電球

構想10年・制作3日の自宅音声収録スタジオの完成です。 ご覧の通

録音(撮影)ミニスタジオの制作DIY

そんな訳で吸音スポンジを壁に取り付けてみた続きです。 調子に乗っ

YAMAHA MG10UXミキサー到着

2018年 物置(事務所or作業場or遊び部屋)の一角を音声収録&撮影

そしてzbrush coreをインストールしてみる話

Blenderに挫折してから一気に3Dにのめり込んでいます。 ま

録音環境を改善する!吸音パネルをDIYとか

久々に更新! すっかり更新グセが抜けてしまい、イマイチやる気が出

→もっと見る




  •  

PAGE TOP ↑