CSS

Webデザインで「画像の縦横比が崩れてしまった」「iframeの動画がスマホで変に伸びてしまう」――そんな経験はありませんか？これまで、縦横比を保つためにはpadding-topのトリックやJavaScriptを使う必要がありましたが、今で...

Webデザインをしていると、よくあるトラブルのひとつが「z-indexが効かない」「重なり順が思った通りにならない」という問題です。モーダルウィンドウやドロップダウンメニュー、ヘッダーなどで要素が背景に隠れてしまうことは珍しくありません。こ...

Webサイトをコーディングしていて、「思った通りにレイアウトが決まらない」「横並びにできない」といった経験はありませんか？その原因の多くは、CSSのdisplayプロパティの理解不足にあります。本記事では、displayの基本から応用まで、...

Webデザインにおいて、テキストの見た目は「サイト全体の印象」を大きく左右します。CSSを使えば、文字の色・大きさ・太さ・位置・間隔などを自由にデザインでき、読みやすさやデザイン性を向上させることができます。この記事では、テキスト装飾の基本...

Webサイトのデザインを整える上で欠かせないのが「要素の配置」です。特に、複雑なレイアウトをシンプルに実現できるのが display: flex（フレックスボックス） です。従来、要素を横並びにしたり中央寄せするには、floatやinlin...

「marginを指定したのに余白ができない…」「思った通りに動かない…」CSSを勉強していると、こんな経験をしたことがある方は多いのではないでしょうか？実は、marginが効かないのには明確な原因があります。そして、その多くはCSSの仕組み...

Webサイトのデザインを整えるうえで欠かせない「余白」ですが、その中でもよく使われるのが margin と padding の2つです。両者は似ているようで役割がまったく異なります。この記事では、CSSのpadding（パディング）について...

はじめにWeb制作をしているとよく登場する「margin」。見た目を整えるうえで欠かせないプロパティですが、paddingとの違いや上下のマージンが重なってしまうマージンの相殺など、初心者がつまずきやすいポイントも多いです。この記事では、C...

CSSでレイアウトを調整するとき、最もよく登場するプロパティのひとつが position: absolute; です。要素を自由な位置に動かせる非常に便利な指定ですが、仕組みをしっかり理解していないと、「思った位置に表示されない」「他の要素...