CSS

CSSのtext-decorationプロパティは、選択した要素のテキストに装飾を適用するために使用します。値として「underline（下線）」「overline（上線）」「line-through（打ち消し線）」などを指定でき、色やスタイルも組み合わせて設定可能です。また、このプロパティはtext-decoration-line（装飾線の種類）、text-decoration-color（装飾線の色）、text-decoration-style（装飾線のスタイル）という3つの個別プロパティを一括して指定できるショートハンド（省略記法）でもあります。基本構文text-decorationプロ

はじめにデフォルトでは、HTML内のすべてのリンク（<a>要素）には下線が自動的に表示されます。この下線は、CSSのtext-decorationプロパティを使うことで簡単に削除できます。デザイン性の高いナビゲーションメニューやボタン風のリンクを作成したい場合などに、よく使われるテクニックです。構文CSSのtext-decorationプロパティの基本的な構文は以下のとおりです。Selector {    text-decoration: /*値*/ }下線を削除する場合は、値としてnoneを指定します。使用例1：シンプルな下線の削除以下の例では、a要素に対して

CSSのtext-transformプロパティを使うと、要素内のテキストの大文字・小文字の表示形式を簡単に制御できます。指定できる値は、capitalize、lowercase、uppercase、full-width、full-size-kana、noneの6種類です。 構文 CSSのtext-transformプロパティの構文は以下のとおりです。 Selector {    text-transform: /*value*/ } 指定できる値の一覧 capitalize … 各単語の先頭文字を大文字にします uppercase … すべての文字を大文字にします lo

リンクは、目的に応じて自由にスタイルを設定できます。リンクは通常のテキストと視覚的に区別できるスタイルにすることが推奨されています。リンクの各状態におけるデフォルトのスタイルは、以下の表のとおりです。 リンク状態デフォルトの色 Active（アクティブ・クリック中）#EE0000 Focus（フォーカス時）#5E9ED6 または類似の青系のアウトライン（Windows・Macの場合）Linuxでは #F07746 のアウトライン（テキストの色は変わりません） Hover（ホバー時）#0000EE Link（未訪問リンク）#0000EE Visited（訪問済みリンク）#551A8B

CSSのfont-styleプロパティは、要素のテキストに対して「通常（normal）」「イタリック（italic）」「斜体（oblique）」のいずれかのスタイルを指定するために使用されます。italicはフォント自体が持つ斜めの書体を利用するのに対し、obliqueはテキストを指定した角度で傾けられる点が特徴です。 構文 CSSのfont-styleプロパティの構文は以下のとおりです。 Selector { font-style: /*値*/ } 指定できる主な値 normal … 通常の書体を表示します（初期値）。 italic … フォントのイタリック体（斜めの書体）を表示

CSSを使えば、リンクのテキストに自由に色を付けることができます。要素内のテキストの色を指定するには、color プロパティを使用します。さらに、リンクの状態に応じて色を変えたい場合は、疑似クラスを活用します。疑似クラスは :link → :visited → :hover → :active の順序で記述するのが基本です。これは「LVHAルール」とも呼ばれており、この順序を守ることで各スタイルが意図どおりに適用されます。構文CSSの color プロパティの基本構文は以下のとおりです。Selector {    color: /*値*/ }サンプルコード1次の例では、リン

アウトライン（outline）とは？ CSSのアウトライン（outline）は、要素の周囲に線を引くためのプロパティです。最大の特徴は、レイアウト上のスペースを占有しないという点にあります。ボーダー（border）が設定されている場合は、そのボーダーの外側に描画されます。 アウトラインは、要素を視覚的に強調（ハイライト）する目的でよく使われます。たとえば、キーボード操作でフォーカスを受けたリンクやフォーム部品を目立たせるといった使い方が典型的です。なお、Firefoxなど一部のブラウザでは、フォーカス中の要素に自動的に細いアウトラインが表示されることがあります。 ただし、アウトラインには次のよ

CSSでは、list-style-type、list-style-image、list-style-positionといったプロパティを使うことで、順序なしリスト（ul）や順序付きリスト（ol）のスタイルやマーカーの位置を自由にカスタマイズできます。 これらのプロパティを活用すれば、デフォルトの「●」や「1.」といった記号を、ローマ数字、アルファベット、四角形、さらには独自の画像に変更することも可能です。本記事では、具体的なコード例とともにリストの整形方法をわかりやすく解説します。 list-styleプロパティの基本構文 list-styleは、上記3つの個別プロパティ（type / ima

HTMLリストの3つの種類 HTMLには、用途に応じて使い分けられる3種類のリストがあります。 順序なしリスト <ul> 箇条書き形式のリストです。項目同士に特定の順序関係がなく、デフォルトでは黒丸（ビュレット）が先頭に表示されます。 順序付きリスト <ol> 番号付きのリストです。手順やランキングなど、項目に順序がある場合に使用します。 定義リスト <dl> 用語とその定義（説明文）をセットで表示するためのリストです。用語は<dt>タグ、説明は<dd>タグで記述します。 これらのリストは互いに入れ子（ネスト）にできるほか、CS

CSSを使えば、HTMLの<table>要素やその内部要素に対して自由にスタイルを定義できます。テーブルはデータを見やすく整理するための重要な要素ですが、デフォルトのままでは味気なく表示されがちです。そこで活躍するのが、テーブル専用のCSSプロパティです。ここでは、テーブルのスタイリングで特によく使われる以下のプロパティについて詳しく解説します。border — テーブルやセルの枠線を定義するプロパティです。border-width（太さ）、border-style（種類）、border-color（色）を一括して指定できます。border-collapse — 隣接するセル同士の

