Post on 22-May-2015
description
大竹孔明
HTMLを、ちゃんと書く
第7回 Creators Meetup :
― アウトライン編
Saturday, 24 August 13
大竹 孔明 こうめ
コーディングを中心にWeb制作をしています
Twitter : @Bamboo_CFacebook : komei.otake
photo by susipaku at PAKUTASO
Saturday, 24 August 13
ASCII.jp連載http://ascii.jp/elem/000/000/818/818527/
Saturday, 24 August 13
本日の内容
•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とは
•マークアップとは
•アウトラインとは
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 第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とは
Saturday, 24 August 13
HTML is easy?
Saturday, 24 August 13
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
Accessibility
Architecture
Structuring
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
ちゃんと、書きましょう
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
HTMLは全ての根幹。
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
What is HTML?
Saturday, 24 August 13
"（ハイパーテキスト マークアップ ランゲージ）、略記・略称：HTML（エイ
チティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語
である。文章の中に記述することでさまざまな機能を記述設定することができ
る。
ウェブの基幹的役割を持つ技術の一つでHTMLでマークアップされたドキュメ
ントはほかのドキュメントへのハイパーリンクを設定できるハイパーテキスト
であり、画像・リスト・表などの高度な表現力を持つ。
W3Cは、XMLベースの規格であるXHTMLの勧告も行っている。また2012年
12月現在、HTML5も策定中である。"
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
出展 - wikipedia
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
はい
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
Web上の文書を
マークアップするための言語である
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
マークアップとは
Saturday, 24 August 13
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
"マークアップとは、普通の文書に目印を付ける（マークアップする）ことで、その部分が文書中でどんな働きをしているか（見出しなのか、段落なのかなど）をはっきりさせようという考えです。"
出展 - The Web KANZAKI
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
文書をコンピューターにも
わかりやすくする印付け
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 第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 is the language for describing
the structure of Web pages.”
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
出展 - W3C
第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は、ウェブページの構造を
説明するための言語である。
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
アウトラインとは
Saturday, 24 August 13
What is Outline?
Saturday, 24 August 13
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
level1
level2
level3 level3
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
Why!?
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
<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>
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
1. 見出しレベル1
1.1 見出しレベル2
1.1.1 見出しレベル3
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
<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>
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
section, article, nav, aside
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
<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>
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
正しいアウトライン生成に必要なこととは
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
Untitled section
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
Visualize how?
Saturday, 24 August 13
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
DEMO
demo
Saturday, 24 August 13
default heading
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
ありがとうございました！
大竹孔明
Saturday, 24 August 13