/* */ ホームページ制作（ウェブサイト制作）の際に使用するCSS内のコメント「/* */」についてのご説明です。 ホームページ制作・作成において、 /* */ を用いることで、CSS内にコメントを挿入することができます。 このCSS中のコメント機能は、ホームページ制作において、該当部分を無効にするコメントアウトにも使用されます。 /* で始まり、*/ で
css property Reference
日本のホームページ（ウェブサイト）制作において、縦書き表現は和の雰囲気や伝統的な事業の魅力を伝えるために非常に効果的なデザイン手法です。この文字の進行方向（縦書き・横書き）を制御するためのCSSプロパティが「writing-mode」です。 かつてのWebデザインでは、縦書きを実現するためにテキストを画像化して貼り付けるという手法が頻繁に用いられていました。
CSS｜writing-mode・text-orientation 縦書き・横書き・文字の向き
ホームページ（ウェブサイト）を制作し、運用していく中で、テキストの折り返しや改行の制御は非常に重要です。特にスマートフォンでの閲覧が主流となっている現在、長いURLや英単語が画面の幅を超えてはみ出してしまう「レイアウト崩れ」は、ユーザーの利便性を大きく損なう原因になります。画面を横にスクロールしなければ文章が読めない状態は、訪問者に強いストレスを与え、結果と
CSS｜overflow-wrap・word-wrap・word-break テキストの改行ルール
ホームページ（ウェブサイト）制作において、テキストは単なる情報伝達の手段にとどまらず、画面全体の印象を決定づける重要な要素です。文字に影をつけて視覚的なインパクトを与えたり、英単語の大文字と小文字を揃えて統一感のあるデザインを構築したりするために使用されるのが、CSSプロパティの「text-shadow」と「text-transform」です。 「text-
CSS｜text-shadow・text-transform 文字の影と大文字・小文字
ホームページ（ウェブサイト）制作において、ページ内のテキストに対して視覚的な意味づけを行い、ユーザーの操作を迷わせない設計を構築することは非常に重要です。テキストに対して下線や取り消し線などの装飾を施すために使用されるのが、CSSプロパティの「text-decoration」と、下線の表示位置を細かく制御する「text-underline-position」
CSS｜text-decoration・text-underline-position 線の装飾
ホームページ（ウェブサイト）制作において、ページ内のテキストをいかに読みやすく、美しく配置するかは、ユーザーの離脱を防ぎ事業の情報を正確に伝える上で非常に重要です。この文章のレイアウトや文字の揃え方を細かく制御するために使用されるのが、CSSプロパティの「text-align」「text-justify」「text-indent」そして「text-autos
CSS｜text-align・text-justify・text-indent・text-autospace 配置と整列
ホームページ（ウェブサイト）制作において、料金表や事業の比較データなど、複雑な情報をわかりやすく整理するために表（テーブル）は頻繁に使用されます。この表のデザインや表示方法をより細かく、そして快適にコントロールするために使用されるのが、CSSプロパティの「table-layout」「caption-side」「empty-cells」です。 「table-l
CSS｜table-layout・caption-side・empty-cells テーブルのデザインや表示方法
ホームページ（ウェブサイト）制作において、難しい漢字や専門用語に対して正確な読み方を提示することは、ユーザーの理解を助け、幅広い層に情報を届ける上で非常に重要です。このルビ（ふりがな）の表示位置や文字の配置を細かくコントロールするために使用されるのが、CSSプロパティの「ruby-position」「ruby-align」そして「ruby-overhang」
CSS｜ruby-position・ruby-align・ruby-overhang（ルビ・ふりがなの調整）
ホームページ（ウェブサイト）の制作において、画面上の見た目を整えるだけでなく、紙に印刷した際のレイアウトを適切に制御することも、事業の運用上求められる重要な施策です。 見積書や請求書、製品マニュアルなど、ユーザーがブラウザの機能を使って紙に出力する際、画面のレイアウトがそのまま印刷されてしまうと、写真の途中でページが真っ二つに分断されたり、見出しだけがページ
CSS｜page（break-after・before・inside）・size・marks 印刷時のページ制御
ホームページ（ウェブサイト）制作において、スマートフォンやパソコンなど様々な画面サイズの端末に対応するレスポンシブデザインは標準的な設計となっています。その中で頻繁に直面する課題が、指定した枠（ボックス）のサイズよりも、中に入るコンテンツ（長文のテキストや大きな画像、データ量の多い表など）が大きくなってしまった場合に発生する「はみ出し」現象です。このはみ出し
CSS｜overflow オーバーフロー（X・Y）要素のはみ出し制御
ホームページ（ウェブサイト）制作において、箇条書き（リスト）を用いて情報を整理することは、ユーザーにとって読みやすく、理解しやすいコンテンツを提供する上で非常に重要です。このリストの先頭に表示されるマーカー（黒ポッチや数字など）の見た目や位置をコントロールするために使用されるのが、CSSプロパティの「list-style（リストスタイル）」です。 「list
CSS｜list-style リストスタイル（type・image・position）
ホームページ（ウェブサイト）制作において、テキストをいかに美しく読みやすく配置するかは、ユーザーの滞在時間を左右する非常に重要な要素です。この文字の行間や縦方向の揃え位置、そして改行のルールを細かくコントロールするために使用されるのが、CSSプロパティの「line-height」「vertical-align」「white-space」そして「line-br
CSS｜line-height・vertical-align・white-space・line-break 行間 縦方向の揃え位置 改行ルール
ホームページ（ウェブサイト）制作において、テキストの読みやすさ（可読性）は、ユーザーの滞在時間を左右する非常に重要な要素です。文字と文字の間の余白や単語と単語の間の余白を細かくコントロールするために使用されるのが、CSSプロパティの「letter-spacing」と「word-spacing」です。 「letter-spacing（レタースペーシング）」は、
CSS｜letter-spacing・word-spacing 文字・単語間の余白
ホームページ（ウェブサイト）制作において、画面上の特定の場所に要素を固定したり、画像の上にテキストを重ね合わせたりと、標準の規則にとらわれない自由なレイアウトを構築することは非常に重要です。この要素の配置方法（基準位置）をコントロールし、デザインの可能性を大きく広げるために使用されるのが、CSSプロパティの「position（ポジション）」です。 HTMLの
CSS｜position ポジション（top・bottom・left・right）
ホームページ（ウェブサイト）制作において、ページ内の画像やテキスト領域などの「幅」をコントロールすることは、見やすく整理されたレイアウトを構築する上で非常に重要です。この要素の横幅を指定するために使用されるのが、CSSプロパティの「width（ウィズ・ウィドゥス）」「max-width（マックスウィズ）」「min-width（ミンウィズ）」です。 「widt
CSS｜width・max-width・min-width 要素の横幅
ホームページ（ウェブサイト）制作において、ページ内の画像やテキスト領域の「高さ」をコントロールすることは、見やすく整理されたレイアウトを構築する上で非常に重要です。この要素の高さを指定するために使用されるのが、CSSプロパティの「height（ハイト）」「max-height（マックスハイト）」「min-height（ミンハイト）」です。 「height」は
CSS｜height（ハイト）・max-height・min-height 要素の高さ
ホームページ（ウェブサイト）制作において、特定の要素を視覚的に目立たせたり、ユーザーが現在どこを操作しているのかを明確に伝えたりすることは非常に重要です。その際に活躍するCSSプロパティが、「outline（アウトライン）」です。 「outline」は、HTML要素の輪郭の外側に線を引くためのプロパティです。枠線を引くプロパティとしては「border」がよく
CSS｜outline（color・style・width）・outline-offset 要素の外側の線
ホームページ（ウェブサイト）制作において、文字や画像などの要素を画面上でどのように重ね合わせるかは、デザインの表現力を大きく左右します。この要素の前後関係（手前と奥の重なり順）を制御するためのCSSプロパティが「z-index」です。画面の上から下、左から右への平面的な配置だけでなく、奥行きを持たせた立体的なレイアウトを構築する際に、このプロパティは非常に重
CSS｜z-index 要素の重なり順の制御と現代の適切な設計手法
ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「font」（font-family、font-size、font-size-adjust、font-stretch、font-style、font-variant、font-weight）についてのご説明です。 ホームページ（ウェブサイト）を制作する際、ユーザーに情報を伝えるための最も重要な
CSS｜font（family・size・size-adjust・stretch・style・variant・weight）
ホームページ（ウェブサイト）制作において、文字の色や要素の透明度を制御することは、デザインの印象を決定づけるだけでなく、ユーザーへの情報の伝わりやすさに直結します。 かつてのCSSでは、colorプロパティには16進数（#000000など）やカラーネーム（red、blueなど）を指定し、単純にテキストに色をつけるだけの役割が主流でした。しかし、現在のモダンな
CSS｜color（カラー、文字色）とopacity（透明度）
ホームページ（ウェブサイト）のデザインにおいて、文章と画像を美しく配置することは、ユーザーの閲覧体験を向上させるために非常に重要です。その中で、画像などの要素を左や右に寄せ、その周囲にテキストを回り込ませるレイアウトを実装する際に活躍するのが、CSSプロパティの「float（フロート）」と「clear（クリア）」です。 近年ではFlexboxやCSS Gri
CSS｜float（フロート）とclear（クリア）FlexboxやCSS Gridへの移行
ホームページのアクセシビリティ向上を考える上で、音声読み上げ機能への配慮は重要なテーマです。かつてCSSには、音声ブラウザやスクリーンリーダー向けに読み上げの音量や声の高さ、発音方法などを細かく制御するためのプロパティが多数用意されていました。しかし、これらは現在では非推奨、または廃止された扱いとなっています。この記事では、過去に使用されていたこれらの音声プ
【非推奨・廃止】CSSの音声プロパティ（volume・speak・pitch等）の概要と現在の扱い
ホームページ（ウェブサイト）制作において、四角い画像や要素を円形にくり抜いたり、複雑な多角形で切り取ったりする視覚的な表現は、デザインのクオリティを大きく引き上げます。かつて、このような要素の切り取り（クリッピング）をCSSのみで実現するために利用されていたのが「clip」プロパティでした。 しかし、Web技術が進化し、より高度で柔軟な表現が求められるように
CSS｜clip・clip-path 要素の切り抜き表現と描画
ホームページ（ウェブサイト）制作において、特定のテキストや画像を意図的に隠したり、ユーザーの操作に合わせて表示させたりする動きは頻繁に使用されます。この「要素の表示と非表示」をコントロールするために使用される代表的なCSSプロパティが、「display（ディスプレイ）」と「visibility（ビジビリティ）」です。 これら二つのプロパティは、どちらも画面上
CSS｜display（ディスプレイ）・visibility（ビジビリティ）要素の表示と非表示
ホームページ（ウェブサイト）制作において、日本語や英語などの「左から右」へ読む言語だけでなく、アラビア語やヘブライ語のような「右から左」へ読む言語を正しく表示することは、グローバルに事業を展開する上で非常に重要です。このテキストの書字方向（文字が流れる向き）を根本からコントロールするために使用されるのが、CSSプロパティの「direction」と「unico
CSS｜direction・unicode-bidi 書字方向の指定
ホームページ（ウェブサイト）制作において、マウスカーソルの形状やユーザーのクリック操作、テキストの選択動作などを適切に制御することは、使いやすいユーザーインターフェース（UI）を構築する上で非常に重要です。 かつては、要素の上にマウスを乗せたときのカーソル形状を変更する「cursor」プロパティのみが注目されがちでした。しかし、現代の多様なデバイスや複雑なレ
CSS｜cursor・pointer-events・user-select カーソル、クリック、テキスト選択のUI制御
ホームページ（ウェブサイト）制作において、要素と要素の境界を明確にし、視覚的な整理を行うために「枠線」は非常に重要な役割を持っています。この枠線のデザインや太さ、色をコントロールするために使用されるのが、CSSプロパティの「border（ボーダー）」です。 「border」は、枠線の種類を指定する「border-style」（実線、点線、破線など）、枠線の太
CSS｜border（style・width・color）border-collapse・border-spacing
ホームページ（ウェブサイト）制作において、ページの見た目を大きく左右し、事業のブランドイメージを視覚的に伝えるために「背景」の設定は非常に重要です。この要素の背景色や背景画像を細かくコントロールするために使用されるのが、CSSプロパティの「background（バックグラウンド）」です。 「background」は、背景に関する様々な設定を一括で指定できるプ
CSS｜background（attachment・color・image・position・repeat）背景
ホームページ（ウェブサイト）制作において、特定の画像やテキスト、あるいはレイアウト全体のサイズを拡大・縮小したい場面は数多く存在します。その際に古くから用いられてきたCSSプロパティのひとつが「zoom」です。かつてのブラウザ環境、特に古いInternet Explorerが主流だった時代において、このプロパティは要素のサイズを簡単に変更できる便利な記述とし
CSS｜zoom（ズーム）（非推奨）要素の拡大・縮小と現代の代替手法
ホームページ（ウェブサイト）制作において、文字や画像などのコンテンツを見やすく配置し、洗練された美しいデザインを構築するためには、「余白」のコントロールが非常に重要です。この余白を作り出す代表的なCSSプロパティの一つが「padding（パディング）」です。 「padding」は、特定の要素（枠線や背景を持つボックス）の「内側」に余白を設けるためのプロパティ
CSS｜padding パディング（top・bottom・left・right）内余白
ホームページ（ウェブサイト）制作において、画面上のデザインだけでなく、印刷プレビューやPDF出力など、紙の媒体やページ区切りが存在する環境で文書の美しさを保つことは非常に重要です。段落の途中で行が不自然に分断されてしまう現象を防ぐために使用されるのが、CSSプロパティの「widows」と「orphans」です。 「orphans（オーファン）」は、段落の最初
CSS｜orphans（オーファン）・widows（ウィドー）印刷時の段落行の制御
ホームページ（ウェブサイト）制作において、HTMLの文書構造を崩すことなく、画面上にテキストや記号などの装飾を追加する技術は非常に重要です。この「HTMLには書かれていない情報を、CSS側から擬似的に差し込む」という役割を担うのが、CSSプロパティの「content（コンテント）」と「quotes（クオート）」です。 「content」は、CSSの疑似要素で
CSS｜content（コンテント）・quotes（クオート）疑似要素と引用符
ホームページ内のページ統廃合や長期間運用してきたページのリニューアルを進める際、デザインの刷新やコンテンツの整理と並行して行いたいのがソースコードの見直しです。とくに何年も前に制作されたまま手つかずになっているページには、現在のWeb標準ではすでに「廃止」や「非推奨」となっている古いCSSプロパティが残存しているケースが少なくありません。 かつてのWeb制作
CSS｜behavior・ime-mode・layout-grid・marker-offset・include-source・layer-background（廃止・非推奨）
margin: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「margin」についてのご説明です。 ホームページ制作・作成において、margin（マージン）は、ページ内の対象要素の周辺四辺の余白（マージン）をまとめて指定します。padding（パディング）が内余白なのに対して、margin（マージン）は、要素の外側の余白を指定するC
CSS｜margin マージン（top・bottom・left・right）
border-right: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「border-right」についてのご説明です。 ホームページ制作・作成において、border-right（ボーダーライト）は、ホームページ（ウェブサイト）のページに設置するボーダー（枠）の右辺ボーダーに関するスタイルの簡略指定（色・スタイル・太さを指定）を行
CSS｜border-right
border-left : ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「border-left」についてのご説明です。 ホームページ制作・作成において、border-left（ボーダーレフト）は、ホームページ（ウェブサイト）のページに設置するボーダー（枠）の左辺に関するスタイルの簡略指定（色・スタイル・太さを指定）を行う際に使用し
CSS｜border-left
border-bottom : ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「border-bottom」についてのご説明です。 ホームページ制作・作成において、border-bottom（ボーダーボトム）は、ホームページ（ウェブサイト）のページに設置するボーダー（枠）の下辺ボーダーに関するスタイルの簡略指定（色・スタイル・太さを指
CSS｜border-bottom
ホームページ（ウェブサイト）のユーザーインターフェースを細部まで調整する上で、スクロールバーのデザインは長年にわたり注目されてきました。現在では多くのモダンブラウザが標準的なCSSやWebKit拡張に対応していますが、かつてインターネットエクスプローラー（IE）が主流だった時代には、IE独自のプロパティを用いてスクロールバーの色を細かくカスタマイズすることが
CSS｜scrollbar スクロールバー
ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「counter-increment」「counter-reset」についてのご説明です。 ホームページの運用や記事の更新を続ける中で、見出しや図表などの番号を手動で入力していると、後から項目を追加したり削除したりした際に、すべての番号を振り直す手間が発生します。このような修正作業は、長期的な
CSS｜counter-increment・counter-reset CSSカウンター
filter: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「filter」についてのご説明です。 ホームページ制作・作成において、filter（フィルター）の利用で、ページに様々な視覚効果を与える事ができます。 filter 様々な視覚効果を与える（IE） ホームページにCSSのフィルター（filter）を適用することで、対象要素
CSS｜filter フィルター
border-top : ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「border-top」についてのご説明です。 ホームページ制作・作成においてborder-top（ボーダートップ）は、ボーダー（枠）上辺に関するスタイルの簡略指定（色・スタイル・太さを指定）を行う際に使用します。 border-top 上辺ボーダー（枠）に関する
CSS｜border-top
