HTMLを、ちゃんと書く ―アウトライン編

大竹孔明

HTMLを、ちゃんと書く

第7回 Creators Meetup :

― アウトライン編

Saturday, 24 August 13

大竹孔明こうめ

コーディングを中心にWeb制作をしています

Twitter : @Bamboo_CFacebook : komei.otake

photo by susipaku at PAKUTASO


GCSShttp://gcss.info


http://gcss.info

http://gcss.info

共著http://amzn.to/179krhH


http://gcss.info

http://gcss.info

ASCII.jp連載http://ascii.jp/elem/000/000/818/818527/


http://gcss.info

http://gcss.info

本日の内容

•HTMLとは

•マークアップとは

•アウトラインとは

第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13

本日の内容

•HTMLとは



第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13

本日の内容

•HTMLとは




本日の内容

•HTMLとは




HTMLとは


HTML is easy?


第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」

Accessibility

Architecture

Structuring


ちゃんと、書きましょう


HTMLは全ての根幹。


What is HTML?


"（ハイパーテキストマークアップランゲージ）、略記・略称：HTML（エイ

チティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語

である。文章の中に記述することでさまざまな機能を記述設定することができ

る。

ウェブの基幹的役割を持つ技術の一つでHTMLでマークアップされたドキュメ

ントはほかのドキュメントへのハイパーリンクを設定できるハイパーテキスト

であり、画像・リスト・表などの高度な表現力を持つ。

W3Cは、XMLベースの規格であるXHTMLの勧告も行っている。また2012年

12月現在、HTML5も策定中である。"


出展 - wikipedia


はい


Web上の文書を

マークアップするための言語である


マークアップとは



"マークアップとは、普通の文書に目印を付ける（マークアップする）ことで、その部分が文書中でどんな働きをしているか（見出しなのか、段落なのかなど）をはっきりさせようという考えです。"

出展 - The Web KANZAKI


文書をコンピューターにも

わかりやすくする印付け


もう一度HTMLの話


“HTML is the language for describing

the structure of Web pages.”


出展 - W3C


HTMLは、ウェブページの構造を

説明するための言語である。


HTMLは、ウェブページの構造を

説明するための言語である。


アウトラインとは


What is Outline?



level1

level2

level3 level3


Why!?


<h1>見出しレベル1</h1><h2>見出しレベル2</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven</p><h3>見出しレベル3</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven</p>


1. 見出しレベル1

1.1 見出しレベル2

1.1.1 見出しレベル3



<div><h1>見出しレベル1</h1>

<div><h2>見出しレベル2</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven</p><div><h3>見出しレベル3</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven</p></div></div>


section, article, nav, aside



<article><h1>見出しレベル1</h1>

<section><h1>見出しレベル2</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven</p><section><h1>見出しレベル3</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven</p></section></section>

</article>


正しいアウトライン生成に必要なこととは


Untitled section


Visualize how?



DEMO

demo


default heading


ありがとうございました！

大竹孔明


Technology

HTMLを、ちゃんと書く ―アウトライン編