CSSが苦手な人、CSSを書く時間がない人に最適！見栄えのよいページを簡単に作成できるスタイルシート -sakura

CSSの知識は必要なく、そして時間もない時に、簡単にいい感じのデザインになるCSSのフレームワークを紹介します。
CSSが苦手な人に、バックエンドで作業する用の即席プロトタイプにも最適です。

既存のHTMLに一行、もしくは二行追加するだけで簡単に利用できます。

sakura
sakura -GitHub

• sakuraの特徴
• sakuraのデモ
• sakuraの使い方

sakuraの特徴

かなり古くさいデザインのページでも、モダンなページでも、わずか数秒で見栄えのよいページにすることができます。

• 使い方は簡単。外部ファイルを加えるだけで、既存のHTMLでさえも見栄えのよいデザインを適用できます。
• 即席のプロトタイプにも最適。特にバックエンドで作業する時に、簡単にスタイルを適用できます。
• 友達や叔母さんなど、CSSが難しいという人にも美しいブログが構築できます。
• 他のすべてのCSSフレームワークのように、class名を覚える必要はありません。
• class名を覚える必要はない、というより使用されていません。
• 基本的なHTMLの要素はすべてサポートされており、HTMLを変更したり、classを加えるなどの面倒な作業は一切不要です。

sakuraのデモ

sakuraがどのようになるかは、デモページで実際に見ることができます。

sakura デモページ: デフォルト

sakuraのCSSをはずした状態、スタイルシート無しの状態は、下記のようになります。

sakura デモページ: スタイル無し

sakuraではテーマが用意されており、デュオトーンのさまざまなカラースキームを利用できます。
デモページの左上「Switch」で変更できます。

sakura デモページ: アース

キャプチャしている位置がカラーの変化が少ない箇所なので、実際のデモページでお楽しみください。

sakura デモページ: ベイダー

sakura デモページ: ダーク

sakuraの使い方

sakuraを利用するのは、簡単です。
既存のページですぐに適用できます。

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

CSSは、CDNでも利用できます。

オプションとして、sakuraを使用する前にnormalize.cssを使用してリセットすることをお勧めします。

これで完了です。

カラーの設定

sakuraではテーマが用意されていますが、自身で作成することもできます。
「sakura-earthly.scss」は、下記のようになっています。