HTML/CSS

要素を重ね順で前面・背面に配置したいときによく使う z-index。しかし、指定しても意図通りに反映されないことがあります。これは CSS の「スタッキングコンテキスト」の仕組みに起因するケースが多いです。この記事では、z-index が効...

デザイン調整で「要素を親の外にはみ出させたい」ときに使われるのがネガティブマージン（負の margin）です。しかし、指定しても思ったように反映されない、動作が崩れるといった悩みをよく耳にします。ここでは、ネガティブマージンが効かない原因を...

CSS のアニメーションを適用している要素を、マウスオーバー（:hover）したときに一時停止させたいことがあります。その場合は animation-play-state を利用します。animation-play-state はアニメーシ...

Web アクセシビリティを考慮する上で、不要な情報をスクリーンリーダーに読み上げさせないことは重要です。そのために使われる属性が aria-hidden です。しかし、誤った使い方をすると逆にユーザー体験を損ねる可能性があります。この記事で...

CSS の backdrop-filter プロパティを使うと、要素の背後にある背景に対して「ぼかし」「明るさ調整」「彩度変更」などの効果を適用できます。ガラスのような半透明デザインや、背景を目立たせずに前面コンテンツを読みやすくする表現に...

CSS で要素に影をつける方法には box-shadow と filter: drop-shadow() の2種類があります。一見すると似ていますが、仕組みや用途には明確な違いがあります。本記事では drop-shadow() の基本的な使...

Web ページのデザインによっては、見出しやボタンなどのテキストを1行に収めて表示したいケースがあります。CSS では white-space プロパティを使うことで、テキストが自動で折り返されないように制御できます。本記事では、改行をさせ...

SVG はアイコンやイラストに広く使われる形式で、CSS を使って柔軟に色を変更できます。ただし、埋め込み方法（<img> / CSS 背景 / インライン SVG）によって適用できる手段が異なります。本記事では SVG の色変更テクニック...

Flexbox を使った横並びレイアウトで、テキストが微妙に下へ寄って見えることがあります。原因は「交差軸のそろえ方」「ベースライン揃え」「行の余白（line-height）」「アイコンや画像のインライン挙動」のいずれかに集約できます。代表...

「画像を角丸でトリミングしたい」「縦横比がバラバラでも枠いっぱいに綺麗に切り抜きたい」。そんなときは object-fit: cover; を画像自身に指定するだけで解決できます。枠（幅・高さ・角丸）を先に決め、画像は「はみ出してもよいから...

スクロールに追従する見出しやサイドナビを作る際に便利な position: sticky。しかし「効かない」「固定されない」ケースは少なくありません。多くは指定忘れや親要素のレイアウト条件が原因です。代表的な落とし穴と、確実に動かすためのチ...

Flexbox を使ってレイアウトを組んでいると、「横幅を指定したのに反映されない」「子要素のサイズが意図通りにならない」といった問題に遭遇することがあります。これは Flexbox の特性やデフォルトの挙動に起因することが多いです。本記事...

Webサイトのデザインにおいて、フォントの種類は印象を大きく左右します。特に日本語の表現においては、ゴシック体と明朝体の違いが文章の雰囲気に直接影響します。この記事では、CSSでゴシック体から明朝体へ変更する方法を紹介します。明朝体を指定す...

Web制作において、コンテンツの文字数によってレイアウトが崩れることがあります。特にカードレイアウトやボタンなど、スペースが限られている場合には、文字数に応じてフォントサイズを柔軟に調整することで見た目を整えることが可能です。この記事では、...

position: stickyは、要素をスクロールに応じて固定表示させたいときに便利なCSSプロパティです。しかし、実装しても「なぜか効かない」「意図通りに動作しない」といったトラブルに遭遇することも少なくありません。本記事では、posi...

flexレイアウトを使っていると、子要素にmax-heightやmax-widthを指定しているのに思った通りに制限が効かない、ということがあります。この記事では、flex時にmax-height・max-widthが効かない主な原因と、そ...

Webサイトを構築する際、見た目の印象を大きく左右するのが「フォント」です。特に日本語を扱うWebサイトでは、OSごとに標準フォントが異なるため、適切な font-family の指定が重要です。この記事では、Webサイトで定番とされている...

Web デザインでは、要素の順番を変更したい場面がよくあります。特に、レスポンシブデザインで PC とスマホでレイアウトを変えたい場合、HTML を変更せずに要素の順番を入れ替えられると便利です。そこで役立つのが、CSS の order プ...

clamp() は、CSSで柔軟なサイズ設定を行うための関数で、最小値・推奨値・最大値を指定して、レスポンシブなデザインを簡単に実現できます。本記事では clamp() の基本的な使い方や具体例を紹介します。clamp() の基本構文cla...

Webサイトでテーブルを使うと、PCでは問題なく表示できても、スマホでは横幅が収まりきらず、レイアウトが崩れてしまうことがあります。そのような場合、スマホのみに横スクロールを適用することで、見やすいデザインを実現できます。本記事では、スマホ...