レイアウトを組む時、特に横幅可変やレスポンシブ対応の際に横幅や余白の計算は不可欠ですね。例えば横幅いっぱいに伸ばしたいけど50pxだけ余白を残したい時。「親のdivにpadding指定して、子の要素は...

opacity

オンマウス時などに透明度を変更できる「opacity」。便利なのですが、IE8に対応させようとした時にうまくいかない時があったので、その時の対処法を掲載します。 HTML画像+リンクという動作で...

text-overflow

ニュースサイトでの記事一覧、ECサイトでの商品一覧などで、長い文字は1行分だけ表示させれて文末に「…」を付ける。これはよく使われる表現ですね。この文字省略を実現するにあたり、PHPやJavascrip...

行頭に黒丸や数字を表示させ、二行目以降を1文字分インデントさせるには、list-styleとmarginやpaddingなんかを使えば簡単に再現できます。但しその行頭の1文字が米印などlist-sty...

css
2012年5月1日

CSSの全体設定

CSSの初期設定として記述しておくと便利な全体設定の指定方法のご紹介です。 全体設定 全てにまとめて指定する場合は「*」を使用します。 *{ margin: 0; padding: 0;} 一...

DIVに指定した背景画像をコンテンツの内容に関係なくページ一番下まで伸ばす方法をご紹介。 DIVに何も指定していない状態だとコンテンツの内容によってボックスは下に伸びていきますが、親要素であるh...