CSSフレームワークを使うと見た目が整ったWebサイトを素早く構築できます。ただ、あまり多機能なフレームワークを選ぶとカスタマイズがしづらくなり、フレームワークの雰囲気に引きずられてしまいます。 素早さと自由さのバランスが大事なのですが、今回紹介するOpen Styleは割とシンプルで、仰々しい機能が多くないのが特徴と言えるかも知れません。

Open Styleの使い方

今回はスクリーンショット多めで紹介します。

背景色。基本はオレンジ、緑、青、黒の4色です。ここはカスタマイズできるでしょう。

テキストカラーとフォントサイズ。

グリッド。7分割というのが特徴かも。

間を空けたり寄せることができます。

テキストの配置も自由です。

ボタン。

フォーム。こちらは最低限。

カード型表示。

背景に画像を当てる表示。パララックスエフェクトにも対応しています。

カバー表示。動画も使えます。

フラッシュ。ナビゲーションバー。

画像のサークル、角丸表示。

Open Styleは機能は多くないので使うのはさほど難しくなさそうです。またカスタマイズすることもできるでしょう。Webサイトを作る際のベースに使ってみてはいかがでしょうか。

Open StyleはCSS製、MIT Licenseのオープンソース・ソフトウェアです。

Open Style | Another lightweight open source CSS framework hongyanh/open-style