第２回Web講座

HMTLのタグ、CSS,パスの種類の解説
EMMETの使い方を演習

Transcript

1. 第２回Web講座 present by kagawa
2. メニュー  HTML とは  タグ・要素の種類  テーブル・リスト  EMMETの使い方/演習  階層構造  CSS  PASS 2
3. HTML （HyperText Markup Language） Webページを作成するための言語。 今日のWebページの多くはHTMLで作成されている。 「タグ」というものを使って記述する 3
4. HTML （HyperText Markup Language） <!-- と -->で囲まれた部分はコメントであり、ブラウザ上では表示されない <!DOCTYPE html> <html lang=“jp"> <head> <meta charset="UTF-8"> <title>Webチーム活動</title> </head> <body> <main> <!--ココから <h1>densan.Web</h1> ココまでコメントアウト --> </main> </body> </html> 4
5. タグ 開始タグから終了タグまでをひっくるめて「要素」という。 <p class=“name”>名前</p> 5
6. タグ タグの名前を「要素名」という。 例：<ｐ>要素 <p class=“name”>名前</p> 6
7. タグ タグに付帯する情報の指定を「属性」という。 <p class=“name”>名前</p> 7
8. タグ 属性の名前を「属性名」という class ・ id 属性 <p class=“name”>名前</p> <p id =“name”>名前</p> 8
9. タグ 属性の値を「属性値」という <p class=“name”>名前</p> nameと付けた <p id =“name”>名前</p> 9
10. 要素の種類 1. ブロックレベル要素 見出しや段落など、文書の骨組みとなる要素 要素のあとは自動的に改行される 例：<h1>-<h6>,<table>,<p>,<form>…など 2. インライン要素 リンクや画像など、文章の一部と扱われる要素 例：<a>,<br>,<label>,<script>…など 10
11. タグ  <h1>~<h6>：見出し 数字の小さい順に使う  <p> ：段落（文章を表示する）  <br> ：改行 終了タグなし 各要素内で使える  <a> ：他のWebサイトなどへのハイパーリンク : <a href = ”--url--”>  <img> ：パスで指定した画像を表示 終了タグ</>なし : <imgsrc = “ img.jpg“ ...> 11
12. リスト  <ul>：順序のないリスト（・・・）  <ol>：順序のあるリスト（1. 2. 3...が先頭）  <l i> ：リスト項目 12
13. テーブル  <table> : テーブル(表)を作成するタグ,この中に以下の要素が足される。  <thead>：table head ヘッダ(見出し)になる部分を表す。  <tbody>：table body ボディ(本文)になる部分を表す。  <tfood> ：table food フッダ(要約)になる部分を表す。←テーブルの最後に表示  <tr> ：table row 横一連を定義するタグ。この中に以下の要素が入る  <th> ：table header 見出しになる部分。太字で、中央寄せになる。  <td> ：table data セル(1箱)に入るデータを表す。 13
14. Emmetの使い方  html文書を開いているとき、要素名を打ち込んでTabキーを押すと 開始タグ・終了タグ・必須属性が補完される  複数の要素を同時に補完して入力することもできる  補完の際、属性・内容も指定することができる 14
15. Emmetの使い方/演習  新しいファイルの文書形式をHTMLに指定した後、次の通りに入力して各行末でTabキー <!-コメント文--> は書かなくても結構です。 一応、ショートカットキー：[ctrl]+[/] 15
16. Emmetの使い方  簡単にテーブル要素,他が書ける。 右側に記入例を置いときました。 16
17. 階層構造 赤字が親、青字が子、緑字が孫 table(親)より下にある要素を総称して子孫要素という table tr thead tbody tr th th th td td td tr td td td 17
18. 解説 「>」で区切った場合、それ以降の要素は下の階層に配置され、 子要素として扱われる 親 > 子 18
19. 解説 「*数値」と記述すると、要素を指定した数だけ繰り返し表示する 要素同士は隣接する 19
20. 解説 「^」は現在の階層から一つ上がる 20
21. 解説 table tr thead tbody tr th th th td td td tr td td td ^ ^ th要素から２つ上がったtableに属するtbody以下が補完される 21
22. CSS （Cascading Style Sheets）  Webページのレイアウトやデザインを整える  HTMLとは別のファイル(style.css )として用意する  HTMLに適用するためには<link>タグを付ける head要素内が望ましい <link rel= “stylesheet” href= “style.css” > style.cssに書く→ body { background-color : #000000 ; color : #FFFFFF ; } table , th , td { border : 1px #FF0000 solid ; } 22
23. CSS適用結果 こんな感じ 23
24. CSS （Cascading Style Sheets）  同一フォルダにstyle.cssを置いてもいいが、フォルダを分ける価値はある  作業フォルダにCSSフォルダを作成,style.cssを引っ越し  linkのhrefを書き換えます <link rel= “stylesheet” href= “./css/style.css” > 24
25. パス（Path）  絶対パス ルートディレクトリ（一番上の階層にあるフォルダ）から見たファイル・フォルダの位置を表す。 WindowsであればCドライブ”C:” やDドライブ”D:” がルートディレクトリになる。 "C:¥Program Files (x86)¥Google¥Chrome¥Application¥chrome.exe"  相対パス 現在作業しているファイル・フォルダから目的のファイル・フォルダへの道筋を示す。 現在いるフォルダよりも一つ上のフォルダにアクセスするとき、”../”と記述する。 25
26. パスの指定 index.html から style.css へアクセスするためのパスは、 絶対パス：”C:/work/css/style.css” 相対パス：”../css/style.css” ←現在位置 ↑目的ファイル C: pic work css ←ルートディレクトリ index.html style.css image.png 26
27. パスの指定 style.css から image.png へアクセスするためのパスは、 絶対パス：”C:/pic/image.png” 相対パス：”../../pic/image.png” ↓現在位置 ←目的ファイル C: pic work css index.html style.css image.png 27
28. 本日はここまで CSS プロパティ 28