拡大してもボケない画像、svg。背景画像に使用して、レスポンシブ対応で横幅100%で可変にして、、、と思ったところ、アスペクト比を保った状態となり、横幅100%になってくれませんでした。今回はそんなs...

オンマウスで下から上に背景色がスライドする演出をaタグやinputのボタンに適用するCSS
CSSで表現できることが増えて、CSSだけで出来るボタンの演出バリエーションも増えてきましたよね。今回は初期表示では下線のみ、オンマウスで下から上に背景色がスライドする演出のボタンを作成しました。 ...

ボックスの高さを揃えるならCSSのFlexbox
横並びのボックスの高さを揃える。tableなら出来るけど、divやliなどで組んでいる横並びのボックスの高さを揃える場合、それもheight固定でなく要素の中身に応じて可変とする場合、長らく「heig...

薄いtext-shadowの色を濃くしたい時の指定方法
表現力が豊かになってきたCSS、SEOを考慮してもなるべくHTML+CSSで出来る表現はしていきたいところですよね。今回はテキストにドロップシャドウの効果を付与できる「text-shadow」について...

表示領域を超えた範囲を横スクロールにするCSS
サイトを制作していると、文字数に悩まされることが多々あります。文字数が想定より長くなって一定の横幅を超えた際、通常なら改行して折り返し、という表示になりますが、1行に収めたい時もありますよね。とはいえ...

background-imageを透明にするためのCSS
昔は主にレイアウトを整える役割というイメージが強かったCSSですが、近年はアニメーションさせる事も出来るようになったり、表現の幅が広がってきていますよね。 表現の一つとしてよく使用するのが、透明...

画像の下に数ピクセルの謎の余白が出来てしまう時に解決できるCSS
サイトに画像を表示するならimgタグ、divなどで囲ってレイアウトを調整、よくある日常の作業なのですが、たまに悩まされる時があります。 それはある日、画像をピッタリくっつけた状態で、リキッドレイ...

IEだけmainタグにCSSが適用されない時の対処法
今や当然のように記述するようになったHTML5で追加されたタグ。<header>や<footer>、<nav>など、これまでレイアウトを組む際にclass等で命名し...

便利なcalc()関数でwidthやfont-sizeの値を計算式で指定
レイアウトを組む時、特に横幅可変やレスポンシブ対応の際に横幅や余白の計算は不可欠ですね。例えば横幅いっぱいに伸ばしたいけど50pxだけ余白を残したい時。「親のdivにpadding指定して、子の要素は...
偶数や奇数ごと、3つごとや5つごと、といった指定や、n番目のみ、という指定。CSSを指定した要素にだけ適用したい場面はよくありますが、そんな時に便利な疑似クラス「nth-child(n)」の使い方をま...