Download to read offline
![その他
• 「^」で一個上の階層に戻る
• 「要素名[属性名=“属性値”]」で指定した属性と属性値を持つ要素
を補完する](https://image.slidesharecdn.com/random-150522063959-lva1-app6891/85/slide-15-320.jpg)
![実践
※[ファイル名]の部分は自分が
入れた画像のファイル名で置き
換える](https://image.slidesharecdn.com/random-150522063959-lva1-app6891/85/slide-40-320.jpg)
第五回ネットワークチーム講座資料
- 1.
- 2. 概要 • Emmetとは • Emmetの使い方 •大きさを指定するプロパティ • 背景に関するプロパティ
- 3.
- 4. Emmetの使い方 ↓クリック 1. Atomの画面右下にある「Plain Text」をクリック 2.出てくるテキストボックスに「HTML」と入力 ↑入力
- 5.
- 6. Emmetの使い方 4. 要素名を打ち込んでtabキーを押すと、開始タグ・終了タグ・必 須属性の補完を行う ここでは<head>内で linkと打ち込んで tabキーを押す （hrefの属性値は”css/emmet.css”としておく） tabキー
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. 要素の大きさの指定 • width ･･･幅の指定 • height ･･･ 高さの指定 共に 数値 または ％ で指定する
- 20.
- 21. color 文字色の指定を行うプロパティ。 color: #ff0000; color: #f00; color:rgb(255,0,0); color: red; color: rgb(100%,0%,0%);
- 22. 背景に関するプロパティ • background-color …背景色の指定 • background-image … 背景画像の指定 • background-position … 背景画像の表示開始位置の指定 • background-repeat … 背景画像のリピートの仕方を指定する • background-attachment … 背景画像の固定を行う • background … 上記の指定を一括で行う
- 23. background-image background-image: url(パス); と指定する。 background-image:url(../img/sample.png);
- 24. background-position background-image: 水平方向の位置 垂直方向の位置;と指定する • 水平方向の位置の指定 1. left 2. center 3. right 4. 数値で指定 5. ％で指定 • 垂直方向の位置の指定 1. top 2. center 3. bottom 4. 数値で指定 5. ％で指定
- 25.
- 26.
- 27.
- 28.
- 29.
- 30. background-repeat • 指定方法 1. repeat･･･ 敷き詰める（初期値） 2. repeat-x ･･･ 水平方向に並べる 3. repeat-y ･･･ 垂直方向に並べる 4. no-repeat ･･･ 一つだけ表示
- 31.
- 32.
- 33.
- 34. background-attachment • 指定方法 1. scroll･･･ スクロールすると移動する（初期値） 2. fixed ･･･ スクロールしても移動しない （画面内で固定される）
- 35.
- 36.
- 37. background 背景に関する指定を一つのプロパティでまとめて行うことが出来る 指定が必要なもののみ選んで指定できる。 ※background-position 等は指定なし background: #000url(../img/sample.png) no-repeat; color image repeat
- 38.
- 39.
- 40.
- 41.
- 42.