Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第02回Web講座2018
Search
北海道科学大学 電子計算機研究部
May 16, 2018
0
89
第02回Web講座2018
北海道科学大学 電子計算機研究部
May 16, 2018
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
55
第11回Network講座2019
densan
0
70
第10回Network講座2019
densan
0
46
第09回Network講座2019
densan
1
160
第08回Network講座2019
densan
0
49
第07回Network講座2019
densan
0
46
第06回Network講座2019
densan
0
71
第05回Network講座2019
densan
0
51
第04回Network講座2019
densan
0
100
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Visualization
eitanlees
146
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
How to Ace a Technical Interview
jacobian
277
23k
Building Applications with DynamoDB
mza
95
6.5k
Code Reviewing Like a Champion
maltzj
524
40k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Being A Developer After 40
akosma
90
590k
Agile that works and the tools we love
rasmusluckow
329
21k
Documentation Writing (for coders)
carmenintech
71
4.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Transcript
ネットワークチーム 第2回 北海道科学大学 電子計算機研究部
INDEX ◦ HTMLの基本 ◦ タグについて ◦ Emmetの使い方 ◦ HTMLの階層構造 ◦
CSSについて ◦ 演習 2
HTMLの基本
HTMLとは HTML (HyperText Markup Language) ・HyperText 複数の文書をリンクさせる仕組み ・Markup Language 視覚表現や文書構造を記述するための言語
HTMLではタグ(後述)を使う 4
HTMLの歴史 世界中の研究者達は様々なコンピュータや ソフトウェアを用いていた。 規格が異なるためにデータのやり取りが困難であった。 5 標準化しよう! HTMLの開発
タグについて
タグについて ・HTMLはタグを使って記述される ・文章をタグで囲むことで、その文章に意味をもたせる (マークアップ) 7 <h1>Webページの作り方<h1> Webページの作り方 ←ただのテキスト タグで囲むことで 見出しだと明示する
←これは見出しだ!
タグについて 開始タグから終了タグまでをひっくるめて 「要素」という。 8 <p class=“name”>名前</p>
タグについて タグの名前を「要素名」という。 要素名はHTMLで決められている。 9 <p class=“name”>名前</p>
タグについて タグに付帯する情報の指定を「属性」という。 10 <p class=“name”>名前</p>
タグについて 属性の名前を「属性名」という。 これも予め決められている。 11 <p class=“name”>名前</p>
タグについて 属性の値を「属性値」という。 属性値はユーザーが自由に決める。 12 <p class=“name”>名前</p>
要素の種類 1.ブロックレベル要素 見出しや段落など、文書の骨組みとなる要素 要素のあとは自動的に改行される 例:<h1>-<h6>,<table>,<p>,<form>…など 2.インライン要素 リンクや画像など、文章の一部と扱われる要素 例:<a>,<br>,<label>,<script>…など ※インライン要素の中にブロックレベル要素を 入れることはできません!
誤った例 … <a><p>リンク</p></a> 13
基本的なタグ ・<h1>~<h6> 見出し 数字の小さい順に使う ・<p> 段落・パラグラフ(文章を表示する) ・<br> 改行 終了タグなし ・<a>
他のWebサイトなどへのリンク(ハイパーリンク) ・<img> パスで指定した画像を表示 終了タグなし 14
リストのタグ ・<ul> 順序のないリスト(・が先頭) ・<ol> 順序のあるリスト(1. 2. 3.・・・が先頭) ・<li> リスト項目 15
表のタグ ・<table> テーブル(表)を作成するタグ。この中に以下の要素 が足される。 ・ <thead> table head ヘッダ(見出し)になる部分を表す。 ・
<tbody> table body ボディ(本文)になる部分を表す。 ・ <tfoot> table foot フッダ(要約)になる部分を表す。 テーブルの最後に表示 ・<tr> table row横一連を定義するタグ。この中に以下の 要素が入る ・ <th> table header 見出しになる部分。太字で、中央寄 せになる。 ・ <td> table data セル(1箱)に入るデータを表す。 16
Emmetの使い方
Emmetとは 入力補完機能によりHTML, CSS等を素早く 編集できるテキストエディタ用プラグイン 18 ・タグ補完機能 ・テンプレート ・略記展開 (後述の演習3でやります) h1
[tab] → <h1></h1> ! [tab] → <!DOCTYPE html>~~
演習3 Emmetの略記展開で 表を作成
演習3 略記展開 新しいファイル作成(名前:ex03.html)文書形式をHTMLに 指定した後、次の通りに入力して行末でTabキー 20 !>table>thead>tr>th*3^^tbody>tr>td{チーム}+td*2
演習3 略記展開 テーブル要素などが 素早く書ける! 21
演習3 略記展開 文を追加して みましょう。 書き終わったら 保存(Ctrl + s)して ブラウザで開いて みましょう。
22
演習3 略記展開 表が作成されました! 23
HTMLの階層構造 親要素、子要素、…
HTMLの階層構造 25 ~ HTMLは要素の入れ子構造(階層構造)になっている table thead tbody th th th
tr th th th tr th th th tr
HTMLの階層構造 26 ~ ある要素からみて下位の要素を子孫要素 一階層下の要素を子要素という table thead tbody th th
th tr th th th tr th th th tr thead は table の子要素
HTMLの階層構造 27 ~ 逆に、ある要素からみて上位の要素を祖先要素 一階層上の要素を親要素という table thead tbody th th
th tr th th th tr th th th tr table は thead の親要素
HTMLの階層構造 28 ~ また、同一の親要素内にある子要素同士を 兄弟要素という table thead tbody th th
th tr th th th tr th th th tr thead と tbody は兄弟要素
演習3 略記展開の解説
略記展開の解説 30 !>table>thead>tr>th*3^^tbody>tr>td{チーム}+td*2 「>」で区切った場合、それ以降の要素は 下の階層に配置され子要素として扱われる 親 > 子 <table> <thead></thead>
</table> table>thead
略記展開の解説 31 !>table>thead>tr>th*3^^tbody>tr>td{チーム}+td*2 「要素*数値」と記述すると、要素を指定した数だけ 繰り返し表示する。要素同士は隣接する <th></th> <th></th> <th></th> th*3
略記展開の解説 32 !>table>thead>tr>th*3^^tbody>tr>td{チーム}+td*2 「^」は現在の階層から一つ上がる <thead> <tr> <th></th> </tr> </thead> <tbody></tbody>
thead>tr>th^^tbody 2階層
略記展開の解説 33 !>table>thead>tr>th*3^^tbody>tr>td{チーム}+td*2 ~ table thead tbody th th th
tr th th th tr th th th tr th要素から2つ上がったtableに属する tbody以下が補完される ^ ^
略記展開の解説 34 !>table>thead>tr>th*3^^tbody>tr>td{チーム}+td*2 「要素名{文字}」で、タグ内に文字を追加する <td>チーム</td> td{チーム}
略記展開の解説 35 !>table>thead>tr>th*3^^tbody>tr>td{チーム}+td*2 「+」で同一階層に要素を追加する <td>チーム</td> <td></td> td{チーム}+td
Emmetの略記(一例) 記号 役割 記述例 # ID名の指定 div#idName . class名の指定 div.className
> 要素を入れ子にする div>p + 要素を同階層に展開する div+p ^ 一階層上に展開 div>p^ul * 要素を複数展開 li*3 {} テキストの挿入 p{テキスト} $ 連番をつける li.item-$*3 ! HTMLの雛形 ! 36
CSS Cascading Style Sheets
CSSとは 38 Cascading 滝、連鎖的に繋がる Style Sheets 構造化文書の見た目を記述するもの Webページの見た目を指定するもの
演習4 CSS スタイルを適用してみよう
演習4 CSSを書いてみよう 1. 演習3で作成したex03.html をエディタで開く 2. 以下をheadタグ内に入力 40 <style type="text/css">
body { background-color : #000000 ; color : #FFFFFF ; } table , th , td { border : 1px #FF0000 solid ; } </style> 入力した画面
演習4 CSSを書いてみよう 41 スタイルが適用された!
演習4 CSSを書いてみよう 42 • CSSは、基本的にHTMLとは別のファイルとして用意 する。 • HTMLに適用するためには<link>タグを付ける。 head要素内が望ましい。 <link
rel= “stylesheet” href= “CSSの場所” >
演習4 CSSを別ファイルに用意する 43 1. 「NetTeam」フォルダ内に「css」フォルダを新規 作成 2. 「css」フォルダ内に「ex04.css」を新規作成 3. 「ex04.css」をエディタで開く
4. 先程入力した「body {~~} table,~~} 」をコピペ して保存 5. ex02.htmlを開きstyle要素(要素内も含む)を消去 6. <head>要素内に以下を入力して保存 <link rel="stylesheet" href="./css/ex04.css">
演習4 CSSを別ファイルに用意する 44 ex02.html ex04.css 入力例
演習4 CSSを書いてみよう 45 スタイルが変わらず 適用されていればOK
本日はここまで お疲れ様でした