Markdown と学ぶ HTML 基礎第二版（2018/10/12 FFTT#331）

by Yoko TAMADA

Slide 1

Slide 1 text

Markdown と学ぶ HTML 基礎

2018/10/12 Fri. FFTT#331 @tmd45 第二版

Slide 2

Slide 2 text

Yoko TAMADA @tmd45 Feedforce Inc. ソーシャルPLUS® 開発チーム本業は光の戦士(FFXIV@Mana)です Hello! 2

Slide 3

Slide 3 text

Markdown を元に基本的な HTML を学ぼう ※説明をかんたんにするために、いろいろ省略したり、　ざっくり言ったりしてますのであしからず Agenda 3

Slide 4

Slide 4 text

イントロダクションとりあえずそれぞれ見てみよう 4

Slide 5

Slide 5 text

HTML (.html) ◉ プログラミング言語／マークアップ言語 ◉ HyperText Markup Language ◉ ブラウザが解釈して表示してくれる ◉ W3C という非営利団体が仕様を定めている ○ 1990年 Tim Berners-Lee 氏が考案 ◉ HTML にもバージョンがある ○ 現在の最新は HTML 5.2 5

Slide 6

Slide 6 text

HTML をブラウザで表示してみる 6

Slide 7

Slide 7 text

Markdown (.md) ◉ 文章の書き方（記法） ◉ 手軽に文章構造を表現する ○ 元は電子メール（プレーンテキスト）の書き方 ○ 2004年 John Gruber 氏が開発 ◉ Markdown 対応の Web アプリケーションが HTML に変換する 7

Slide 8

Slide 8 text

Markdown 記法でテキストを書く 8

Slide 9

Slide 9 text

Markdown が HTML に変換される 9

Slide 10

Slide 10 text

Plain Text (.txt) ◉ 装飾やマークアップを含まない素のテキストデータ 10

Slide 11

Slide 11 text

仕様変更があったのでコードを修正しました。修正内容・本文の文字サイズを大きくする・アイコンのまわりに余白を追加する確認方法・確認用のサイト https://example.com で表示を確認してください ① Plain Text 例 11

Slide 12

Slide 12 text

仕様変更があったのでコードを修正しました。 ## 修正内容 - 本文の文字サイズを大きくする - アイコンのまわりに余白を追加する ## 確認方法 - [確認用のサイト](https://example.com)で表示を確認してください ② Markdown 例 12

Slide 13

Slide 13 text

仕様変更があったのでコードを修正しました。

修正内容

本文の文字サイズを大きくする
アイコンのまわりに余白を追加する

確認方法

確認用のサイトで表示を確認してください

③ HTML 例 13

Slide 14

Slide 14 text

仕様変更があったのでコードを修正しました。修正内容 ● 本文の文字サイズを大きくする ● アイコンのまわりに余白を追加する確認方法 ● 確認用のサイトで表示を確認してください ④ HTML 例をブラウザで表示 14

Slide 15

Slide 15 text

◉ Markdown をどんな HTML に変換するかはサイト次第 ◉ HTML をどんなスタイル（見た目）で表示するかもサイト次第 ◉ このスライドでは一般的なものを紹介します ○ おもに GitHub で使うもの中心 Attention 15 ！

Slide 16

Slide 16 text

◉ JavaScript ○ https://github.com/markedjs/marked ○ https://github.com/showdownjs/showdown ◉ Ruby ○ https://github.com/vmg/redcarpet ○ https://github.com/gjtorikian/commonmarker Markdown/HTML Parser 例 16

Slide 17

Slide 17 text

HTML の雛形見えないけれどあるんだよ 17

Slide 18

Slide 18 text

HTML の雛形 18 タイトルこの部分が画面に表示される。 - この文章は html です宣言 - ここから html が始まります（言語は日本語） - ここから head（表示されない情報）が始まります - 文字コードは UTF-8 です - タイトルは「タイトル」です - ここまで head（表示されない情報）です - ここから body（本文）が始まります本文の内容 - ここまで body（本文）です - ここまで html です

Slide 19

Slide 19 text

HTML の基本 ◉ TAG index https://www.tagindex.com/ ○ "HTML の基本" ページ ○ "HTML5 の基本" ページ 19

Slide 20

Slide 20 text

Markdown の記法と HTML これだけは覚えて帰ってください 20

Slide 21

Slide 21 text

書き方のルール ◉ 段落 ◉ 強調 ◉ リンク ◉ 見出し ◉ 箇条書き（順序なし、順序付き） ◉ 引用 ◉ コード 21

Slide 22

Slide 22 text

これは段落です。 2つの文があります。

これは別の段落です。ここにも 2つの文があります。

段落のなかに改行を入れられる
場合もあります。

◉ Markdown 段落どうしは空行 ↲で分ける。文末に空白␣2つで改行 ◉ HTML p は "paragraph"（段落）、br は "break"（改行）段落 22 これは段落です。2つの文があります。 ↲ これは別の段落です。ここにも2つの文があります。 ↲ ↲ 段落のなかに改行を入れられる␣␣ 場合もあります。 Markdown HTML

Slide 23

Slide 23 text

*強調* もしくは _強調_（斜体として表現されることが多い） **強い強調** もしくは __強い強調__ （太字として表現されることが多い）

