基金訓練(Webデザイン・プログラミング科)の47日目に行ってまいりました。
本日は、HTML&CSSプログラミングの実習です。
本日の内容は下記のとおりです。
１．CSSのスタイル属性(プロパティ)
枠(ボーダー)に関するスタイル属性
枠(ボーダー)の太さ
- プロパティ
- border-width
border-top-width
border-right-width
border-bottom-width
border-left-width - 値
-
- 太さ(単位付数値)
- thin 細い線
- thick 太い線
- medium 標準
※枠の表示には、これにあわせてborder-styleの指定が必要。
枠(ボーダー)の形状
- プロパティ
- border-style
border-top-style
border-right-style
border-bottom-style
border-left-style - 値
-
- none 枠線なし
- hidden 枠線なし
- dotted 丸い点線
- dashed 破線
- solid 実線
- double 二重線
- groove 立体枠(窪み)
- ridge 立体枠(隆起)
- inset 立体枠(内側全体が窪み)
- outset 立体枠(内側全体が隆起)
※枠の表示には、これにあわせてborder-widthでnone以外の指定が必要。
枠(ボーダー)の色
- プロパティ
- border-color
border-top-color
border-right-color
border-bottom-color
border-left-color - 値
-
- カラーの値
※指定がない場合、colorの値で表示される。
枠(ボーダー)の一括指定
- プロパティ
- border
border-top
border-right
border-bottom
border-left - 値
-
- border-width,border-style,border-colorの値を半角スペースで区切って続けて指定
２．画像について
画像サイズの記述(width、height)
- ユーザビリティを考える上で、回線速度の遅い環境でテキストを先に読み込めるようにする為に必要。
画像解像度
- Photoshopなどを使用して、72dpiにする。
今日のポイント
- トップページは縦方向もモニターの範囲に収まるのが望ましい。
