CSSで背景画像と背景色を重ねる方法｜background-blend-modeを解説
Webサイトの背景に画像を設定したとき、「画像に色を重ねたい」「背景の雰囲気を変えたい」と思ったことはありませんか？ CSSでは、背景画像と背景色を組み合わせることで、画像の色合いや見え方を調整できます。 例えば、写真に … 続きを読む
CSS
CSSの背景画像を調整する方法｜繰り返しと固定の指定を解説
CSSで背景画像を設定したとき、「同じ画像が何枚も並んでしまう」「スクロールしても背景を固定したい」と思ったことはありませんか？ 背景画像の表示方法は、background-imageだけでなく、ほかのCSSプロパティを … 続きを読む
CSSの背景画像を調整する方法｜サイズと位置の指定を解説
CSSのbackground-imageで背景画像を設定したものの、「画像が大きすぎる」「思った位置に表示されない」と困ったことはありませんか？ 背景画像は、ただ指定するだけではイメージどおりに表示されないことがあります … 続きを読む
CSSのbackground-imageとは？背景画像の基本的な使い方を解説
Webサイトの背景に写真や模様を表示したいときに使うのが、CSSのbackground-imageです。 メインビジュアルに大きな写真を配置したり、セクションの背景に繰り返し模様を入れたりと、Web制作のさまざまな場面で … 続きを読む
margin: 0 autoが効かない？中央揃えできない原因と対処法
CSSでボタンやボックスを中央に配置しようとして、margin: 0 autoを指定したのに動かなかったことはありませんか？ 幅を指定しているのに左側に寄ったままだったり、別の要素では同じCSSが効いたりすると、原因がわ … 続きを読む
text-alignとjustify-contentの違い｜CSSの中央揃えを解説
CSSで文字やボタンを中央に配置するとき、text-align: centerとjustify-content: centerのどちらを使えばいいのか迷うことはありませんか？ どちらも中央揃えに使われるプロパティですが、 … 続きを読む
align-items: centerが効かない？CSSで中央揃えする方法
CSSでボタンやテキストを中央揃えしようとして、align-items: centerを指定したのに何も変わらなかった経験はありませんか？ 例えば、ボタンの背景色やサイズは正しく表示されているのに、中の文字だけが上に寄っ … 続きを読む
spanで改行できない？CSSのdisplayで縦に並べる方法
HTMLで見出しを作っているとき、spanタグで文字を分けたのに、思ったように改行されないことがあります。 例えば、見出しの前半と後半で文字色やサイズを変えたい場合です。HTMLでは別々のspanタグにしているのに、ブラ … 続きを読む
Webサイトはなぜ静かに待てない？スクロール演出と閲覧者の主導権
Webサイトを見ているとき、「どうして静かに待っていてくれないんだろう」と感じることがあります。 スクロールすると文字が現れ、画像が動き、画面の一部がいつまでもついてくる。ひとつひとつは珍しい演出ではありません。 けれど … 続きを読む
justify-content: centerで中央揃えできない？原因と使い方を解説
Figmaのデザインを見ながら模写コーディングをしているとき、justify-content: centerを指定しているのに、要素が思った位置に来ないことがありました。 たとえば、ボタンに次のようなCSSを指定していま … 続きを読む