強調もしくは強調（斜体として表現されることが多い）

強い強調 もしくは 強い強調（太字として表現されることが多い）

◉ Markdown 強調したい文字を * や _ で囲む。斜体より太字のほうがよく使われる ◉ HTML em は "emphasis"（強調）強調 23 Markdown HTML

Slide 24

Slide 24 text

段落の中にリンクがあります

段落の中に[リンク](https://www.w3.org/) があります。 ◉ Markdown [リンクのテキスト](リンクのアドレス) という形式 ◉ HTML a は "anchor"（錨）、href は "hypertext reference" ※諸説あるリンク 24 Markdown HTML

Slide 25

Slide 25 text

# レベル1の見出し #### レベル4の見出しレベル1の見出し ============= レベル2の見出し -------------

レベル1の見出し

レベル4の見出し

レベル1の見出し

レベル2の見出し

◉ Markdown レベル1-2 のみ 2 種類の書き方ができる ◉ HTML h は "heading"（見出し）、文字サイズを大きくするために使うのは NG 見出し 25 Markdown HTML

Slide 26

Slide 26 text

順序なしリストのアイテム 1
順序なしリストのアイテム 2
- 順序なしリストの入れ子
順序なしリストのアイテム 3

- 順序なしリストのアイテム1 - 順序なしリストのアイテム2 ␣␣␣␣- 順序なしリストの入れ子 - 順序なしリストのアイテム3 * 順序なしリストのアイテム1 * 順序なしリストのアイテム2 ◉ Markdown アイテム（文）の先頭に - または * を付ける ◉ HTML ul は "unordered list"、li は "list item" 箇条書き (1) 順序なしリスト 26 Markdown HTML

Slide 27

Slide 27 text

順序付きリストのアイテム 1
順序付きリストのアイテム 2

1. 順序付きリストのアイテム1 2. 順序付きリストのアイテム2 - 順序なしアイテム1 - 順序なしアイテム2 ␣␣␣␣1. 順序付きアイテム ␣␣␣␣2. 入れ子で組み合わせも可能 - 順序なしアイテム3 ◉ Markdown アイテム（文）の先頭に 1. 2. … を付ける ◉ HTML ol は "ordered list"、li は "list item" 箇条書き (2) 順序付きリスト 27 Markdown HTML

Slide 28

Slide 28 text

これは普通の文章です。 > ここは引用された文章です。 > > 引用内でも _Markdown_ が使える場合もあります。

これは普通の文章です。

ここは引用された文章です。

引用内でも Markdown が使える場合もあります。

◉ Markdown 引用した文の段落の先頭に > を付ける ◉ HTML blockquote は長文 (block) の引用 (quote) に使われる引用 28 Markdown HTML

Slide 29

Slide 29 text

インラインコードは `piyo code` のように書きます。 ␣␣␣␣# 複数行にまたがるコード 1 ␣␣␣␣puts 'Hello World!' ``` # 複数行にまたがるコード 2 puts 'I love cat.' ```

インラインコードは piyo code のように書きます。

# 複数行にまたがるコード 1
Puts 'Hello World!'

◉ Markdown インラインコードは `（バッククオート）で囲む。コードブロックには2 種類の書き方がある ◉ HTML pre は "preformatted text"（整形済みテキスト）で、その中身の改行やスペースがそのまま表示されるコード 29 Markdown HTML

Slide 30

Slide 30 text

キレイに表示された例 30

Slide 31

Slide 31 text

Reference ◉ TAG index https://www.tagindex.com/ ◉ HTMLクイックリファレンス http://www.htmq.com/ ◉ 日本語Markdownユーザー会 http://www.markdown.jp/ 31

Slide 32

Slide 32 text

◉ 空白（半角スペース）, 改行, 空行大事！ ###見出しのつもり本文のつもり -リストのつもり -リストのつもり

###見出しのつもり本文のつもり -リストのつもり -リストのつもり

よくあるやらかし 32 Markdown HTML

Slide 33

Slide 33 text

◉ とくに改行・空行はこまめに入れるよう意識しよう！ ◉ プレビューがあるツールなら、プレビューでチェックしよう！ ###␣見出しのつもり ↲ 本文のつもり ↲ -␣リストのつもり -␣リストのつもり

見出しのつもり

本文のつもり

リストのつもり
リストのつもり

よくあるやらかし «修正» 33 Markdown HTML

Slide 34

Slide 34 text

◉ いろんな種類のリストをごちゃまぜにする ○ 出力された HTML を見てみましょう ○ なんでその混ぜ方ができないのかわかります ◉ 見出しレベルをごちゃまぜにする ○ 本来はレベル 1 から 2, 3, … と順に入れ子にする ○ これがめちゃくちゃでも怒らない render もある ○ 怒る render もある（最近は減った気がする）稀によくあるやらかし 34

Slide 35

Slide 35 text

Markdown のルールチェック ◉ markdownlint/markdownlint https://github.com/markdownlint/markdownlint ○ docs/RULES.md ○ $ mld hoge.md --config .mdlcfg.json ○ ルールの除外も可能 ○ Auto fix はない（VSCode 拡張機能にある） 35

Slide 36

Slide 36 text

Any questions ? You can find me at @tmd45 Presentation template by SlidesCarnival Thanks! 36