第02回Network講座2019

ネットワークチーム第２回 2019 北海道科学大学電子計算機研究部

INDEX ⚫ HTMLの基本 ⚫ タグについて ⚫ Emmetの使い方 ⚫ HTMLの階層構造 ⚫
CSSについて ⚫ 演習 ⚫ Markdown 2

HTMLの基本

HTMLとは 4 文書構造を記述するための言語 HTML CSS JS レイアウト設定動的コンテンツ
Webページのしくみ

HTMLとは HTML （HyperText Markup Language）・HyperText 複数の文書をリンクさせる仕組み・Markup Language 視覚表現や文書構造を記述するための言語
HTMLではタグ（後述）を使う 5

HTMLの歴史世界中の研究者達は様々なコンピュータやソフトウェアを用いていたが規格が異なるためにデータのやり取りが困難であった 6 標準化しよう！ HTMLの開発

タグについて

タグについて ⚫ HTMLはタグを使って記述される ⚫ 文章をタグで囲むことで、その文章に意味をもたせる（マークアップ） 8 <h1>Webページの作り方<h1> Webページの作り方 ←ただのテキスト
タグで囲むことで見出しだと明示する ←これは見出しだ！

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

タグについてタグの名前を「要素名」という。要素名はHTMLで決められている。 10 <p class=“name”>名前</p>

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

タグについて属性の名前を「属性名」という。これも予め決められている。 12 <p class=“name”>名前</p>

タグについて属性の値を「属性値」という。属性値はユーザーが自由に決める。 13 <p class=“name”>名前</p>

要素の種類１．ブロックレベル要素見出しや段落など、文書の骨組みとなる要素要素のあとは自動的に改行される例：<h1>-<h6>,<table>,<p>,<form>…など２．インライン要素リンクや画像など、文章の一部と扱われる要素例：<a>,<br>,<label>,<script>…など ※インライン要素の中にブロックレベル要素を入れることはできません！
誤った例 … <a><p>リンク</p></a> 14

基本的なタグ・<h1>~<h6> 見出し数字の小さい順に使う・<p> 段落・パラグラフ（文章を表示する）・<br> 改行終了タグなし・<a>
他のWebサイトなどへのリンク（ハイパーリンク）・<img> パスで指定した画像を表示終了タグなし 15

リストのタグ・<ul> 順序のないリスト（・が先頭）・<ol> 順序のあるリスト（1. 2. 3.・・・が先頭）・<li> リスト項目 16

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

Emmetの使い方

Emmetとは入力補完機能によりHTML, CSS等を素早く編集できるテキストエディタ用プラグイン 19 ・タグ補完機能・テンプレート・略記展開（後述の演習３でやります） h1
[tab] → <h1></h1> ! [tab] → <!DOCTYPE html>~~

演習３ Emmetの略記展開で表を作成

演習３略記展開新しいファイル作成（名前：net2.html）文書形式をHTMLに指定した後、! [tab] でテンプレートを入力する bodyタグ内に移動し、次の通りに入力して行末でTabキー 21 table>thead>tr>th*3^^tbody>tr>td{チーム}+td*2

演習３略記展開テーブル要素などが素早く書ける！ 22

演習３略記展開文を追加してみましょう。書き終わったら保存（Ctrl + s）してブラウザで開いてみましょう。
23

演習３略記展開表が作成されました！ 24

HTMLの階層構造親要素、子要素、…

HTMLの階層構造 26 ～ HTMLは要素の入れ子構造（階層構造）になっている table thead tbody th th th
tr td td td tr td td td tr

HTMLの階層構造 27 ～ある要素からみて下位の要素を子孫要素一階層下の要素を子要素という table thead tbody th th
th tr td td td tr td td td tr thead は table の子要素

HTMLの階層構造 28 ～逆に、ある要素からみて上位の要素を祖先要素一階層上の要素を親要素という table thead tbody th th
th tr td td td tr td td td tr table は thead の親要素

