[CSS]classの命名など気になるテクニックがいろいろ取り入れられているレスポンシブ対応のフレームワーク -Skyline
Post on:2015年1月21日
大規模サイトから個人のポートフォリオやブログまで、さまざまなデザインをサポートするための汎用性に優れたアーキテクチャで設計されたCSSのフレームワーク「Skyline」を紹介します。
![サイトのアニメーション](http://coliss.com/wp-content/uploads-201501/2015011901.gif)
Skylineでは気になるCSSのテクニックがたくさん使われています。
classの命名にはBEM、リセットにはnormalize.css、印刷にはHTML5 Boilerplate、コンポーネントのアイデアはBootstrap、そしてSCSSで書かれたオブジェクト指向のCSSです。
「BEM」とは、ブロック(Block)、エレメント(Element)、モディファイア(Modifier)の頭文字をとったもので、各要素を3つのどれかに必ず属するものとして考えます。
例えば、ページにはヘッダ・コンテンツ・フッタのブロックがあり、ヘッダブロックにはロゴ・メニュー・検索のブロックがあり、検索のブロックには入力フィールドとボタンのエレメントがある、という感じです。
詳しくは、下記ページをご覧ください。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011906.png)
HTMLもプロジェクトを始めるのに非常に親切なつくりになっています。
「***」で囲まれた箇所を自分用に直して使います。
![コードのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011903.png)
index.htmlのコードの一部
Skylineを使ってどんな感じのページが作成できるかのデモはこちら。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011901.png)
Skyline -デモページ
ページを表示した際にヘッダがズームし、コンテンツはベーシックなレイアウトになっています。
ダミー画像、ダミーテキストでつくられたデモもあり、グリッドの例やコンポーネント・エレメントなどがチェックできます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011902-01.png)
グリッドはレスポンシブ対応で、ベーシックなものから入れ子、そして二重入れ子のものも用意されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011902-02.png)
モジュールにはページでよく使うエレメントが多数、パネルやサムネイル、特徴などのコンテンツを配置するコールアウト(この名前初めて知った)、モーダルウインドウなどが用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011902-03.png)
sponsors