知っておくと便利なcssの小技 part3

  • はてブ

こんにちは、工藤です。
今回は個人的に知っておくと便利だなと思うcssの小技part3をご紹介します。


テキストに蛍光ペンのようなマーカーをつける

img01
文字の強調に。使い方によっては分かりやすく、おしゃれになります。

DEMO

方法は非常に簡単です。該当のテキストに


とつけるだけ。
linear-gradient(transparent 開始位置, 色の指定 終了位置);といった感じで、開始位置と終了位置の数値が離れるほどぼやけるイメージです。

img02

ただ、今回の記述だとsarafiの方で問題がありまして、終了位置の値を開始位置より大きくした場合、上部が黒っぽくなってしまいます。
どうやら『transparent』はcssでは『透明の黒』と認識されているらしいです・・。

img03

※参考にさせていただいたサイト
CSS で蛍光ペン風マーカーを指定したら iPhone 上で transparent の部分が黒くなってしまった話


なので終了位置の数値が大きくなる場合の記述は以下の物の方が適切かと思います。


これで『透明の白』という記述になるので、きれいなグラデーションがかかります。

DEMO



cssで四則計算をする

タイトルだけだとぴんとこないかもしれないですが、下の画像のようなことをしたいときに非常に便利です。
img04

可変かつ横幅は100%、BOXは3つ、マージンは必ず10px固定』というなかなか眩暈がしそうな条件ですが、『calc()』を使うことで四則計算を自動で行ってくれるので簡単に実現することができます。

DEMO

計算式には以下のものが利用可能です。
+ 加算
減算
* 乗算
/ 除算


まずは未対応ブラウザ用に最初にwidthを指定します。崩れない程度の値にしてください。
そのあとは各ブラウザ用に記述をしますが根本は同じです。
今回の場合は『100%から20px(3つ並びのBOXでできたマージンの合計)を引いた後に3で割る』といった感じの計算をしています。

これだけの記述で複雑な条件でもウィンドウ幅を変えても崩れないBOXができます。


注意点

非常に便利なcalc()ですが、注意点がいくつかあります。

1.計算式の間にスペースを入れる
私が地味に引っかかってしまったのですが『100% – 20px』のように計算式の間にスペースを入れないと動いてくれません。

2.対象ブラウザについて
対象ブラウザなのですが、特に

IE IE9からのサポート
Android Android4.4からのサポート
あたりに引っかかってしまう可能性があります。特にAndroidの方は現状だと少しきついかもしれないですね。対象ブラウザはよく確認しつつ使用してください。

それさえクリアしてしまえば非常に便利なクラスです。

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