高専カンファレンス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の会

通称

日本ハム

< > </ >を書きたくない！という人がいたら

使ってみてください。

とことん楽しましょう

ご清聴ありがとうございました。