発行
z-index再入門の最終回では、実際の業務で出くわす可能性のある困ったz-indexの実装が引き起こす問題を紹介し、実際の実装のヒントとして、その解決法をいくつか提案します。
コード化されたSVGデータをどのようにHTMLと組み合わせ、どんなことができるのか、サンプルとともに解説します。SVGの特徴を知って、UIなどの実装に役立てるヒントが満載です。
シリーズ最終回では、SMACSSのモジュール、状態、テーマの3つのルールを解説するとともに、これまで解説したOOCSS、BEMとの関連性も考えます。日頃の業務に取り入れるヒントになるでしょう。
発行
z-indexプロパティ、positionプロパティ、スタック文脈とスタックレベルを用いて、意図しない重なりが起こる原因を解説します。またスタック文脈を生成するz-index以外のプロパティにも触れます。
Illustratorでピクセルの端数がでないように作成した元データを、SVGに書き出す過程を解説します。書き出しの設定、注意点のほか、書き出し後の処理ツールなども紹介します。
HTMLとCSSの設計思想のひとつSMACSSについて解説します。SMACSSはCSSのルールを5つに分けて考えます。今回はそのうち、ベースルールと、レイアウトルールの解説を行います。
発行
z-indexは要素の重なりを指定するプロパティですが、その仕組みを正確に押さえておかないと、思い通りの重なり順になりません。まずはz-indexの仕様も含め、z-index使用に必須項目を解説します。
Web媒体で使用するSVGデータの作成方法をAdobe Illustrator CCでのデータ作成、SVG書き出しを例に紹介します。まずは元データ作成時の環境設定、作成時の注意点などを解説します。
BEMを用いたHTMLテンプレート設計を、少し複雑なサンプルを元に解説します。また、OOCSSやBEMを比較し、それぞれの方法論をどのように取り入れていくか考察します。
発行
displayプロパティのtable関連値の実装応用例をさらに紹介します。一方、このプロパティを使う際に注意しなければならないことを、仕様書を参照しつつ押さえます。
この記事ではまずSVGのコードとしての基本と、さまざまな実装方法を概観してみましょう。それぞれの特徴を捉えられると、実装方法の選択が適切にできます。
前回解説したBEMの概念を使って、具体的にどのようにHTMLとCSSのコードに落とし込んでいくのか解説します。BEM独特のクラス属性値の書き方についても触れています。