[CSS]CSSの小技をメモる Part.1

ネタがありすぎて何を書けばいいか分からなくなったので自身たまにしか使わないCSSの小技をメモるという逃げ。

誰かの役に立てばいいのだけどとは思ってませんので参考、コピペは自己責任で。
ってCSSなので大したことは起きないと思います。※CSS崩壊注意！

カラー指定しなくても同じ色

テキスト要素（p）などを囲った外枠（divなど）にcolorプロパティで文字色をしていた場合、その内側の要素（この場合p）のborderプロパティで色を指定しなくても文字色が継承されます。

borderと文字色を同じにしていて、色変更の仕様変更があったときなどにちょっとだけ楽になりますね。

コンパクトになっているテキストボックスをfocusするとサイズが伸びます。

デザイン上、大きく作れないときはお役立ち！

自己満足と言うか個人的美的感覚と言うか、ボックスは下だけに影があるとおしゃれだよねって変な感覚から影はいつも真下につけます。

See the Pen 下だけに影 by mitsuki sagayama (@sagayama) on CodePen.

ただ真下に付けるのではなく影の幅を狭くすることで、よりリアルな影になります。

しばらく前に流行ったアレです。
使いすぎると「ダサッ」ってなりますけど、さりげなくワンポイントにもならない程度に使えればおしゃれかも…（ボクは使わないけど）

hoverで上にずらして影を付けるという古典的な方法です。

企業サイトを作っているとよくある会社概要内の社歴。tableでデザインしちゃうとスマホが厳しくなるのでul、liでパンフレット風にデザインします。

複雑に見えますけどやってることは至って簡単です。

ul li .content {
  width: 50%; //この部分の調整
  float: left;
  border-left: 2px solid #ccc;
  padding-left: 30px;
}

ボックスcontentの幅の部分ですがpx指定でも構いませんよ。（※CODEPENだったので％にしました）
スマホはいつもメディアクエリでfloatをnoneしてガラッと変えてます。

CSSで出来ることっていっぱいありますね。
で気付いたんですけど、こうやってCODEPENで紹介してたらCODEPENのほうにもボクの財産は溜まって行くわけですよ。
CSSの再確認にもなりますし、一石二鳥ですね。

このシリーズまた書きます。