第２回Web講座

第２回Web講座 present by kagawa

メニュー  HTML とは  タグ・要素の種類  テーブル・リスト  EMMETの使い方/演習
 階層構造  CSS  PASS 2

HTML （HyperText Markup Language） Webページを作成するための言語。 今日のWebページの多くはHTMLで作成されている。 「タグ」というものを使って記述する 3

HTML （HyperText Markup Language） で囲まれた部分はコメントであり、ブラウザ上では表示されない <!DOCTYPE html> <html
lang=“jp"> <head> <meta charset="UTF-8"> <title>Webチーム活動</title> </head> <body> <main>  </main> </body> </html> 4

タグ開始タグから終了タグまでをひっくるめて「要素」という。 <p class=“name”>名前</p> 5

タグタグの名前を「要素名」という。例：<ｐ>要素 <p class=“name”>名前</p> 6

タグタグに付帯する情報の指定を「属性」という。 <p class=“name”>名前</p> 7

タグ属性の名前を「属性名」という class ・ id 属性 <p class=“name”>名前</p> <p id
=“name”>名前</p> 8

タグ属性の値を「属性値」という <p class=“name”>名前</p> nameと付けた <p id =“name”>名前</p> 9

要素の種類 1. ブロックレベル要素見出しや段落など、文書の骨組みとなる要素要素のあとは自動的に改行される例：<h1>-<h6>,<table>,<p>,<form>…など 2. インライン要素リンクや画像など、文章の一部と扱われる要素例：<a>,<br>,<label>,<script>…など
10

タグ  <h1>~<h6>：見出し数字の小さい順に使う  <p> ：段落（文章を表示する）  <br> ：改行
終了タグなし各要素内で使える  <a> ：他のWebサイトなどへのハイパーリンク : <a href = ”--url--”>  <img> ：パスで指定した画像を表示終了タグ</>なし : <imgsrc = “ img.jpg“ ...> 11

リスト  <ul>：順序のないリスト（・・・）  <ol>：順序のあるリスト（1. 2. 3...が先頭）  <l i>
：リスト項目 12

テーブル  <table> : テーブル(表)を作成するタグ,この中に以下の要素が足される。  <thead>：table head ヘッダ(見出し)になる部分を表す。 
<tbody>：table body ボディ(本文)になる部分を表す。  <tfood> ：table food フッダ(要約)になる部分を表す。←テーブルの最後に表示  <tr> ：table row 横一連を定義するタグ。この中に以下の要素が入る  <th> ：table header 見出しになる部分。太字で、中央寄せになる。  <td> ：table data セル(1箱)に入るデータを表す。 13

Emmetの使い方  html文書を開いているとき、要素名を打ち込んでTabキーを押すと開始タグ・終了タグ・必須属性が補完される  複数の要素を同時に補完して入力することもできる  補完の際、属性・内容も指定することができる 14

Emmetの使い方/演習  新しいファイルの文書形式をHTMLに指定した後、次の通りに入力して各行末でTabキー <!-コメント文--> は書かなくても結構です。一応、ショートカットキー：[ctrl]+[/] 15

Emmetの使い方  簡単にテーブル要素,他が書ける。右側に記入例を置いときました。 16

階層構造赤字が親、青字が子、緑字が孫 table(親)より下にある要素を総称して子孫要素という table tr thead tbody tr th th
th td td td tr td td td 17

解説「>」で区切った場合、それ以降の要素は下の階層に配置され、子要素として扱われる親 > 子 18

解説「*数値」と記述すると、要素を指定した数だけ繰り返し表示する要素同士は隣接する 19

解説「^」は現在の階層から一つ上がる 20

解説 table tr thead tbody tr th th th td
td td tr td td td ^ ^ th要素から２つ上がったtableに属するtbody以下が補完される 21

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

CSS適用結果こんな感じ 23

CSS （Cascading Style Sheets）  同一フォルダにstyle.cssを置いてもいいが、フォルダを分ける価値はある  作業フォルダにCSSフォルダを作成,style.cssを引っ越し  linkのhrefを書き換えます
<link rel= “stylesheet” href= “./css/style.css” > 24

パス（Path）  絶対パスルートディレクトリ（一番上の階層にあるフォルダ）から見たファイル・フォルダの位置を表す。 WindowsであればCドライブ”C:” やDドライブ”D:” がルートディレクトリになる。 "C:¥Program Files (x86)¥Google¥Chrome¥Application¥chrome.exe"
 相対パス現在作業しているファイル・フォルダから目的のファイル・フォルダへの道筋を示す。現在いるフォルダよりも一つ上のフォルダにアクセスするとき、”../”と記述する。 25

パスの指定 index.html から style.css へアクセスするためのパスは、絶対パス：”C:/work/css/style.css” 相対パス：”../css/style.css” ←現在位置 ↑目的ファイル C:
pic work css ←ルートディレクトリ index.html style.css image.png 26

パスの指定 style.css から image.png へアクセスするためのパスは、絶対パス：”C:/pic/image.png” 相対パス：”../../pic/image.png” ↓現在位置 ←目的ファイル C:
pic work css index.html style.css image.png 27

本日はここまで CSS プロパティ 28

第２回Web講座

第２回Web講座

北海道科学大学　電子計算機研究部

More Decks by 北海道科学大学　電子計算機研究部

Other Decks in Education

Featured

Transcript