HTML CSS CSS 変数
CSS 変数CSS変数（カスタムプロパティ）とはCSS変数は、値を1か所で定義し、それを複数の場所で再利用できる便利な機能です。 <div class="container"> <div class="card"> <h2 class="c...
HTML CSS
HTML CSS HTML CSS CSS ネスト
CSS ネスト 入れ子CSSのネストは、CSSプリプロセッサ（Sass、Less）で一般的でしたが、最近のCSSでネイティブにサポートされるようになりました。これにより、セレクタを入れ子にして、より読みやすく、構造的なCSSを書くことができ...
HTML CSS CSS コンテナクエリ@container
CSS コンテナクエリコンテナクエリとは従来のメディアクエリーとは異なり、ビューポートではなく、特定のコンテナ要素のサイズに基づいてスタイルを変更できます。以下はコンテナクエリの具体例です。 <div class="card-contain...
HTML CSS CSS :has()セレクター
CSS :has():has()の主な特徴とは？子要素や子孫要素の存在に基づいて親要素をスタイリングできる複数の条件を組み合わせることが可能否定セレクター:notと組み合わせることもできるレスポンシブデザインでの条件分岐にも活用できる以下は...
HTML CSS CSS clamp()関数
CSS clamp()関数の使い方clamp()の基本構文は？font-size: clamp(1rem, 2vw + 1rem, 2rem);最小値（１rem)より小さくならない。推奨値2vw+1remでビューポイントに応じて変化最大値２...
HTML CSS CSS グリッドレイアウト サブグリッド
CSS サブグリッドサブグリッドとは、親グリッドアイテムの中に作られる子グリッドですgrid-template-columns: subgridまたはgrid-template-rows: subgridで指定します親グリッドのトラックサイ...
HTML CSS 論理プロパティ
論理プロパティとは？論理プロパティは、CSSにおける比較的新しい概念で、文書の書字方向や読み取り方向に応じて適切に動作するプロパティです。マージン関連:margin-inline-startmargin-inline-endmargin-b...
HTML CSS CSS vertical alignの使い方
css vertical alignの使い方CSSのvertical-alignプロパティは、インライン要素や表のセル内での垂直方向の配置を制御するために使用されます。以下に主な特徴と使用方法を説明します：適用対象:インライン要素（inli...
HTML CSS CSS position: stickyとposition:fixed
position:stichyとposition:fixedの違い １初期位置：Sticky: 通常のドキュメントフロー内に配置されます。スクロールが特定のしきい値（この例ではtop: 0）に達するまでは通常の要素として振る舞います。Fi...
HTML CSS CSS borderの使い方
css borderの使い方cssでborderでデザインする方法を説明します。borderの実線<h1>ボーダー</h1>h1 { border: 2px solid #000000;}borderの点線 h1 { border: 2px...