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
第2回Web講座
Search
北海道科学大学 電子計算機研究部
May 11, 2017
Education
0
110
第2回Web講座
HMTLのタグ、CSS,パスの種類の解説
EMMETの使い方を演習
北海道科学大学 電子計算機研究部
May 11, 2017
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
57
第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
110
Other Decks in Education
See All in Education
AI for Learning
fonylew
0
200
Портфолио - Шынар Ауелбекова
shynar
0
120
Técnicas y Tecnología para la Investigación Neurocientífica en el Neuromanagement
jvpcubias
0
170
QR-koodit opetuksessa
matleenalaakso
0
1.7k
The knowledge panel is your new homepage
bradwetherall
0
190
みんなのコードD&I推進レポート2025 テクノロジー分野のジェンダーギャップとその取り組みについて
codeforeveryone
0
280
Transición del Management al Neuromanagement
jvpcubias
0
240
Alumnote inc. Company Deck
yukinumata
0
3.9k
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
3
710
the difficulty into words
ukky86
0
140
ROSConJP 2025 発表スライド
f0reacharr
0
240
ハッカソンを活用したモノづくり教育について
yusk1450
PRO
2
110
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Documentation Writing (for coders)
carmenintech
75
5.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Mobile First: as difficult as doing things right
swwweet
225
10k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
35
6.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Gamification - CAS2011
davidbonilla
81
5.5k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Transcript
第2回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> <!--ココから <h1>densan.Web</h1> ココまでコメントアウト --> </main> </body> </html> 4
タグ 開始タグから終了タグまでをひっくるめて「要素」という。 <p class=“name”>名前</p> 5
タグ タグの名前を「要素名」という。 例:<p>要素 <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要素から2つ上がった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