覚えておくことで、いつまでも長く利用することができるデザインの基礎テクニックを、これまで当サイトで紹介したエントリー中から、各ポイントごとにまとめました。効果的な配色カラーパレットの選び方や、読み手の興味を惹くフォントの組み合わせ方、デザインコンセプトをうまく伝える秘訣やポイントなど、実践的に活用できるテクニックを中心に揃えています。
覚えておくことで、いつまでも長く利用することができるデザインの基礎テクニックを、これまで当サイトで紹介したエントリー中から、各ポイントごとにまとめました。効果的な配色カラーパレットの選び方や、読み手の興味を惹くフォントの組み合わせ方、デザインコンセプトをうまく伝える秘訣やポイントなど、実践的に活用できるテクニックを中心に揃えています。
BEM Advent Calendar 2013の10日目の記事です。 ちょっとBEMツールのことは1日お休み。明日やろう明日。 BEMツールの Full stack quick startをやってた軌跡は以下です。 サンプルプロジェクトを使ってみる:BEMツールに触れてみる(1)ブロックライブラリを使ってみる:BEMツールに触れてみる(2)ブロックを作ってみる:BEMツールに触れてみる(3)ということで、今回はBEMで命名する時に役立ちそうな単語を書き出して見ようと思います。 役立ちそうな単語一覧あくまで名付けるときの参考になったらいいな、程度で書いてます。 ※…..で頭合わせしてるのはinuit.cssがやってたからっていうそれだけ。 色々組み合わせて使いそうなものhero とかお洒落っぽいので使う。大きさ順序は hero > main > sub くらいのイメージ。 hero....
OOCSSとは、構造とスキンを分離してクラス定義し、それらを組み合わせてスタイルを定義する方法である。 OOCSSの考え方に基づいてスタイルシートを記述すると、パフォーマンスと再利用性、メンテナンス性の向上が見込めます。 しかし、OOCSSを上手に設計するのはけっこう難しいのです。なんとなくそれっぽく書いただけでは、OOCSSの導入を成功に導くことはできません。 TwitterBootstrapに代表されるCSSフレームワークなどは、高度に設計されたOOCSSと言えます。そのレベルまで完成度を高めようとするなら、そうとう高度な設計技術が求められます。 初心者が陥りやすいダメな例 > OOCSS? .red { color: red; } .blue { color: blue; } 一見「どんなサイトでも再利用できそうな汎用性のあるクラス定義で、CSSのプロパティを見なくてもマークアップで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く