偶数や奇数ごと、3つごとや5つごと、といった指定や、n番目のみ、という指定。CSSを指定した要素にだけ適用したい場面はよくありますが、そんな時に便利な疑似クラス「nth-child(n)」の使い方をま...
2014年11月2日
スマホ用サイト、縦向きと横向きでCSSの指定を切り替える記述方法
2014年現在、あるのが当たり前になりつつあるスマートフォン用サイト。PC用サイトとの大きな違いの一つに「縦向きと横向きで画面サイズが変わる」という点があります。 スマホ用サイトを制作する際は、...
2014年11月1日
IE8対応!opacityの書き方について
オンマウス時などに透明度を変更できる「opacity」。便利なのですが、IE8に対応させようとした時にうまくいかない時があったので、その時の対処法を掲載します。 HTML画像+リンクという動作で...
2013年11月6日
文字を省略させるためのCSS「text-overflow」
ニュースサイトでの記事一覧、ECサイトでの商品一覧などで、長い文字は1行分だけ表示させれて文末に「…」を付ける。これはよく使われる表現ですね。この文字省略を実現するにあたり、PHPやJavascrip...
2013年4月21日
二行目以降だけ行頭1文字分インデント
行頭に黒丸や数字を表示させ、二行目以降を1文字分インデントさせるには、list-styleとmarginやpaddingなんかを使えば簡単に再現できます。但しその行頭の1文字が米印などlist-sty...
2013年3月27日
opacityを適用した時にオンマウスで画像が1px動いてしまったりするバグの解決法
今回は透明度を指定するためのプロパティ「opacity」で発生したバグの解決法を書いていきます。まずは「.opacity」というクラスに、opacityの指定を行ないます。 .opacity:h...
2012年5月1日
CSSの全体設定
CSSの初期設定として記述しておくと便利な全体設定の指定方法のご紹介です。 全体設定 全てにまとめて指定する場合は「*」を使用します。 *{ margin: 0; padding: 0;} 一...
2011年5月1日
DIVの高さをページの一番下まで伸ばすためのCSSの指定
DIVに指定した背景画像をコンテンツの内容に関係なくページ一番下まで伸ばす方法をご紹介。 DIVに何も指定していない状態だとコンテンツの内容によってボックスは下に伸びていきますが、親要素であるh...