Komitsuboshi-css

比較的軽めで日本語で読めるCSSフレームワーク

特徴

レスポンシブ（リキッド）
モバイルファースト
12＋2グリッドレイアウト（12グリッド、n/5,n/7）
グリッドのレイアウトはfloatとflexを選択可能
横並びのブロックは右詰め、左詰めを選択可能
ブロック間の余白を、ブレイクポイントで変更可能
IE8対応
WordPress対応
クラス名は原則「機能-場所-詳細」
SCSSでカスタマイズを容易に

導入

1. GitHubからソースをダウンロード。

2. <head>タグ内で/src/直下のファイルを読み込ませます。

<link rel="stylesheet" type="text/css" href="../src/style.css" />
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="../src/kcss.js" type="text/javascript"></script>
<script>
var ua = window.navigator.userAgent.toLowerCase();
if (ua.indexOf("msie 10") != -1){
document.write('<link rel="stylesheet" type="text/css" href="../src/ie10.css" />');
}
else if (ua.indexOf("linux; u;") >0){
document.write('<link rel="stylesheet" type="text/css" href="../src/ie10.css" />');
}
</script>
<!--[if lte IE 9]>
<script src="../src/jquery.matchHeight.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function() {
jQuery("[class^='flex'] [class^='col-']").matchHeight();
});
</script>
<link rel="stylesheet" type="text/css" href="../src/ie9.css" />
<![endif]-->
<!--[if lt IE 9]>
<script src="../src/html5shiv.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../src/ie8.css" />
	<![endif]-->

※ソースの参照先はそれぞれの環境に合わせてください。

カスタマイズ

※Sass必須です。

_parameter.scssの編集

以下の項目は_parameter.scssで変更します。

グリッド間の余白（pxでの指定が可能です。）
ブレイクポイント（sp, tab, pc）
フォントファミリー
配色

コンポーネントの選択

component.scssで必要なコンポーネントのSCSSファイルを読み込ませる。

使い方

container

クラス名"container"は、要素の最大幅を960pxとし、左右のマージンを均等にします。（Bootstrapと同じです。）

この最大幅は、_parameter.scssの、変数$containerの値で設定します。

floatグリッド

class="float"は、Bootstrapの"row"に相当します。

floatの子要素に"col-[画面サイズ]-[占有グリッド数]"のクラスをつけることで分割できます。

<div class="float">
	  <div class="col-sp-1"></div>
	  <div class="col-sp-11"></div>
	</div>

"col-sp-N"は、全ての画面サイズで分割比を維持します。

col-sp-1

col-sp-11

col-sp-2

col-sp-10

col-sp-3

col-sp-9

col-sp-4

col-sp-8

col-sp-5

col-sp-7

col-sp-6

分割比N/5は、-Nby5で指定します。

col-sp-1by5

col-sp-4by5

col-sp-2by5

col-sp-3by5

同様に、分割比N/7は、-Nby7で指定します。

col-sp-1by7

col-sp-6by7

col-sp-2by7

col-sp-5by7

col-sp-3by7

col-sp-4by7

"col-tab-N"は、tabサイズ(481px)以上で分割比を維持、spサイズ(480px)以下で縦に並びます。

col-tab-1

col-tab-11

col-tab-2

col-tab-10

col-tab-3

col-tab-9

col-tab-4

col-tab-8

col-tab-5

col-tab-7

col-tab-6

"col-pc-N"は、pcサイズ(769px)以上で分割比を維持、tabサイズ(768px)以下で縦に並びます。

col-pc-1

col-pc-11

col-pc-2

col-pc-10

col-pc-3

col-pc-9

col-pc-4

col-pc-8

col-pc-5

col-pc-7

col-pc-6

"col-N"は、pcサイズ以上で分割費を維持、tabサイズ以上pcサイズ未満で2分割、spサイズで縦に並びます。

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

末尾にrを付けると、右寄せになります。

1(col-sp-1r)

2(col-sp-2r)

3(col-sp-6r)

4(col-sp-3r)

右寄せと左寄せを混ぜることもできます。

1(col-sp-1)

2(col-sp-2r)

3(col-sp-6)

4(col-sp-3r)

flexグリッド

親要素にclass="flex"をつけると、横方向のブロックの高さが揃います。

1(col-sp-1)

2(col-sp-2)

3(col-sp-6)

4(col-sp-3)

"flex-r"では右寄せになります。

※この時、子要素にはrをつけてください。

