素材の壺CSS アーカイブ

2022年2月10日

SVG画像をbackgroundに指定したときにbackground-sizeが思ったように効かないときの対処法

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

2020年12月25日

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

2020年8月22日

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

2020年4月28日

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

2020年4月23日

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

2020年4月22日

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

2019年12月2日

サイトに画像を表示するならimgタグ、divなどで囲ってレイアウトを調整、よくある日常の作業なのですが、たまに悩まされる時があります。それはある日、画像をピッタリくっつけた状態で、リキッドレイ...

2019年7月23日

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

2018年7月4日

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

2017年6月7日

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