CYRIC @Tohoku University Dept. of Physics, Tohoku University T.Fukuchi (Rikkyou University)
Kosenconf024north-tohoku HTML
description
Transcript of Kosenconf024north-tohoku HTML
高専カンファレンスkosenconf-024north-tohoku
in 北東北
なまけもの高専生とWebサイト
三浦 彩 / @mitaku
三浦 彩Takumi Miura@mitakuWeb Engineer
AkitaNationalCollege ofTechnology
Webサイト
いろんなのがありますよね
GoogleYahoo!Amebamixietc...
これらを作るHTMLのお話
HTMLって?
< >で囲まれたタグを使ってWebページを作成する言語
このタグで囲まれた物は○○という意味ですよ
<h2></h2> 見出しheading
h1,h2,h3....h6
<p></p> 段落paragraph
<li> </li> リストlist
文字列に意味を持たせてWebサイトを作る
自分でWebサイト作ったことがある人
挙手 ノ
HTMLを知らないとWebページは作れないの?
作れます。
でも
HTMLを手打ちしてる人は少ない気がする
ブログとかCMSとか
I’m Lazy!
Photo by byoshikage
Are you Lazy?
怠け者のWebエンジニア
とことん楽したい
HTMLが嫌い
めんどくさくない?
<h2>食べ物</h2><ul id=‘food’> <li>わんこそば</li> <li>冷麺</li> <li>南部せんべい</li></ul>
<h2>食べ物</h2><ul id=‘food’> <li>わんこそば</li> <li>冷麺</li> <li>南部せんべい</li></ul>
閉じタグ</h2></li></ul>
<h2>食べ物<ul id=‘food’> <li>わんこそば <li>冷麺 <li>南部せんべい
ほらすっきり!
ただし、動かないがな
<h2>食べ物<ul id=‘food’> <li>わんこそば <li>冷麺 <li>南部せんべい
まだ、無駄が多く無い?
※無駄ではないが
<h2>食べ物<ul id=‘food’> <li>わんこそば <li>冷麺 <li>南部せんべい
h2 食べ物ul id=‘food’ li わんこそば li 冷麺 li 南部せんべい
もう意味がわからないですね
<h2>食べ物<ul id=‘food’> <li>わんこそば <li>冷麺 <li>南部せんべい
これくらいは楽したい
<h2>食べ物<ul id=‘food’> ★ <li>わんこそば <li>冷麺 <li>南部せんべい
このタグの有効範囲は?
行き着いた先がHAML
HTML Abstraction Markup Language
閉じタグがない
インデントで区切られる
<h2>食べ物</h2><ul id=‘food’> <li>わんこそば</li> <li>冷麺</li> <li>南部せんべい</li></ul>
%h2 食べ物%ul#food %li わんこそば %li 冷麺 %li 南部せんべい
劇的ビフォアーアフター
<h2>食べ物</h2><ul id=‘food’> <li>わんこそば</li> <li>冷麺</li> <li>南部せんべい</li></ul>
%h2 食べ物%ul#food %li わんこそば %li 冷麺 %li 南部せんべい
before after
<ul id=XXX>↓
ul#XXX
<ul class=XXX>↓
ul.XXX
<ul class=XX id=YY>↓
%ul.XX#YY
%h2 食べ物%ul#food %li わんこそば %li 冷麺 %li 南部せんべい
すっきり!
インデントが整っているので見やすい
日本Hamlの会(ユーザーグループ)
日本Hamlの会
通称
日本ハム
< > </ >を書きたくない!という人がいたら
使ってみてください。
とことん楽しましょう
ご清聴ありがとうございました。