1(col-sp-1r)

2(col-sp-2r)

3(col-sp-6r)

4(col-sp-3r)

※親要素に"flex-r"を適用した場合、子要素にrをつけなくても右寄せになりますがflexbox非対応のブラウザでは左寄せで表示されてしまいます。

1(col-sp-1)

2(col-sp-2)

3(col-sp-6)

4(col-sp-3)

flex-[画面サイズ]-eq（等幅分割）

flex-sp-eq, flex-tab-eq, flex-pc-eq のクラスを適用した場合、子要素が等幅分割されます。子要素に隙間はありません。

<div class="flex-sp-eq">
	<div style="background-color: #98F;">flex-sp-eq</div>
	<div style="background-color: #9FF;">2</div>
	<div style="background-color: #F89;">3</div>
	<div style="background-color: #F98;">4</div>
</div>
<div class="flex-tab-eq">
	<div style="background-color: #98F;">flex-tab-eq</div>
	<div style="background-color: #9FF;">2</div>
	<div style="background-color: #F89;">3</div>
	<div style="background-color: #F98;">4</div>
</div>
<div class="flex-pc-eq">
	<div style="background-color: #98F;">flex-pc-eq</div>
	<div style="background-color: #9FF;">2</div>
	<div style="background-color: #F89;">3</div>
	<div style="background-color: #F98;">4</div>
</div>

flex-sp-eq

flex-tab-eq

flex-pc-eq

※このクラスはdisplay:flex;を用いて表示していますが、IE8,IE10ではdisplay:table; display:table-cell;を用いて表示しています。

画像配置

imgタグに"alignleft"のクラスを付与すると、float:left;が、"alignright"を付与するとfloat:right;が適用されます。（これらのクラス名はWordPressと同じです。）

alignleft,alignrightを付与した画像は、tabサイズ以上では最大幅は親要素の50%となり、回り込み領域を確保します。spサイズでは回り込みを解除し、最大幅は親要素の100%となります。

"br-no"を併記すると、spサイズでも最大幅50%となり、回り込みも維持されます。

逆に、tabサイズ以下で回り込みを解除したい場合は、"br-tab"を併記します。

上記のクラスは、回り込みが解除されると画像は左側によります。tabサイズ以下で回り込みを解除し、かつ中央揃えにしたいときは、"tab-center"のクラスをつけます。

同様に、spサイズ以下で回り込みを解除し、かつ中央揃えにしたいときは、"sp-center"をつけます。

clear, clearfix

回り込みを解除したい要素には、クラス名"clear"を付与します。

また、子要素に指定した回り込みを後続の要素に及ぼさないようにするには、"clearfix"を付与します。

画像キャプション

WordPressでキャプション付き画像は次のように出力されます。

<div class="wp-caption" style="width: 260px">
	<img alt="" 250x40.png" width="250" height="40" class="aligncenter" />
	<p class="wp-caption-text">WordPressでは記事内にキャプション付きの画像を挿入した際、このように出力されます。</p>
</div>

この出力結果は次のようになります。

WordPressでキャプション付きの画像を挿入した際の出力に関する動作テスト。

※wp-captionのタグにあるwidthのスタイルは、WordPressが自動的に計算して出力します。

また、Wordpressを使わない場合、以下のように記述することが可能です。

<div class="caption aligncenter">
	<img alt="" src="250x40.png" class="caption-img" />
	<p class="caption-text">キャプションのコンテナに"caption"を、画像には"caption-img"を、テキストには"caption-text"を付与します。</p>
</div>

キャプションのコンテナに"caption"を、画像には"caption-img"を、テキストには"caption-text"を付与します。

また、複数の画像をdivで囲み、それに"caption-img"を適用すると、その複数の画像をまたいでキャプションのテキストを表示することができます。

<div class="caption aligncenter">
	<div  class="caption-img">
	  <img alt="" src="250x40.png" style="margin-right:5px;" /><img alt="" src="250x40.png" />
	</div>
	<p class="caption-text">2つの画像を"caption-img"を持つdivで囲んでいます。画像間の隙間は、個別にスタイルを指定して設定する必要があります。</p>
</div>

2つの画像を"caption-img"を持つdivで囲んでいます。画像間の隙間は、個別にスタイルを指定して設定する必要があります。

※iOSのブラウザの場合、画像間に半角スペースや改行が入っていると正しく表示されません（iOSのバグと思われます）。画像間の隙間はスタイルで指定してください。