CSSプロパティの継承：inherit

最近のスマホサイトとかコーディングしてると上記のようなリストビューのコンポーネントをよくマークアップする。リストのひとつの項目全体がタップエリアで遷移したりアクションしたりする。

これをコーディングするとなると、ul > li > aでaをBlock要素にすると思う。そのとき、上記の普通のテキスト文もリンクテキストになってしまって、いわゆる青色の下線テキストリンクのようなスタイルになってしまう。

body { color: black; }
a { color: blue; }

下線付きとは言わなくても、たいていリセットの段階で基本的なリンク色を設定してると思う。

ul li { color: gray; }

それじゃ問題だから、ul > liにグレーの文字色を定義したりする。『あれ？青色のままじゃん？あ、そうだaのcolorは継承しないんだったー』ってことが疲れてるとよくある。

ul li,
ul li a { color: gray; }

だもんで、めんどくさいけど、上記のようなスタイルを指定している（aで包まない時にも文字色を維持するため）。なんかこれは単純な例だけど、もうちょっと複雑になると、詳細度の兼ね合いとかめんどくさくなってくる。しかしまぁよくよく考えたら、継承させればいいんだよねってことで、ここでinheritさんの登場だ。

a { color: inherit; }
ul li { color: gray; }

こうしとけば、ul > li > aは、グレーの文字色を継承する。inheritなんて初めて使ったよ。スマホコーディングとなるとCSS3ばっか意識がいっちゃって、基本を疎かににしていた。反省。

スマホサイトはタップエリアを大きくするためにBlock化して、aに多くの内容物が放り込まれるきらいがある。だもんで、aも通常のspanとかdiv感覚に扱うようになってきから、継承させたほうがなにかと都合が良い気がする。そのほうが素直な気がする。