コーディング

display: flexとinline-flexの違い｜margin: autoで中央揃えできなかった理由

by

Figmaのデザインを見ながら模写コーディングをしていたとき、ボタンを中央に配置しようとして少しつまずきました。 ボタンの中の文字を中央に配置するため、最初に書いていたCSSがこちらです。 justify-content … 続きを読む

CSSで帯を作る方法｜背景色を使ったデザインを初心者向けに解説

by

Webサイトでは、見出しやタイトルの背景に色を付けた**「帯」のようなデザイン**がよく使われます。 CSSで帯を作る場合、特別なプロパティがあるわけではありません。 基本的にはbackground-colorで背景色を … 続きを読む

CSSでホバー時に色を変える方法｜hoverの使い方を初心者向けに解説

by

Webサイトでは、リンクやボタンにマウスを乗せたときに色が変化する表現をよく見かけます。 このような動きは、CSSの**:hover（ホバー）**を使うことで簡単に実装できます。 色が変わることで「ここはクリックできる」 … 続きを読む

CSSで文字に下線を引く方法｜border-bottomを初心者向けに解説

by

Webサイトを制作していると、見出しの下に線を引いたり、特定の文字を下線で強調したりしたい場面があります。 そんなときに使えるのが、CSSの**border-bottom**です。要素の下側にだけ枠線を指定することで、下 … 続きを読む

CSSで文字を四角で囲む方法｜枠線の付け方を初心者向けに解説

by

Webサイトを作っていると、「この文章だけ枠で囲みたい」「見出しを四角で囲って目立たせたい」と思うことがあります。 CSSでは、borderプロパティを使うだけで簡単に四角い枠線を作れます。 さらに、線の色や太さ、内側の … 続きを読む