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

brタグを無効にしたいケースは意外と多いですよね。例えば、意図しない改行が発生してレイアウトが崩れたり、レスポンシブ対応で改行を制御したい場合など。CSSを使えば、簡単にbrタグの影響をなくすことができます。今回は、brタグを無効にする方法...

WebサイトやアプリのUIデザインにおいて、テキストの長さを制限することはよくあります。CSSを使えば、文字数を制限しながら、ユーザーに適切な情報を伝えることができます。本記事では、CSSを使った文字数制限の方法を詳しく解説します。text...

ウェブデザインやフロントエンドの演出で欠かせないのが「CSSアニメーション」。写真や文字、図形をアニメーションさせると、サイトに動きをつけることができ、ユーザーの目を引きやすくなります。今回は、CSSアニメーションを無限に繰り返す方法につい...