第05回Web講座2018

Transcript

1. ネットワークチーム 第５回 北海道科学大学 電子計算機研究部
2. INDEX ⚫ ボックスモデル ⚫ 背景のプロパティ ⚫ Marginプロパティ ⚫ Paddingプロパティ ⚫ Borderプロパティ ⚫ Marginの相殺 ⚫ 演習 - background-attachment 2
3. ボックスモデル
4. ボックスモデルとは 文書内の要素は、ボックスと呼ばれる 四角形の領域を持っている 4
5. ボックスモデルとは Content 内容（文字や画像）が表示される領域 Padding Content と Border の間の余白領域 Paddingプロパティで表示を指定する Border 枠線 ※余白ではない borderプロパティで表示を指定する backgroundで設定した画像は デフォルトではここまで表示される Margin 一番外側の余白 marginプロパティで表示を指定する 5
6. ボックスサイズの確認方法 1. デベロッパーツールを起動して 左側のカーソルアイコンをクリック 2. 確認したい要素をクリック 3. デベロッパーツールの「Elements」タブ内の 「Styles」の一番下でボックスサイズが確認できる 6
7. 背景のプロパティ
8. 背景のプロパティ 8 プロパティ 用途 background-color 背景色を指定する background-image 背景画像を指定する background-repeat 背景画像のリピートの仕方を指定する background-position 背景画像の表示開始位置を指定する background-attachment スクロールした際の表示方法を指定する background-clip 背景画像を表示する領域を指定する background-size 背景画像のサイズの指定する background-origin 背景画像の基準位置を指定する
9. background-color 9 background-color : [カラーコード又はrgb()]; 構文 記述例 要素の背景色を指定する。 色の指定方法は前回紹介したcolorプロパティと同じ。 background-color: #FF0000; background-color: #F00; background-color: rgb(255,0,0); background-color: rgba(100%,0%,0%,40%);
10. カラーコード（前回） color: #FF0000; color: #F00; 10 カラーコードによる指定 16進数（６or３)桁で指定する方法。 #記号の後、前から、赤 緑 青 の順に各色の濃さを指 定する。 光の三原色
11. rgb（前回） color: rgb(255,0,0); color: rgba(100%,0%,0%,40%); color: rgba(255,0,0,0.4); 11 rgbによる指定 rgb() を使用して各色の濃さを指定する。 括弧内で 赤 緑 青 の順にカンマ区切りで 数値(0-255) または 割合(0%-100%) を指定する。 rgba() は、上記に加え透明度を指定することが 出来る。数値で指定する場合は 0-1 で指定する。
12. background-image 12 background-image: url[画像のパス]; 構文 記述例 要素の背景画像を設定する。 background-image: url(“../img/sample.png”);
13. background-repeat 13 background-repeat : [繰り返し方法] ; 構文 記述例 背景画像の繰り返し方法を指定する background-repeat: repeat;
14. background-repeat 14 指定方法 値 用途 repeat 初期値 敷き詰める repeat-x 水平方向に並べる repeat-y 垂直方向に並べる no-repeat 一つだけ表示する（繰り返さない）
15. background-repeat 15 repeat repeat-x repeat-y no-repeat
16. background-position 16 background-position: [水平位置] [垂直位置] ; 構文 記述例 背景画像の表示位置を指定する background-position: center top;
17. background-position 17 指定方法 水平方向 垂直方向 left top center center right bottom [数値] + [単位] [数値] + [単位] 初期値 初期値 0% 0%
18. background-position 18 left top center bottom 画像サイズ 400×300 100px 200px
19. background-attachment 19 background-attachment : [表示方法] ; 構文 記述例 背景画像の表示位置を指定する background-attachment : fixed;
20. background-attachment 20 指定方法 値 用途 scroll 初期値 背景画像も一緒にスクロール （要素に対して固定） fixed スクロールしない （画面に対して固定） local 要素の領域に固定（後述）
21. background-clip 21 background-clip : [表示領域] ; 構文 記述例 背景画像を表示する領域（ボックスモデル）を指定する background-clip : border-box;
22. background-clip 22 指定方法 値 用途 border-box 初期値 Border領域まで表示する padding-box Padding領域まで表示する content-box Content領域のみに表示する
23. background-size 23 background-size : [値] ; 構文 記述例 背景画像のサイズを指定する background-size: contain; background-size: 100px 50px;
24. background-size 24 指定方法 値 用途 auto 初期値 元画像からの縦横比を変えずに表示 contain 背景領域に収まる最大サイズで表示する cover 背景領域を完全に覆うサイズで表示する [数値][単位] 幅と高さを半角スペースで区切って指定する 値が１つの場合、２つ目はauto
25. background-size 25 表示例
26. background 26 background : [-color] [-image] [-repeat] [-position] [-attachment] [-clip] [-size] [-origin]; 構文 記述例 前述の要素を一括で指定する（順不同） -sizeプロパティの値は、-positionプロパティの後に スラッシュ(/)で続けて指定 /* 単一の画像、中央寄せかつ縮小 */ background: no-repeat center/80% url("../img/image.png");
27. Marginプロパティ
28. Margin 28 margin : [値（1～4個）] ; 構文 記述例 要素同士の間隔・余白を一括で指定するプロパティ 値は１～４個 margin: 10px 20px 30px 40px; /* 上10px 右20px 下30px 左40px */
29. Margin 29 指定方法 値の数 用途 1 上下左右全てのマージンが指定した値になる 2 1つ目が上下、2つ目が左右の値になる 3 1つ目が上、2つ目が左右、3つ目が下の値 4 上、右、下、左の順に対応した値になる（時計回り）
30. Paddingプロパティ
31. Padding 31 padding : [値（1～4個）] ; 構文 記述例 要素内の空白（BorderとContentの間隔）を指定する 指定方法は margin と全く同じ padding: 10px 20px 30px 40px; /* 上10px 右20px 下30px 左40px */
32. Borderプロパティ
33. Border 33 border : [-width] [-style] [-color] ; 構文 記述例 Border に関する指定を一括で行う。 border: 10px solid #f00; /* 太さ:10px スタイル:実線 色:赤 */
34. Borderを上下左右 別々に指定したい 34 1. border-top, border-bottom, border-left, border-right を用いる border-top: 10px solid #f00; /* 上の線 太さ:10px スタイル:実線 色:赤 */ border-width: 1px 2px 3px 4px; /* 太さ 上:1px 右:2px 下:3px 左:4px*/ 2. border-width, border-style, border-color で太さ スタイル、色について上下左右に別々の値を指定する
35. Marginの相殺
36. Marginの相殺 36 margin.html margin.css h1のマージン 20px pのマージン 30px ２つの要素の間隔は 50px になるはず！
37. Marginの相殺 37 現実 同じ長さ (30px)
38. Marginの相殺 38 上下に二つのマージンが重なり合う際 ⚫ 符号が同じ場合、値が大きい方が優先される 30px > 20px ... 30px ⚫ 符号が異なる場合、合算値になる 30 – (-20) = 50 px このような状態をマージンの相殺という
39. 演習９ background-attachment
40. 演習９ 40 ⚫ 適当な縦長の画像ファイルを用意 （ 壁紙位の大きさのもの 横長の画像もあると良い） ⚫ それを作業用フォルダ内のimgフォルダに入れて わかりやすいファイル名に変更 ⚫ 次のページの通りにhtml, cssファイルを作成 （ファイル名はattachment.htmlなどに）
41. 演習９ 41 attachment.html
42. 演習９ 42 attachment.css 次ページへ続く
43. 演習９ 43 attachment.css
44. 本日はここまで お疲れ様でした