[Twitter Bootstrap](http://twitter.github.io/bootstrap/)や[HTML KickStart](http://www.99lime.com/)、[Blueprint](http://www.blueprintcss.org/)等、CSS Frameworkの一つの[Foundation 4](http://foundation.zurb.com/)を使ってWordPressのテーマを変えてみました。

本当はYUIの[Pure](http://purecss.io/)を使ってみようかと思っていたんですが、フォントの指定によって段落ちすることがある、という不具合が起きてしまったのでFoundation 4を使ってみました。


## 特徴

レスポンシブウェブデザイン対応のための仕組みが多数組み込まれており、基本的な事はFoundation 4の仕様で実装することが出来ます。

例えば、特定の幅より小さいウィンドウサイズの時の表示・非表示、グリッドのサイズ変更、メニューの格納・タップで表示等、便利な機能が多数含まれています。


## 使い方

Foundation 4は、「normalize.css」と「foundation.css」を読み込みます。

```html
<link rel="stylesheet" href="path/to/normalize.css" />
<link rel="stylesheet" href="path/to/foundation.css" />
```

また、SCSSに最適化されており、SCSSで記述する場合は、importするだけで利用することが出来ます。

```css
@import "path/to/foundation";
```

その他「components/_variables.scss」を編集することで、様々なスタイルの調整を行えます。


## 基本機能

ほんの少しだけ基本機能をメモしておきます。

### グリッド

レスポンシブレイアウトに対応するため少し特殊な記述方法になってます。

```html
<div class="row">
    <div class="small-2 large-2 columns">...</div>
    <div class="small-4 large-4 columns">...</div>
    <div class="small-6 large-6 columns">...</div>
</div>
```

その他のCSSフレームワークと同様に、グリッドの要素数は12個になっているようです。親に「row」、子に「columns」とクラスを指定し、「small-*」「large-*」にてグリッド数を指定します。

「small-*」「large-*」は、ウィンドウサイズが大きいか、小さいか、という判断となります。

```html
<div class="row">
    <div class="small-4 large-6 columns">...</div>
    <div class="small-8 large-6 columns">...</div>
</div>
```

そのため、上記のように記入すると、ウィンドウサイズが大きい時は当分割されますが、小さくすると右側の要素が大きくなります。

### ブロックグリッド

グリッドとは別に、ブロックグリッドという指定が可能です。

コチラの機能は、ウィンドウ幅が大きい時は横並びに沢山並べてもいいけど、小さくなった時は減らしたい、という時に使います。

```html
<ul class="small-block-grid-2 large-block-grid-4">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
```

こんな感じに、親の要素に「`small-block-grid-*`」「`large-block-grid-*`」と記述すると、*の数分に当分で並びます。  
 上記の例で言うと、ウィンドウサイズが大きい時は4つ、小さい時は2つ横並びで表示されます。

### ウィンドウサイズによって表示・非表示

ウィンドウサイズによって、表示・非表示の制御を行うことが出来ます。

例えば、下記のように記述すると、

```html
<div class="hide-for-small">...</div>
<div class="show-for-small">...</div>
```

「hide-for-small」ではウィンドウサイズが小さい時にだけ非表示になり、「show-for-small」ではウィンドウサイズが小さい時にだけ表示されるようになります。

ちなみに、各サイズに対して「`hide-for-*`」「`show-for-*`」が用意されているようで、[こちらのページから確認](http://foundation.zurb.com/docs/components/visibility.html)することが出来ます。

### グローバルナビ

最後に、ウィンドウサイズによってメニューが格納されるグローバルナビについて。

まずはHTML側をこんな感じに用意します。

```html
<header class="top-bar">
    <ul class="title-area">
        <li class="name"><h1><a href="/">SiteName</a></h1></li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>
    <section class="top-bar-section">
        <ul class="right">
            <li><a href="#">MENU01</a></li>
            <li><a href="#">MENU02</a></li>
            <li><a href="#">MENU03</a></li>
            <li><a href="#">MENU04</a></li>
            <li><a href="#">MENU05</a></li>
            <li><a href="#">MENU06</a></li>
            <li class="has-form">
                <form action="#" action="get">
                    <input type="text" name="text">
                </form>
            </li>
        </ul>
    </section>
</header>
```

「toggle-topbar」がメニュー開閉のリンク、開閉の対象が「top-bar-section」です。たぶん。

また、メニューの開閉を行うためにはJavaScriptの用意が必要です。

まずは「modernizr」。ブラウザの処理の差異を軽減するライブラリですね。別に他のJSを利用しなくても呼んじゃっても良いような気がします。  
 また、「modernizr」はheadタグ内に記述したほうが良いそうです。

```html
<script src="/js/vendor/custom.modernizr.js"></script>
```

次に、「Zepto」か「jQuery」を読み込みます。「Zepto」の方が軽量なのですが、モダンブラウザしか対応していません。  
[Foundationのサイトにどちらを読むか判別スクリプトが紹介](http://foundation.zurb.com/docs/javascript.html)されていたので、それを使っちゃいました。

```html

<script>
  document.write('<script src=/js/vendor/'
    + ('__proto__' in {} ? 'zepto' : 'jquery')
    + '.js><\/script>');
</script>
```

そして、Foundationの大本のライブラリを読み込みます。今回のグローバルナビのライブラリだけでなく、他のライブラリを利用する際にも必要となります。

```html
<script src="/js/foundation.min.js"></script>
```

そして最後にメニューの開閉用のライブラリを読み込みます。「foundation.topbar.js」という名前のファイルですね。

```html
<script src="/js/foundation.topbar.js"></script>
```

これでウィンドウが小さくなると、MENU01〜MENU06とインプットテキストが収納されます。


## 雑感

今回このテーマでは複雑なレイアウトや処理を行なっていないので、正直どのフレームワークでも簡単に用意できたと思いますが、ウィンドウサイズによって文字サイズが自動的に調整したりと、至れり尽くせりな機能が充実していたように感じます。

またPureもバージョンが上がった頃を見計らって試してみたいのと、Twitter Bootstrapもフラットなデザインに成っていたり一度試した頃に比べて色々と追加されているようなので気になっています。

最終的にはサイトに合ったCSSを用意したほうが効率的なレスポンスを提供できるのですが、効率的な制作を求める際には「知っておく」事は重要な気がしますね。

Foundation 4を使ってテーマを作ってみた


HTML/CSSのコーディングを効率化する「Zen-Coding」が次期バージョンで大幅に仕様を変更し「Emmet」と名称を変更するようなので、現在公開中のベータバージョンを試してみました。


## Sublime Text 2にインストール

Sublime Text 2（以下ST2）向けのEmmetはGitHunにて公開されていますので、レポジトリを追加してインストールすることが出来ます。  
 具体的な手順は下記の通り。

1. コマンドパレット（Win:Ctrl+Shift+p、Mac:Command+Shift+p）から「Package Control: Add Repository」を選択
2. 「https://github.com/sergeche/emmet-sublime」を入力
3. コマンドパレットの今度は「Package Control: Install Package」を選択
4. 「emmet-sublime」が追加されているので選択
5. ST2を再起動


## Zen-Codingとの違い

基本の使い方はZen-Codingと変わりませんが、階層構造に対しての考え方に変更が加えられました。

Zen-Codingで複数階層を混ぜたコーディングを行う場合、「()」を駆使する必要がありましたが、Emmetでは「^」で「一階層上に戻る」という機能が設けられました。地味ですがかなり嬉しい機能です。

例えば、下記のようなコーディングを行いたい場合、

```html
<div id="head">
	<p id="siteName"></p>
</div>
<div id="main">
</div>
```

Zen-Codingでは、「()」を使う必要があるので、最初に書き忘れてしまうとカーソルを戻さないといけません。

```html
(div#head>#siteName)+div#main
```

Emmetでは、「^」を記述すれば一階層上に戻れるので、そのまま書き続けることが出来ます。

```html
div#head>#siteName^div#main
```


## その他変更点

CSSの記述方法にも変更点があるそうなのですが、CSSはあんまり使っていなかったので違いに関しては良く分かりませんでした。

こちらのページで詳しい説明がありましたので、ご紹介しておきます。  
 » [Zen-Codingの次期バージョン、Emmet について｜Web Design KOJIKA17](http://kojika17.com/2012/09/zen-coding-next-emmet.html)

こちらの紹介記事を見る限りCSSでもかなり効率化できそうですね･･･。勉強してきます。


## 注意点

現状ですが、まだ開発版ということもあり、不具合が発生してしまう恐れがあります。  
 自分の場合は、日本語変換確定のエンターキーを押すと、入力していた文字列が消える、という現象が起きました。

これがEmmetが原因なのか、他のプラグインとの衝突が原因なのかの検証は行っていませんが、バックアップを取った状態でインストールすることをオススメします。


## 参考

- [Zen-Codingの次期バージョン、Emmet について｜Web Design KOJIKA17](http://kojika17.com/2012/09/zen-coding-next-emmet.html)
- [Sublime Text 2をMacで使う | Kitchen Garden Blog – I'll cook and hack new one.](http://blog.hifumi.info/mac/sublime-text-2-for-mac/#emmet)
- [CSSの記述を高速化する、Emmet (Zen-Coding)｜Web Design KOJIKA17](http://kojika17.com/2012/10/css-speedstar-for-emmet.html)

次世代Zen-coding「Emmet」をSublime Text 2で試してみた


前々から「[LESS](http://lesscss.org/)」という名前や、何となくどんなことが出来るのかについてはある程度知っていたのですが、環境を構築するのが面倒で触っていませんでした。

そんな中ちょっと、LESSのビルド環境を構築することがあったので、ついでに調べて使ってみる事にしました。


## LESSについて

LESSとは、CSSの拡張メタ言語で、簡単に説明するとCSSでこんなことがしたい…！という機能を加えた独自の言語です。

こういった拡張メタ言語については、同じCSSには「[SCSS(Sass)](http://sass-lang.com/)」や、HTMLの「[Haml](http://haml.info/)」という言語が存在します。

また、LESSのコンパイル？はJavaScriptで実行するので、Node.jsを使ってサーバサイドで行うだけではなく、JavaScriptを読み込んでクライアントサイドで行ったり出来るのも強みですね。

LESSとSCSS(Sass)では記述が若干違うのですが、今回はLESSに焦点を当ててメモを残していきます。


## LESSの記法

### 変数

LESSでは変数を利用することで、一度書いたパラメータを複数の要素に与えたり、数値計算によって変化を持たせることが可能です。

```css
@green: #00AA00;
@light-green: @green + #555;

.greenBox {
	background: @green;
}
.lightGreenBox {
	background: @light-green;
}
```

上の様に記述すると、CSSでは下記の様に出力されます。

```css
.greenBox {
	background:#0a0;
}
.lightGreenBox {
	background:#5f5;
}
```

計算できるのは魅力的ですね。  
 ちょっとサイズを変えたいだけなのに、色々な要素のサイズを調整しないといけない、という組み方になった場合に重宝しそうです。

また、下記のように変数名を変数で取得することも出来るみたいです。

```css
@foo: "bar";
@baz: "foo";

.hoge {
	content: @@baz;
}
```

CSSに変換すると･･･。

```css
.hoge {
	content: "bar";
}
```

### ミックスイン

ミックスインとか言われると、オブジェクト指向言語を触っていないのでパッとしませんが、よく使う内容を予め用意しておく、と言うような感じでしょうか。違っていたらゴメンナサイ･･･。

使い方と使い道に関しては以下のような感じです。

```css
.borderRadius {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#main {
	width: 700px;
	float: right;
	.borderRadius;
}
#side {
	width: 200px;
	float: left;
	.borderRadius;
}
```

CSSに変換すると･･･。

```css
#main {
	width: 700px;
	float: right;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#side {
	width: 200px;
	float: left;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
```

と言う具合に、毎回ベンダプレフィックスを書くのが面倒、と言う時に使えたりします。  
 上の例で言うと正直クラスを用意して当て込んだ方が分かりやすいと思いますが、ミックスインの利点として「引数」を与えることが出来ることが挙げられます。

### ミックスイン（引数）

例えば先程の例で、「#main」の時は10pxの角丸にしたい場合･･･。

```css
.borderRadius (@radius) {
	border-radius: @radius;
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
}

#main {
	width: 700px;
	float: right;
	.borderRadius(10px);
}
#side {
	width: 200px;
	float: left;
	.borderRadius(5px);
}
```

CSSに変換すると･･･。

```css
#main {
	width: 700px;
	float: right;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
#side {
	width: 200px;
	float: left;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
```

と言う感じに、値を渡すだけで書き分けてくれます。  
 また、引数に初期値を渡すことが出来ます。

```css
.borderRadius (@radius: 5px) {
	border-radius: @radius;
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
}

#main {
	width: 700px;
	float: right;
	.borderRadius(10px);
}
#side {
	width: 200px;
	float: left;
	.borderRadius;
}
```

CSSにすると、前例と同じ内容が出力されます。

### その他

他にも引数の値によって振り分けることが出来たり、関数が色々と用意されていたり、ネストしてグループ化したり出来るようなのですが、今回は触りだけ･･･。  
 またちょこちょこ触ってみるようにします。

[公式のドキュメント](http://less-ja.studiomohawk.com/#docs)でそのあたりについても紹介されています。


## 参考

- [LESS « The Dynamic Stylesheet language](http://lesscss.org/)
- [LESS – The Dynamic Stylesheet language（日本語）](http://less-ja.studiomohawk.com/)
- [CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 – (DxD)∞](http://dxd8.com/archives/217/)

CSSの拡張メタ言語「LESS」についてちょっと調べてみた


折角ブログの見た目を変更したので、RSSもいじってみようと思い、CSSでのデザイン変更を行ってみました。

CSSを書いて、読み込ませるだけ･･･ではあったのですが、RSS用のテンプレートの適用方法が若干特殊だったので残しておきます。


## RSSのテンプレートを変更する

WordPressにはRSS用のテンプレートは用意されていないため、ソースファイルを触るしかないのかな？なんて思っていましたが、アップデートする度に元に戻ってしまうのがイヤなので、調べてみるとこんな方法で[各種フィード用のテンプレートを実現できる](http://dogmap.jp/2009/04/30/switching-feed-template/)ようです。

上記記事は”functions.php”を書き換える方法ですが、[プラグインも作成されている](http://dogmap.jp/2011/06/28/feed-template-customize/)ようなので、そちらを使ってみても良いかもしれません。


## RSSにCSSを読み込ませる

RSSのテンプレートが作成できるようになったら、CSSを読み込ませるように書き換えます。

HTMLとは少しだけ記述が違い、こんな感じになります。

```xml
<?xml-stylesheet href="rss.css" type="text/css" media="screen"?>
```

WordPressのテーマ用に書くとこんな感じでしょうか。

```php
<?php echo '<?xml-stylesheet href="'.get_bloginfo("template_directory").'/rss.css" type="text/css" media="screen"?>'; ?>
```


## RSS向けのCSSを書く

最後にRSS向けのCSSを書きます。

HTMLと同様にXMLが基礎となっているので、階層で指定してやれば問題ありませんが、全てインライン要素扱いになっているので、必要なものには`display:block`を指定すると良さそうです。

また、通常のHTMLでは存在しない、`<dc:creator>`のようなタグは、セミコロンの後ろ、今回で言う所の`creator`として認識されるようです。


## 他の方法

他にXSLTを利用すると、XML内のデータをHTMLに変換することが出来るので、もっと自由にレイアウトや、リンクを貼ったりすることも出来るので、面白そうですね。

またこちらの方法も試してみたいと思います。


## 参考

- [各種フィード用テンプレートの変更 : dogmap.jp](http://dogmap.jp/2009/04/30/switching-feed-template/)
- [Feed Template Customize : dogmap.jp](http://dogmap.jp/2011/06/28/feed-template-customize/)
- [RSSにもCSSを ～CSSテクニック～](http://www.stylish-style.com/csstec/hi-level/rsscss.html)
- [RSS を XSLT で html に変換して見栄え良く表示する](http://sonic64.com/2005-03-16.html)

WordPressのRSSの見た目をCSSで変更してみる


ある案件で、divタグにoverflow:autoを指定し、スクロールバーを表示される様な指定をしていたのですが、iPadで確認を取った時に、スクロールバーが表示されていない事を教えてもらい、iPhoneでも同様の状態になっている事に気づきました。

また、通常のスクロールのようになぞってもスクロールされず、中のコンテンツを確認することが出来ませんでした。

何か方法でもあるのかと調べてみたところ、「[メモ: iPad（iPhone）の困った仕様](http://hcondo2000.blogspot.com/2010/06/ipadiphone.html)」で、「二本指」でなぞることでスクロールする事が分かりました。

説明書が無い、また、二本指でのスクロールはあまり使わないことから、中々気づきにくい操作であるような気がするので、iPhone向けのコンテンツなら尚更、ページ内に説明文が必要な感じを受けました。

「直感的」な操作であるタッチパネルであっても、今回であればページ内の一部のコンテンツをスクロールさせるような、複雑な操作についてはどうしても特殊な操作が必要になりますね。

他のスマートフォンではどうなんでしょう？もうちょっと調べる必要がありそうです。

## 追記 2011年10月12日

地味に見られていて、解決策も投じてなかったので少し追記をしておきます。

### Androidの動作について

Andoroidは`overflow:auto;`に対応していないようで、二本指でスクロールしても動かないようです。  
[http://code.google.com/p/android/issues/detail?id=2118](http://code.google.com/p/android/issues/detail?id=2118)

### JavaScriptを使った対策

やはり二本指で操作をさせるのは、感覚的にも操作的にも分かり辛い事を考慮するとCSSのみでの対応は厳しいようで、既にJavaScriptのライブラリが公開されていました。  
その中で目に留まった二つを試しに使ってみました。

<dl><dt>[Skroll.js](http://5509.me/log/skroll)</dt><dd>方向は縦方向のみ対応しており、フリックでスクロールバーが表示されます。  
 注意書きにも記載されていますが、非力なスマホだと動作に不安定な箇所が出る可能性があるようです。</dd><dt>[jQuery.flickable](http://lagoscript.org/jquery/flickable)</dt><dd>縦横に対応していますが、スクロールバーはありません。  
 また、現バージョン（1.0b3）では、jQuery1.6.xに対応していないようです。</dd></dl>[デモはこちら](http://demo.sus-happy.net/sp/overflow/horizontal.html)

どちらにも一長一短があり甲乙付けがたいですが、長所が分かりやすいので場面場面で使い分けていくと良さそうな感じを受けました。

## さらに追記 2011年11月01日

どうもiOS5より、iPhone Safariで一本指でスクロールが出来るようになったみたいです。

参考：[iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】 – くらげだらけ（くだくらげのBLOG）](http://d.hatena.ne.jp/kudakurage/20111025/1319475131)

また、「`-webkit-overflow-scrolling:touch;`」を指定すると、CSSだけで惰性スクロールが実装できるみたいで、「iPhoneだけ」ならJavaScriptを実装しなくても良さそうですね。

~~デモも用意してみた~~ ので、試してみてください。


iPhone、iPadでのoverflow:scroll/autoの動作について


ページ内リンクなどで使われるアンカーポイントですが、特に指定をしないとウィンドウの上端に移動します。

ただ、ウィンドウの上端だと少し読みづらかったり、見つけづらかったりするので、少し余白を空けたいことがあります。

アンカーポイントの下に余白を空ける方法もあると思いますが、コーディングを済ませた後にアンカーポイントだけ挿入したい時に少し手間になってしまいます。

そこで、以下のようなCSSを適用させてみました。

```css
.hideAnchor {
	display:block;
	height:0px;
	/height:1px;
	overflow:hidden;
	text-indent:-9999px;
	margin-top:-10px;
	padding-bottom:10px;
}
```

上の記述でデザインはそのままに、通常挿入する位置の10px上の位置にアンカーポイントを挿入することが出来ます。

`height:0;`や`overflow:hidden;`、`text-indent:-9999px;`でテキストを隠しているのでSEO的にどうなんだろう？

HTMLのアンカーポイントの位置を上にずらしてみた



前の記事を書いた後、他のブラウザで見ていたら、Firefoxでも崩れていました。

さすがにFirefoxで崩れてしまうのはまずいので、色々調べていると、HTML5の新要素に対して、「disiplay:block;」をかけると以前の記述とほぼ同等でかけることが分かりました。

また、HTML5用のreset.cssを発見したので適用してみました。

[HTML5 Reset Stylesheet | HTML5 Doctor](http://html5doctor.com/html-5-reset-stylesheet/)

Firefoxでも崩れてなくてバッチリ。だけど、残念ながらIE6は直りませんでした。

進行状況

- HTML5 Reset Stylesheetの適用




HTML5 Reset Stylesheetを適用


コーディングを進めていくにあたって、コンテンツ領域からはみ出ているデザインや、一部分だけ余白を取らないようなレイアウトの時に、ネガティブマージンを利用しています。

IE6での崩れも少なく（多少解釈が違う箇所もあります）、色々なところで使えるので、備忘録のためにもどのような場面で利用したのか控えておこうと思います。


## 見出し部分だけ左右の余白がないレイアウト

見出し部分だけ左右の余白がなく背景が敷いてあるようなレイアウトの際に、いちいち見出しの時だけ余白のスタイルのdivから外す方法もあると思いますが、ネガティブマージンを用いればその必要も無くなります。

### 見出しの時だけdivから外す方法

```html
<h2>見出し2</h2>
<div class="inner">
	<p>本文本文本文本文本文</p>
</div>
<h2>見出し2</h2>
<div class="inner">
	<p>本文本文本文本文本文</p>
</div>
```

```css
h2 {
	margin:15px 0;
}
.inner {
	padding:0 15px;
}
```

### 見出しにネガティブマージンを指定する方法

```html
<div class="inner">
	<h2>見出し2</h2>
	<p>本文本文本文本文本文</p>
	<h2>見出し2</h2>
	<p>本文本文本文本文本文</p>
</div>
```

```css
h2 {
	margin:15px -15px;
}
.inner {
	padding:0 15px;
}
```

ある意味見出しと本文が同じ階層になってしまうので、分かり辛いと言えばそうかもしれませんが、記述自体は減っていると思います。


## ※マーク等の時に2行目以降にスペースを空ける

[少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス](http://www.webcreatorbox.com/tech/css-tips20/)でも取り上げられてる方法で、こちらもネガティブマージン…では無いですが、マイナスの値を与えることで実現可能です。

設定していなくても読む文には困りませんが、こうした小さな気遣いが後々重要になってくると思っています。

```css
p {
	padding-left: 1em;
	text-indent: -1em;
}
```


## SEOを考慮した3カラムレイアウト

SEOを考慮すると、なるべくコンテンツエリアを始めに持ってきたほうが良いと言われていますが、3カラムレイアウトの時にはfloatの調整だけではコンテンツエリアを上に持ってくることが出来ません。

そこで、ネガティブマージンを利用することでHTMLの記述を、コンテンツエリア＞左メニュー＞右メニューの順に並べることが可能となります。

```html
<div id="wrap">
	<div id="cont">
		<p>コンテンツエリア</p>
	</div>
	<div id="lMenu" class="side">
		<p>左メニュー</p>
	</div>
	<div id="rMenu" class="side">
		<p>右メニュー</p>
	</div>
</div>
```

```css
#wrap {
	width:800px;
	margin:0 auto;
}
#cont {
	float:left;
	display:inline;
	width:400px;
	margin-left:200px;
}
.side {
	float:left;
	width:200px;
}
#lMenu {
	display:inline;
	margin-left:-600px;
}
```

CSSネガティブマージンのすすめ

英語の記事なので、具体的にどんな内容が書かれているか理解できていませんが、[オブジェクト指向CSS（Object Oriented CSS: OOCSS）について書かれた記事](http://www.sitepoint.com/blogs/2009/06/16/first-look-object-oriented-css/)を読んで、CSSの記述方法について、もしかしたらOOCSSとは違う考えなのかもしれませんが、少し考えてみました。

これまで、スタイルを付与したい箇所にid/classを指定し、それぞれに固有のスタイルを当てはめていましたが、

- Web上の表現として良く利用するスタイル
- そのサイト内でよく利用するスタイル
- そのページ内でよく利用するスタイル
- 指定の箇所でしか利用しないスタイル

に分けられるのでは無いかと考え、それらについて定義したスタイルを「使い回す」だけでコーディングを行って、効率が良いのか試しています。

具体的にどのような記述を行っているかは以下の通り。


## Web上の表現として良く利用するスタイル

ここは、どこまで含まれるのか模索中ですが、今のところ以下のようなスタイルをすべてのページで読み込むようにしています。

```css
/* リンク */
a {
	text-decoration:underline;
}
a:hover {
	text-decoration:none;
}
a.mr,
.mr a {
	text-decoration:none;
}
a.mr:hover,
.mr a:hover {
	text-decoration:underline;
}

/* 配置 */
.left {
	text-align:left !important;
}
.right {
	text-align:right !important;
}
.center {
	text-align:center !important;
}

.fleft {
	float:left;
}
.fright {
	float:right;
}
```

どのようなサイトでも使われている、リンク装飾、文字配置についてを指定して、サイトによってはリンク色などより詳細な値を上書きしています。


## そのサイト内でよく利用するスタイル

サイトによって余白のとり方などに特徴があり、数値が同じ箇所については、ここで指定しすべてのページで読み込むことで「使い回す」事が可能です。

例えば、以下のようなスタイルを用意しておきます。

```css
.topMg {
	margin-top:-20px;
}
.btmMg {
	margin-bottom:40px;
}
```

上記二つのスタイルで、

1. 指定要素の上に20px余白
2. 指定要素の下に20px余白
3. 指定要素の上に40px余白
4. 指定要素の下に20px余白

の4通りを作り出すことが可能です。

```html
<div id="preview">
	
	<p class="btmMg">一つ前の要素</p>
	<p class="topMg">指定要素</p>

	
	<p class="topMg">指定要素</p>
	<p class="btmMg">一つ後の要素</p>

	
	<p class="btmMg">一つ前の要素</p>
	<p>指定要素</p>

	
	<p class="btmMg">指定要素</p>
	<p>一つ後の要素</p>
</div>
```

上記の考えで、同様に「そのページ内でよく利用するスタイル」も定義を行い、最後に固有のスタイルを付与していきます。

ある程度のレイアウトでしたら、固有のスタイルを定義することなくHTMLを編集するだけで可能なので、効率が上がるのでは無いかと考えていますが…

明確な答えが出てきたらまた書くことにします。

CSS