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

CSSの小技をメモる css




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

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

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

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

See the Pen カラー指定しなくても同じ色 by mitsuki sagayama (@sagayama) on CodePen.

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

focusで伸びるテキストボックス

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

See the Pen focusで伸びるテキストボックス by mitsuki sagayama (@sagayama) on CodePen.

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

下だけに影

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

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

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

ちょっと遊び心を2.5Dボタン

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

See the Pen ちょっと遊び心を2.5Dボタン by mitsuki sagayama (@sagayama) on CodePen.

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

企業サイトの社歴によく使うアレ

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

See the Pen 会社概要内の社歴 by mitsuki sagayama (@sagayama) on CodePen.

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

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

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

まとめ

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

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

タイトルとURLをコピーしました