テキストを拡大縮小可能なサイズにしたい場合は、font-sizeプロパティをem単位で指定します。デフォルトでは1emは16px（または12pt）に相当し、その値は親要素のフォントサイズを基準とした相対値になります。この特性により、ページ全体の文字サイズを柔軟かつ一貫性のある形で管理できます。 構文 CSSのfont-sizeプロパティの基本構文は以下のとおりです。 Selector {    font-size: /*値*/ } 例1：divとspanでのem指定 次の例では、font-sizeプロパティをem単位で設定する方法を示しています。 <!DOCTYPE

CSSでは、フォントサイズの指定にパーセント（%）とemを組み合わせて使用できます。この手法を用いることで、ブラウザ間での表示の互換性が向上し、異なる環境でも一貫したテキストサイズを実現できます。親要素に対する相対的な割合でサイズを設定できるため、レスポンシブデザインやアクセシビリティの観点からも推奨される方法です。基本構文CSSのfont-sizeプロパティの基本的な構文は以下のとおりです。Selector {     font-size: /*値*/; }使用例1：bodyにパーセント、子要素にemを指定以下の例では、body要素に「80%」を指定し

CSSの font-weight プロパティは、要素内のテキスト文字の太さ（ウェイト）を定義するために使用されます。見出しや強調したいテキストを目立たせる際に欠かせないプロパティで、キーワードによる指定と数値による指定の2つの方法があります。主な値の一覧normal … 標準の太さ（数値では400に相当）bold … 太字（数値では700に相当）bolder … 親要素より一段階太い太さlighter … 親要素より一段階細い太さ100〜900 … 数値で細かく指定（100が最も細く、900が最も太い）構文CSSの font-weight プロパティの構文は以下のとおりです。Selector

CSSの background-repeat プロパティは、背景画像が要素内でどのように繰り返されるか（タイル状に敷き詰められるか）を定義するために使用されます。デフォルトでは背景画像は縦横両方向に繰り返されますが、このプロパティを使うことで繰り返しの方向や間隔を細かく制御できます。構文CSSの background-repeat プロパティの基本構文は以下のとおりです。Selector {    background-repeat: /*値*/ }主な値repeat：画像を縦・横の両方向に繰り返して表示します（初期値）。repeat-x：水平方向のみ繰り返します。repe

CSSの隣接兄弟セレクター（Adjacent Sibling Selector）は、ある要素の直後に隣接している兄弟要素を選択するためのセレクターです。最初のセレクターに一致した要素の「すぐ後ろ」に続く要素だけが対象となり、途中に別の要素が挟まっている場合は選択されない点に注意してください。 構文 隣接兄弟セレクターの基本的な書式は次のとおりです。 element + element {     /*スタイル宣言*/ } 「+」（プラス記号）の左側で基準となる要素を指定し、右側でその直後に隣接する要素を指定します。 例1：div要素に適用する 次の例では、div + div

CSSのtext-indentプロパティを使用すると、ブロック要素内のテキストの1行目にインデント（字下げ）を設定できます。段落の冒頭を字下げして文章を読みやすくしたい場合などに活用できる、便利なプロパティです。 構文 CSS text-indentプロパティの基本構文は以下のとおりです。 Selector { text-indent: /*value*/ } 指定できる主な値は次のとおりです。 <length>：px、em、cmなどの絶対値または相対値でインデント幅を指定します。 <percentage>：包含ブロックの幅に対する割合（%）で指定します。 負

CSSのword-spacingプロパティは、要素内の単語と単語の間隔(スペース)を指定するために使用します。英文テキストの可読性を高めたり、デザインに余白感を持たせたい場合に活用できる便利なプロパティです。構文word-spacingプロパティの基本的な構文は以下のとおりです。Selector { word-spacing: /*value*/ }指定できる主な値normal: ブラウザの標準的な単語間隔を適用します(初期値)。長さ(px、em、remなど): 数値で単語間隔を指定します。負の値を指定すると間隔が狭まります。使用例1次の例では、入れ子になったdiv要素に対してword

CSSを使えば、リンクを自由自在にスタイリングできます。文字に色をつけたり、背景を設定したり、サイズを変更したりといった書式設定はもちろん、アニメーションを組み合わせれば、マウス操作に応じた心地よい視覚効果も簡単に実現できます。 擬似クラスは「LVHA」の順序で記述する リンク関連の擬似クラスを正しく機能させるには、次の順序で記述することが重要です。 :link … 未訪問のリンク :visited … 訪問済みのリンク :hover … マウスカーソルが乗っている状態 :active … クリックされている瞬間 この順序は各擬似クラスの頭文字を取って「LVHA順」と呼ばれます。順序を守ら

CSSのcolorプロパティは、要素内のテキスト（文字）の色を指定するために使用します。色の値には、色名キーワード（red、blueなど）、16進数カラーコード（#ff0000など）、rgb()・hsl()などの関数表記が利用でき、Webページの文字色を柔軟にコントロールできます。 構文 CSSのcolorプロパティの基本構文は以下のとおりです。 セレクタ { color: /* 値 */ } 色の主な指定方法 キーワード： red、blue、rebeccapurple など定義済みの色名 16進数（HEX）： #ff0000 のような形式 RGB関数： rgb(255, 0, 0)

text-alignプロパティとはCSSのtext-alignプロパティを使用すると、要素内のテキストを水平方向に配置できます。指定できる値は以下の4種類です。left … 左揃えright … 右揃えjustify … 両端揃えcenter … 中央揃え構文CSS text-alignプロパティの構文は次のとおりです。Selector { text-align: /*値*/ }使用例1：div要素とp要素への適用以下の例では、CSS text-alignプロパティの基本的な使い方を示しています。<!DOCTYPE html> <html> <head&g