HTMLの階層構造 29 ～また、同一の親要素内にある子要素同士を兄弟要素という table thead tbody th th
th tr td td td tr td td td tr thead と tbody は兄弟要素

演習３略記展開の解説

略記展開の解説 31 !>table>thead>tr>th*3^^tbody>tr>td{チーム}+td*2 「>」で区切った場合、それ以降の要素は下の階層に配置され子要素として扱われる親＞子 <table> <thead></thead>
</table> table>thead

略記展開の解説 32 !>table>thead>tr>th*3^^tbody>tr>td{チーム}+td*2 「要素*数値」と記述すると、要素を指定した数だけ繰り返し表示する。要素同士は隣接する <th></th> <th></th> <th></th> th*3

略記展開の解説 33 !>table>thead>tr>th*3^^tbody>tr>td{チーム}+td*2 「^」は現在の階層から一つ上がる <thead> <tr> <th></th> </tr> </thead> <tbody></tbody>
thead>tr>th^^tbody ２階層

略記展開の解説 34 !>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要素から２つ上がったtableに属する tbody以下が補完される ^ ^

略記展開の解説 35 !>table>thead>tr>th*3^^tbody>tr>td{チーム}+td*2 「要素名{文字}」で、タグ内に文字を追加する <td>チーム</td> td{チーム}

略記展開の解説 36 !>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の雛形 ! 37

CSS Cascading Style Sheets

CSSとは 39 Cascading 滝、連鎖的に繋がる Style Sheets 構造化文書の見た目を記述するもの Webページの見た目を指定するもの

演習４ CSS スタイルを適用してみよう

演習４ CSSを書いてみよう 1. 演習３で作成したnet2.html をエディタで開く 2. 以下をheadタグ内に入力 41 <style type="text/css">
body { background-color : #000000 ; color : #FFFFFF ; } table , th , td { border : 1px #FF0000 solid ; } </style> 入力した画面

演習４ CSSを書いてみよう 42 スタイルが適用された！

演習４ CSSを書いてみよう 43 • CSSは、基本的にHTMLとは別のファイルとして用意する。 • HTMLに適用するためには<link>タグを付ける。 head要素内が望ましい。 <link
rel= “stylesheet” href= “CSSの場所” >

演習４ CSSを別ファイルに用意する 44 1. 「NetTeam」フォルダ内に「css」フォルダを新規作成 2. 「css」フォルダ内に「net2.css」を新規作成 3. 「net2.css」をエディタで開く
4. 先程入力した「body {~~} table,~~} 」をコピペして保存 5. net2.htmlを開き style要素（要素内も含む）を消去 6. <head>要素内に以下を入力して保存 <link rel="stylesheet" href="./css/net2.css">

演習４ CSSを別ファイルに用意する 45 net2.html net2.css 入力例

演習４ CSSを書いてみよう 46 スタイルが変わらず適用されていればOK

Markdown

Markdownとは 48 HTMLと同様に文書構造を記述するための言語の一つ GitHubやQiita, Slack等で使われる拡張子は.md Visual Studio Code
は標準対応

Markdown記述例 49

Markdownの記法（一例）記号役割備考 # 見出しシャープの個数でh1～h6 - 箇条書きリスト -（ハイフン）
数字. 番号リスト 1. 2. > 引用 > 文章 ``` コード `（バッククォート） * 強調一個で斜体二個で太字 [文字](URL) リンク ___ 水平線 _（アンダーバー）３つ 50

Markdown練習 51 以下のHTML文書をMarkdownで記述しましょう <body> <h1>ネットチーム</h1> <p><strong>Web</strong> について学ぶ</p> <ol> <li>HTML</li> <li>CSS</li>
<li>JavaScript</li> </ol> <q>これは引用文章です。</q> </body>

Markdown練習 52 回答例

本日はここまでお疲れ様でした

第02回Network講座2019

第02回Network講座2019

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

Other Decks in Education

Featured

Transcript

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