【HTML/CSS】地味に使える6つの小技

150715_001

どれも最近使ったものですが、頻繁に使う機会はありません。ただ、頭の片隅に置いておくと便利です。

目次

検証したブラウザとOS

  • IE 8~
  • Firefox
  • Google Chrome
  • iOS 7~
  • Android 4.1~

 

テキストの画像置換

See the Pen テキストの画像置換 by keita hirai (@keitahirai) on CodePen.

-9999em は好ましくないので、100% で領域分だけ飛ばし、改行を禁止、非表示にする。 レガシーIE対応が必要な間は、まだまだ使う機会がありそうです。

 

アイコンフォントとテキストの距離を調整

See the Pen アイコンフォントとテキストの距離を調整 by keita hirai (@keitahirai) on CodePen.


1px単位での余白調整が可能。
※デモは Font Awesome を使っています。

 

定義タグの背景を、テキスト領域だけにする

See the Pen 定義タグの背景を、テキスト領域だけにする by keita hirai (@keitahirai) on CodePen.

dt はブロック要素のため、デフォルトは横幅100%となる。float を指定して浮かせることで、背景をテキスト領域だけにし、dd で float をクリア。

 

ol タグで丸数字

See the Pen olタグで丸数字 by keita hirai (@keitahirai) on CodePen.


ol のリストスタイルをリセットして、li に position: relative; を指定。実体参照の丸数字を span で囲み、position: absolute; を指定する。

 

画像のロールオーバー/アクティブ時に内側ボーダー

See the Pen 画像のロールオーバー/アクティブ時に内側ボーダー by keita hirai (@keitahirai) on CodePen.

主な用途としては、カルーセルスライダーのサムネイルを、アクティブにさせる時。 わりと有名ですが、検証もせず、海外サイトをコピペしているだけのブログが多くて気になりました。

ポイント

  • reset.cssで max-width: 100%; として崩れる場合は、max-width: 100px; と、サムネイル幅を再指定
  • 必要に応じて、img に vertical-align: middle; を指定
  • a には float でなく、display: inline-block; でもOK

 

透明度変更のロールオーバーで、画像背景を白に

See the Pen 透明度変更のロールオーバーで、画像背景を白に by keita hirai (@keitahirai) on CodePen.


フル画面で見る

ブロックの背景色が暗いと、マウスオーバーで透明度を高くした時に画像が暗くなります。ロールオーバー画像とJavaScriptの作成が面倒なときに。

ポイント

  • div で画像をネストして、白背景を指定
  • 発生する余白を消すには、font-size: 0; もしくは line-height: 0; を指定
  • IE対策で font-size: 0; と line-height: 0; の使い分けが必要なため、多少面倒

    • このエントリーをはてなブックマークに追加