素材の壺 | CSS

2019年7月23日

IEだけmainタグにCSSが適用されない時の対処法

今や当然のように記述するようになったHTML5で追加されたタグ。<header>や<footer>、<nav>など、これまでレイアウトを組む際にclass等で命名し...

2018年7月4日

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

2017年6月7日

偶数や奇数ごと、3つごとや5つごと、といった指定や、n番目のみ、という指定。CSSを指定した要素にだけ適用したい場面はよくありますが、そんな時に便利な疑似クラス「nth-child(n)」の使い方をま...

2014年11月2日

2014年現在、あるのが当たり前になりつつあるスマートフォン用サイト。PC用サイトとの大きな違いの一つに「縦向きと横向きで画面サイズが変わる」という点があります。スマホ用サイトを制作する際は、...

2014年11月1日

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

2013年11月6日

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

2013年4月21日

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

2013年3月27日

今回は透明度を指定するためのプロパティ「opacity」で発生したバグの解決法を書いていきます。まずは「.opacity」というクラスに、opacityの指定を行ないます。 .opacity:h...

2012年5月1日

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

2011年5月1日

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