- 2024.08.23
【CSS】overflowではみ出しを管理する!使い方を解説
CSSでは要素の横幅や高さ(またはinline-sizeやblock-size)を設定することでボックスのサイズを指定できますが、ボックス内の内容が多すぎる場合はコンテンツがはみ出てしまいます。CSSにおいて、このような要素のはみ出しを管理するのに役立つプロパティが「overflow」です。本記事ではoverflowプロパティの使い方を中心に詳しく解説します。 overflow CSSのoverf […]
CSSでは要素の横幅や高さ(またはinline-sizeやblock-size)を設定することでボックスのサイズを指定できますが、ボックス内の内容が多すぎる場合はコンテンツがはみ出てしまいます。CSSにおいて、このような要素のはみ出しを管理するのに役立つプロパティが「overflow」です。本記事ではoverflowプロパティの使い方を中心に詳しく解説します。 overflow CSSのoverf […]
colorとは CSSのcolorプロパティとは、HTML要素の色を指定するプロパティです。文字色や背景色を変更するのに用います。 colorの使い方 【CSSコード】 色の指定方法 色は、colorプロパティを用いて、「red」や「green」といったカラーネーム、または、「#FF000」のようにハッシュ(#)を先頭に置いた6桁のカラーコードで指定するのが一般的です。(初期値はブラウザに依存) […]
本記事ではボックス要素や画像にシャドウ効果をつけるCSSプロパティ「box-shadow」の使い方を解説します。要素や画像が浮いているように見せたり、立体感を出せます。コピペで使えるサンプルコードも紹介するのでぜひ参考にしてください。 box-shadowとは box-shadowとは、ボックスや画像に影効果をつけるCSSプロパティです。複数の値を半角スペースで区切って指定することで影の位置や大き […]
letter-spacingとは CSSのletter-spacingとは、文字同士の間隔(字間)を指定するプロパティです。letter-spacingで字間を調整することで文章の読みやすさが変わるので、ぜひとも覚えておきたいプロパティです。 上図のように、letter-spacingプロパティは文字と文字の間のスペース、すなわち字間を調整するプロパティです。 letter-spacingの使い方 […]
border-radiusは要素に丸みをつけるCSSプロパティで、Web制作によく用いられます。border-radiusプロパティを使うことで、やわらかい雰囲気を表現できたりと、表現の幅が広がります。本記事ではborder-radiusプロパティの使い方をサンプルコード付きで解説します。 border-radiusとは CSSのborder-radiusとはHTML要素の四隅の角を丸めるプロパテ […]
vertical-alignは、テキストや画像の縦方向の位置を調整するCSSプロパティです。本記事ではvertical-alignプロパティの使い方や効かない原因とその対処法を解説します。 vertical-alignとは vertical-alignとは、テキストや画像の縦方向の位置を指定するCSSプロパティです。インライン要素、インラインブロック要素、テーブルセル要素に設定でき、指定した要素と […]
text-decorationとは CSSのtext-decorationプロパティは、テキストに線や色など、装飾に関する4つのCSSプロパティを一括で指定できるプロパティです。現在はショートハンドプロパティとして定義されています。 text-decorationプロパティを構成する4つのプロパティ text-decorationプロパティを構成する4つのプロパティを以下に示します。 text-d […]
行間が詰まりすぎていたり、空きすぎたりしているとWebページが見にくくなります。そんな時、CSSのline-heightプロパティで行間を調節することで、Webページを見やすくすることができます。本記事では、行間を指定するCSSプロパティ「line-height」について解説します。 line-heightとは line-heightとは、行の高さの最小値を指定するCSSプロパティです。行の高さは […]
font-weightとは font-weightとは、HTMLで定義した文字の太さを指定するCSSプロパティです。font-weightで文字の太さを変更することでWebページの雰囲気に合わせたり、特定の文字や文章を強調することができます。font-weightで文字の太さを変更する方法は、数値で指定する方法とキーワードで指定する方法があります。本記事ではサンプルコードを用いて解説していきます。 […]
font familyとは font-familyとは、HTML要素に対してフォントを指定するCSSプロパティです。Webページを構成するコンテンツのほとんどはテキスト情報が占めるため、指定するフォントによって、文章の読みやすさや見やすさに大きく影響します。ただ、実際にユーザの画面に表示されるフォントはユーザの利用環境に依存するため、font-familyを指定しても、そのフォントがユーザの利用端 […]