安田 学
- `attention ` - 注意
Small Blockなどを 1. Content（見出しやリスト、ボタンやアイコンなどのページの内容を表現する小さなオブジェクトです。） 2. Medium Container（Contentを内包するオブジェクトで、Contentのスタイルを上書きすることができます。） 3. Large Container（ContentやMedium Containerを内包するオブジェクトで、内包するオブジェクトに干渉することはできません。） のようにする。 これはOOCSSのコンテナとコンテンツの分離をベースにしている。
## 構造と見た目を分離する（Separate Structure and Skin） OOCSSの重要な原則のもうひとつが「構造と見た目の分離」です。 ### 構造とは何か？ 例えばボタンコンポーネントを3つ作ったとします。 ``` css .button-success { display: inline-block; padding: 0.75em; line-height: 1; text-align: center; text-decoration: none; color: #fff; background-color: blue; } .button-warning {...
## コンテナとコンテンツを分離する（Separate Container and Content） レゴのように再利用できるコンポーネントライブラリでページを作成するのがOOCSSの手法です。そのための重要な原則のひとつが「コンテナとコンテンツの分離」です。 コンテンツはテキストや画像、リストなどの小さなコンポーネントでコンテナはコンテンツを包むためのコンポーネントと言えます。 ### コンテナとは何か？ 例えばこのようなHTMLを見たことはありませんか？ ``` html .col-md-8 .col-md-4 ``` これは[Bootstrap](http://getbootstrap.com/css/#grid)のグリッドレイアウトです。これらはコンテンツ（テキストや画像など）を入れるため機能だけを持っています。コンテンツに何が入るのかコンテナは知りませんが、それでも問題なく機能します。つまり、コンテナはどんな場所でも使えることになります。 OOCSSではグリッドで横幅をコントロールすることを推奨しています。逆に高さはコンテンツに依存するためコントロールするべきではないとしています。この場合の高さのコントロールとは`height`を手動で書いてしまうことを指しています。例えば`table`や`flex`プロパティのような高さの揃うCSSやJavaScriptで高さを揃える処理は当てはまりません。 ### コンテンツとは何か？ コンテンツはページの内容のことです。コンテンツは以下のようなコンポーネントで表現されます。 - 見出し（見出しレベルに関わらず、同じ見た目にできる） - リスト（デフォルトのリスト、クリックを促す、アイコン付き） - ヘッダーとフッター - ボタン - mediaオブジェクト（画像とテキストが横並びになっている）...
## OOCSSとは何か？ OOCSSは[Nicole Sullivan](https://github.com/stubbornella)が提唱したCSSの設計手法のひとつです。 OOCSSは「Object Oriented CSS」の略でオブジェクト指向のCSSという意味です。オブジェクト指向はプログラミングの手法のひとつで、CSSにおけるオブジェクト指向は機能ごとにクラスを作って、それを組み合わせることでページを作成していく方法です。 - stubbornella/oocss: Object Oriented CSS Framework - stubbornella/oocss-accessibility-guidelines: The accessibility guidelines used by the OOCSS open source project > CSSは壊れやすい。始めることは簡単だけれど。 > ファイルサイズは確実に増えていきます。なぜなら、コードの再利用はほとんどされないからです（自分が書いていないコードは信じられないです）。 >...
## コンポーネントに拡張性を持たせる コンポーネントは2つの原則に限らず、機能ごとに拡張できるようにします。OOCSSではmediaオブジェクトが例として示されます。 mediaオブジェクトは以下のようにマークアップされ、画像とテキストが横並びになるレイアウトのことを言います。頻繁に利用されるレイアウトで、TwitterやFacebookのタイムライン、コメント欄や関連記事のようなコンポーネントにも使われることが多いです。 ``` html ``` CSSは以下のようになります。 ``` css .media { display: block; } .media:after { content: ""; display: block; clear: both; } .media-image { float: left; margin-right: 1em;...
アイコンフォント用のSVGは500×500pxのようなアートボード単位で書き出します。 1. [アートボード]ツールを選択する shift + O 2. [新規アートボード]メニューからアートボードを作成する 3. [アートボードオプション]で[幅]と[高さ]を500pxなどにする 4. [基準点が]左上になっているのを確認する 5. [アートボード]パネルで[アートボードを複製]を選択して複製する 6. 任意の個数のアートボードを作成したら[アートボード]パネルの[アートボードを再配置]を選択、[レイアウト]を[横に配列]、[配列数]を[5]など、[オブジェクトの一緒に移動]にチェックを入れた状態で[OK]をクリックする 7. アイコンを作成してグループ化をしたら、オブジェクトをクリックしてメニューから[アートボードに整列]を選択、[整列]パネル（shift + F7）の[オブジェクトの整列]で上下左右の中央に配置する 8. command + option + Eで[画面に書き出し]を表示 9. [アートボード]を選択して、アートボードの名前を書き出したいファイル名に変更する 10. サムネイルをクリックして書き出すアートボードを選択...
- [アートボード]ツールを選択 shift + O - ドラッグで新規アートボードを作成 - アートボードパネルでアートボードと、オブジェクトを選択 - [オブジェクト][アートボード][オブジェクト全体に合わせる]でアートボードのサイズをオブジェクトに合わせる
HTML内に``要素で記述するインラインSVGはSVGの機能のすべてを使うことができます。ただし、HTMLファイル内にSVGコードを貼る必要がありファイルサイズを増やしてしまうので、``要素や`background-image`プロパティ、アイコンフォントで指定するのが適切でない場合に使うようにします。 ### 不要なコードの削除 インラインSVGとして使う場合に不要なコードが書き出されます。随時削除（省略）するか、Gulpなどのツールで自動的に削除できるようにしておきます。 - `
SVGのアイコンの数が多い、色を変更する必要がある、複数箇所で指定する場合はアイコンフォントとして使います。 ### アイコンフォントの生成 Gulpなどで自動でアイコンフォントを生成する環境を作るのが理想的です。 - [gulp-iconfont](https://www.npmjs.com/package/gulp-iconfont) - [gulp-iconfont-css](https://www.npmjs.com/package/gulp-iconfont-css) Gulpを使わない場合は以下のようなツールを使って管理します。 - [icoMoon](https://icomoon.io/) - [Font Awesome](http://fontawesome.io/) ### マークアップ マークアップ時の注意点として、アイコンフォントを擬似要素で表示させる場合にスクリーンリーダーが`content`内の意味のない単語を読み上げてしまう問題があります。WAI-ARIAを使用して以下のような対応をします。 - `aria-hidden="true"`を指定して読み上げを防止します - アイコンとテキストをセットにして、アイコンが表示できない場合でも意味が伝わるようにします - テキストを非表示したうえで読み上げはできる`.sr-only`のようなクラスを使用します - `aria-label=""`で読み上げさせるテキストを記述します ``` html ホーム ホーム ```...