ホームページ制作の装飾プロパティ
CSS(Cascading Style Sheets)プロパティのアルファベット順インデックスです。CSSは、 ホームページ制作で使用する外観部分の装飾プロパティ指定です。レイアウトやカラーの指定はこのCSSで行います。
HTMLによってページの論理構造を指定しますが、このCSSによって、サイトレイアウトや各要素の幅、フォントサイズ、背景色、文字色の指定するため、サイトデザインの設計の中心となるのはこのCSSとなります。
ホームページ（ウェブサイト）のデザインやレイアウトを構築する上で、CSSプロパティの理解は非常に重要です。以前は「CSS3」という言葉が新基準として広く使われていましたが、現在CSSは「Living Standard」として継続的にアップデートされていきます。本記事では、現代のブラウザ環境に最適化されたモダンCSSのプロパティを目的別に整理し、ホームページ（ウェブサイト）制作における実用的なリファレンスとしてまとめました。事業の魅力を正確に伝えるデザインを実現するために、ぜひご活用ください。
CSS Cascading Style Sheets
ホームページ制作においてhtmlがタイトル・見出し・段落など、文書構造を定義するのに対して、スタイルシート（Style Sheets）、CSS(Cascading Style Sheets)は、装飾や配置などを行い、html文書の見た目に関する指定をする仕組みになっています。ホームページ（ウェブサイト）の文字色、背景色などの色の指定や各要素の大きさ、レイアウトの細かい配置などを指定します。
ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートです。以下のページでは、ホームページのCSS・スタイルシート編集方法について掲載しています。
ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ
スタイル指定（宣言）
スタイルシートは、セレクタ（selector スタイル適用の対象）と宣言ブロック（スタイル宣言の内容）から構成され、
宣言ブロックはスタイル属性（property）とその値（value）で構成されます。
selector { property : value ; }
css property index ホームページ制作の装飾プロパティ
CSS(Cascading Style Sheets)プロパティのインデックスです。
CSS｜background（attachment・color・image・position・repeat）背景
CSS｜border（style・width・color）border-collapse・border-spacing
CSS｜clip・clip-path 要素の切り抜き表現と描画
CSS｜color（カラー、文字色）とopacity（透明度）
CSS｜content（コンテント）・quotes（クオート）疑似要素と引用符
CSS｜counter-increment・counter-reset CSSカウンター
CSS｜cursor・pointer-events・user-select カーソル、クリック、テキスト選択のUI制御
CSS｜display（ディスプレイ）・visibility（ビジビリティ）要素の表示と非表示
CSS｜float（フロート）とclear（クリア）FlexboxやCSS Gridへの移行
CSS｜font（family・size・size-adjust・stretch・style・variant・weight）
CSS｜height（ハイト）・max-height・min-height 要素の高さ
CSS｜letter-spacing・word-spacing 文字・単語間の余白
CSS｜line-height・vertical-align・white-space・line-break 行間 縦方向の揃え位置 改行ルール
CSS｜list-style リストスタイル（type・image・position）
CSS｜margin マージン（top・bottom・left・right）
CSS｜orphans（オーファン）・widows（ウィドー）
CSS｜outline アウトライン（color・style・width）
CSS｜overflow オーバーフロー（X・Y）要素のはみ出し制御
CSS｜overflow-wrap・word-wrap・word-break テキストの改行ルール
CSS｜padding パディング（top・bottom・left・right）
CSS｜page（break-after・before・inside）・size・marks 印刷時のページ制御
CSS｜position ポジション（top・bottom・left・right）
CSS｜ruby-position・ruby-align・ruby-overhang
CSS｜table-layout・caption-side・empty-cells テーブルのデザインや表示方法
CSS｜text-align・text-justify・text-indent・text-autospace 配置と整列
CSS｜text-decoration・text-underline-position 線の装飾
CSS｜text-shadow・text-transform 文字の影と大文字・小文字
CSS｜width・max-width・min-width 要素の横幅
CSS｜writing-mode・text-orientation 縦書き・横書き・文字の向き
CSS｜z-index 要素の重なり順の制御と現代の適切な設計手法
CSS /* */ CSS内のコメント・コメントアウトの使い方とデバッグ手法
非推奨・廃止・レガシープロパティ
【非推奨・廃止】CSSの音声プロパティ（volume・speak・pitch等）の概要と現在の扱い
CSS｜behavior・ime-mode・layout-grid・marker-offset・include-source・layer-background（廃止・非推奨）
表記における(IE)はInternet Explorerを、NNはNetscape Navigatorにおける独自採用を意味しています。
現在も有効な主要CSSプロパティ
| 頭文字 | プロパティ一覧 |
|---|---|
| A | align-content, align-items, align-self, all, animation, appearance, aspect-ratio |
| B | backdrop-filter, backface-visibility, background, background-color, background-image, border, border-radius, bottom, box-shadow, box-sizing, break-after, break-before, break-inside |
| C | caption-side, caret-color, clear, clip-path, color, column-count, column-gap, content, cursor |
| D | direction, display |
| E | empty-cells |
| F | fill, filter, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, float, font, font-family, font-size, font-weight |
| G | gap, grid, grid-area, grid-auto-columns, grid-auto-rows, grid-column, grid-row, grid-template-columns, grid-template-rows |
| H | height, hyphens |
| I | image-rendering, inline-size, inset, isolation |
| J | justify-content, justify-items, justify-self |
| L | left, letter-spacing, line-height, list-style, list-style-type |
| M | margin, margin-bottom, margin-left, margin-right, margin-top, mask, max-height, max-width, min-height, min-width, mix-blend-mode |
| O | object-fit, object-position, opacity, order, outline, overflow, overflow-wrap, overscroll-behavior |
| P | padding, padding-bottom, padding-left, padding-right, padding-top, perspective, place-content, place-items, pointer-events, position |
| Q | quotes |
| R | resize, right, rotate, row-gap |
| S | scale, scroll-behavior, scroll-snap-type, stroke |
| T | tab-size, table-layout, text-align, text-decoration, text-indent, text-overflow, text-shadow, text-transform, top, transform, transform-origin, transition, translate |
| U | unicode-bidi, user-select |
| V | vertical-align, visibility |
| W | white-space, width, will-change, word-break, word-spacing, writing-mode |
| Z | z-index |
廃止・非推奨・非標準のCSSプロパティ
| 頭文字 | プロパティ一覧 |
|---|---|
| B | box-align, box-direction, box-flex, box-orient, box-pack（旧Flexbox仕様） |
| C | clip（clip-pathへの移行により非推奨） |
| I | ime-mode（標準化されず廃止状態） |
| P | page-break-after, page-break-before, page-break-inside（break-after等への移行によりレガシー化） |
| S | scroll-snap-coordinate, scroll-snap-destination（旧Scroll Snap仕様・廃止） |
| W | word-wrap（overflow-wrapのレガシーエイリアスとして残存しているが非推奨） |
| Z | zoom（標準化されておらず、代替としてtransform: scale()が推奨） |
レイアウトとボックスモデルに関するプロパティ
ホームページ（ウェブサイト）の骨組みを作るレイアウト関連のプロパティは、現代の制作において最も進化が著しい分野です。以前のようなfloatを用いた複雑なレイアウトから、より柔軟で直感的な指定へと移行しています。
display（フレックスボックスとグリッド）
現代のレイアウトの中核を担うプロパティです。display: flex; は要素を1次元（行または列）に並べる際に高い機能性を発揮し、display: grid; は2次元（行と列の格子状）の複雑なレイアウトを簡単に構築できます。事業用の複雑なページ構成も、これらのプロパティを駆使することで、HTMLの構造をシンプルに保ったまま実現できます。
margin と padding
要素の外側の余白（margin）と内側の余白（padding）を指定します。各要素の距離感を適切に設定することは、ユーザーにとって見やすい画面を作る上で大きな役割を果たします。
box-sizing
要素の幅や高さの計算方法を指定します。box-sizing: border-box; を指定することで、paddingやborderの太さを含めて要素のサイズを計算するため、レイアウト崩れを防ぐための標準的な指定として定着しています。
装飾と視覚効果に関するプロパティ
ホームページ（ウェブサイト）の視覚的な魅力を高め、ユーザーの目を惹きつけるためのプロパティです。トレンドに合わせた多彩な表現が可能です。
background（背景）
背景色や背景画像を指定します。複数の画像を重ねる指定や、画面いっぱいに画像を配置する指定など、視覚的なインパクトを与えるために頻繁に使用されます。
box-shadow と filter: drop-shadow
要素に影を落とすプロパティです。box-shadowは要素のボックス形状に対して影をつけますが、filter: drop-shadow を用いると、透過画像などの不透明部分に沿って自然な影を描画できます。
border-radius
角丸を指定するプロパティです。柔らかい印象を与えたい事業のホームページ（ウェブサイト）などで多用されます。完全な円形を作る際にも重宝します。
より高度なCSS設計とモダンプロパティの活用
ここからは、より専門的にはどのようにCSSプロパティを扱い、ホームページ（ウェブサイト）の品質を高めていくかについて解説します。単純に見た目を作るだけでなく、レンダリングパフォーマンスや保守性、アクセシビリティを考慮したプロパティの選択が重要です。
CSSカスタムプロパティ（CSS変数）の導入
カスタムプロパティは、現代のCSS設計において中核を担います。テーマカラーや余白のルールを変数としてルートレベルで定義することで、事業のブランドガイドラインに沿った一貫性のあるデザインを保守しやすい状態で管理できます。変更が生じた際も、変数の値を一つ書き換えるだけで全体のスタイルを一括調整できます。
論理プロパティ（Logical Properties）による柔軟な対応
物理的な方向への指定から、論理的な方向（ブロック方向・インライン方向）への指定へ移行が進んでいます。これにより、横書き・縦書き、あるいは右から左へ読む言語への対応が、CSSの記述を大きく変更することなくシームレスに実現できます。多言語展開を視野に入れた事業展開において非常に有効な手法かもしれません。
アニメーションとレンダリングパフォーマンスの最適化
要素を動かす際は、transformプロパティやopacityプロパティを使用することが基本です。これらのプロパティはブラウザのグラフィック領域で処理されるため、画面の再計算を発生させず、スマートフォンなどのデバイスでも滑らかな動きを実現できます。反対に、幅や高さなどを直接アニメーションさせることはパフォーマンスの低下を招くため注意が必要です。
コンテナクエリ（Container Queries）によるコンポーネント指向
画面全体の幅ではなく、親要素（コンテナ）の幅を基準にしてスタイルを切り替える新しいプロパティです。これにより、同じデザイン部品を広いメインエリアに配置した場合と狭いサイドバーに配置した場合で、自動的に最適なレイアウトへ変形させることが可能になります。保守性が高く、より柔軟なホームページ（ウェブサイト）設計を実現します。
ホームページ制作・SEO・Web集客・Webマーケティングなら京都のWeb制作会社 株式会社ファンフェアファンファーレへ
「Web集客できるホームページ制作・作成（ウェブサイト制作）、SEO・Webマーケティング」
ホームページ制作 京都のWeb制作会社 株式会社ファンフェアファンファーレは、Web集客・Webマーケティングを意識したWordPressサイト制作を中心にSEO・LLMO・GEO・AIO対策やコンテンツ制作に特化した制作会社です。ホームページ制作やリニューアル、修正・LP制作はもちろん、技術的SEOからセマンティックHTMLを含めたSEO（SEO対策）やAI検索対策、コンテンツマーケティング、SNSマーケティングとの連携、WebマーケティングにかかるWebコンサルティングなど様々なサービスを提供しています。
WordPressサイト制作
WordPressサイト制作やカスタマイズもおまかせください！サイト構造の再設計・セマンティックHTML・AI対応を含めたWordPressのSEOやホームページをWordPressサイトへと変更する「WordPress化」、オウンドメディア構築も可能です！
ホームページ修正・更新
ホームページの修正やページ更新、ページ追加、サイト内部の様々な修正など、各種ホームページの修正・更新の代行に対応しております。エラー修正やページ内容の変更など、ホームページの修正や更新にかかる単発のご依頼で対応させていただいております。軽微な修正でもお気軽にご相談ください。
ホームページの更新・修正料金 価格表
