「position:fixed」と「width:100%」を設定した要素は、window幅いっぱいに広がる。bodyに幅指定があった場合でも、そのサイズを突き抜ける。

www.granfairs.com snagimo.com

https://jobtech.jp/html_css/2951/

〈手順１〉viewportを記述 viewportとは htmlのheadタグ内にviewportを記述する viewportで指定できる値 〈手順２〉メディアクエリを設定する メディアクエリとは メディアクエリで使える値 CSSに書き入れる場合 スマホ用のデザイン定義 PC用のデザイン定義 …

positionプロパティの用途 記述方法 positionの値 positionと一緒に使うプロパティ positionプロパティの用途 記述方法 要素名{ position:値; } positionの値 static （初期値）通常位置で表示 relative 現在位置を基準に表示位置を決める absolute 親要素の…

ul(ol)セレクタにプロパティと値を設定 記述例 liセレクタにプロパティと値を設定 記述例 html css ul(ol)セレクタにプロパティと値を設定 記述例 ul{ list-style-type:none;/*マーカーを非表示*/ padding-left:20px; padding-right:20px; display:flex;/*li…

基本 折り返し設定 配置順設定 逆順（横方向） 逆順（縦方向） 順序の指定 折り返し と 配置順 を同時に設定 逆順で横並び＆折り返し有り row-reverse wrap 逆順で積み重ね＆折り返し有り 横方向位置揃え 初期値（左揃え） 中央揃え 等間隔揃え（左右余白な…

要素を浮かせて配置する 要素の回り込み floatのルール 回り込みの解除 表示方法の定義 要素を浮かせて配置する 要素名{ float:値; } 要素の回り込み floatのルール 要素が浮く 後に続くコンテンツが逆側に回り込む 上下マージンが加算（その結果、回り込ん…

idセレクタ classセレクタ セレクタのグループ化 子孫セレクタ a要素に対する疑似クラス 参照 idセレクタ classセレクタ セレクタのグループ化 子孫セレクタ a要素に対する疑似クラス ※通常、検証ツールのCSSパネルには表示されないので、状態名をクリック …

デフォルトCSS ブラウザがあらかじめ持っているCSS。このCSSにより、制作者がCSSを記述しなくても最低限の見た目が保障される。 定義内容を確認するには 検証ツール⇒「Elements」タブ⇒「Style」パネル⇒「user agent stylesheet」の内容を確認 ResetCSS ユー…

文字サイズを定義 背景色を定義 背景画像を定義 文字色を定義 枠線を定義 枠線の隙間をなくす セル余白を定義 幅を定義 列幅を決定する方法を定義 高さを定義 セル内の行揃えを定義 セル内の縦方向揃え位置を定義 テキスト折り返しを禁止する 文字サイズを定…

コンテンツ領域 パディング領域 ボーダー領域 マージン領域 個別に指定 ボックスサイズの算出方法を定義 サイズを定義する値 コンテンツ領域 要素名{width:値;} 要素名{height:値;} 詳細記事へ⇒ パディング領域 要素名{padding:値;} 詳細記事へ⇒ ボーダー領…

エラー箇所特定手順 CSSパネルの状態 １．「！」と打消し線が表示されている ２．「！」と打消し線が表示されている＆値にプロパティ名が含まれている ３．記述したはずのセレクタごと表示されない ４．「！」と打消し線が複数表示されていて値がない エラー…

マーカーを定義 マーカー画像を定義 マーカー位置を定義 マーカーを一括定義 リストのインデントを定義 バックグランドプロパティでマーカー画像を設定 マーカーを定義 ul{ list-style-type:値; } プロパティ名 値 説明 list-style-type［CSS 1］ none マー…

マージン領域（外余白）を定義 上下マージンの算出方法 上下パディング・マージンの違い 親子マージンの算出方法 左右マージンの「auto」 マージン領域（外余白）を定義 要素名{ margin:値; } 値が1つの場合・・・margin:上下左右の値; 値が2つの場合・・・m…

ボックス構造 ボーダー領域の種類（線種）を定義 ボーダー領域の幅を定義 ボーダー領域の色を定義 ボーダー領域を一括定義 ボーダーを角丸にする ボックス構造 ボーダー領域の種類（線種）を定義 要素名{ border-style:値; } none solid double dashed botte…

ボックス構造 コンテンツ領域の幅を定義 コンテンツ領域の高さを定義 ボックス構造 コンテンツ領域の幅を定義 要素名{ width:値; } コンテンツ領域の高さを定義 要素名{ height:値; }

パディング領域（内余白）を定義する パディング領域（内余白）を定義する 要素名{ padding:値; } ※個別に設定することも可能

文字の色を定義 文字の大きさを定義 文字の書体を定義 Webフォント 文字の太さを定義 文字のスタイルを定義 文字の装飾を定義する 行揃えを定義 インデントを定義する 行の高さを定義 文字の色を定義 要素名{ color:値; } 文字の大きさを定義 要素名{ font-s…

背景色を定義する 背景画像を定義する 背景画像の繰り返しを定義する 背景画像の開始位置を定義する 背景画像の固定・移動を定義する 背景画像のサイズを定義する サイズを定義する値 背景のスタイルを一括定義する 複数の背景画像を定義 背景色を定義する …

CSSの3つの適用方式 ①インライン方式 ②埋め込み方式 ③外部リンク方式 CSSの3つの適用方式 ①インライン方式 HTML内の要素にstyle属性を追記して直接適用させる方法 <要素名 style="プロパティ:値;"> ②埋め込み方式 HTMLのhead要素内にstyleタグを使って記述し…

CSS記述のルール コメント CSS記述のルール コメント /*コメント*/