2025.05.06
アジェンダ
- CSSの記述、CSSのプロパティについて
- CSSのプロパティについて
- CSSのプロパティについて、検証ツールの活用
- 本日の講義のまとめ及び自習
- 本日の講義のまとめ及び自習
テーマ：CSSのプロパティを理解しましょう
CSSの記述
セレクタの得点（L3-8）
プロパティの書き方によっては違う命令を聞いてしまう。
セレクタ（点数）が同じ場合は、下の記述のいうことを聞く。
+1 タグの名前 <要素名>
+10 class名
⁺100 id(#～)
+1000 style属性（<div style=”～”>）
最優先 !important（font-size:140% !important;）
プロパティについて
background系（L6-2）
例）background-color: 背景色 ;
- transparent → 透明
- image → 背景画像ファイル
- attachment → 画像が一緒にスクロールするかどうか
- repeat → 背景画像の繰り返し
- size → 箱と画像サイズが違うときの処理方法を指定
- position → 開始位置の指定
text系プロパティ（L5-2）
テキストに対するプロパティ
- color: 文字色 ; → 文字色
カラーネーム・16進数6桁など - opacity: 透明度 ; → 透明（背景も文字も）
0～1の値で透明度を指定（1＝不透明）
背景色のみに支持することで文字は薄くならない - text-align: left/right/center/end/justify ;
書き出し位置 - decoration 文字飾りや強調
-color 色
-line 線
-style 線の種類、形
-thickness 線の太さ（％・px） - shadow 文字に影をつける
text-shadow: 値 ;
2px（左に）, 2px（下に）, 2px（ぼかし半径）, red（色）
-2px（右に）,-2px（上に）
font系プロパティ（L5-3）
フォントに対するプロパティ
指定がない場合はブラウザデフォルトとなる
例）font-family: フォントファミリー ;
フォントは端末によるので、数種類指定しておく。指定fontがない場合はブラウザに任せると指定しておくとよい。
- -sans serif → ゴシック
- serif → 明朝
- cursive → 筆記
- fantasy → 飾り文字
- monospace → 等幅
Googleには無料のフォントがある
font sizeプロパティ
font-size: ;
フォントサイズ → フォントのサイズ
ベースライン → フォントの下部（注：英字のベースライン）
line-heightについて → 改行位置、隙間と上下に振り分ける
単位 → px, em, rem, ％
font-weight: ;（大浜先生のサイト、パーツ内参照 100.400.900など）
-normal
-bold
-lighter
-bolder
font-style
-normal
-italic → イタリック
-oblique → 斜体
line-height（行の高さ）
word-wrap:break-all;（英単語が入りきらない場合改行）
white-space
tab-size
list系プロパティ（L5-4）
list-style-type: リストのマーカー;
マーカーの種類を指定できる
・
1.2.3
ⅰ.ⅱ.ⅲ
あ.い.う
-position → 位置
-image → イメージ画像に変更
CSS:レイアウト系プロパティ（L4-2）
width → 内容の幅（ボーダーの幅）
＊現在はボーダー、昔はコンテンツ幅を指定していた
max-width → 最大値幅
min-width → 最小値幅
height → 内容の高さ（幅により変化するので普通は指定しない）
float/clear（回り込み、横並び）
デフォルトはboxが縦に並んでしまう
回避するにはfloatを使用する
floatは指定したものが浮いた状態となる
浮いた状態を止める指示をする必要がある
-clear both
-clear fix:;after（最後に）
親にoverflow:hidden;
親の箱からはみ出したフロートは終わりにするという指示
displayプロパティ
- インライン（a,strong,span）
- インラインブロック（img）
- ブロック（h1,p,ul,li,div）
横並び
- インライン
- インラインブロック
縦並び
- ブロック
displayをつけることで並びの指示や違う属性に切り替えられる
- flex → 並び指定
- grad → セルを指定して並びを指定
overflow → boxからはみ出た文字に対する指示
-hidden → はみ出しが見えなくなる
-scroll → ハコ内でスクロールが出来る（はみ出ていなくても）
-auto → はみ出ている場合のみスクロール
＼ 最新情報をチェック ／
コメント