『Markdown と学ぶ HTML 基礎（2018/8/31 e-Navigator 勉強会#4）』 https://speakerdeck.com/tmd45/31-e-navigator-mian-qiang-hui-number-4 より、一部修正・追加情報あります。
Markdown と学ぶHTML 基礎2018/10/12 Fri. FFTT#331 @tmd45第二版
View Slide
Yoko TAMADA @tmd45Feedforce Inc.ソーシャルPLUS® 開発チーム本業は光の戦士([email protected])ですHello!2
Markdown を元に基本的な HTML を学ぼう※説明をかんたんにするために、いろいろ省略したり、 ざっくり言ったりしてますのであしからずAgenda3
イントロダクションとりあえずそれぞれ見てみよう4
HTML (.html)◉ プログラミング言語／マークアップ言語◉ HyperText Markup Language◉ ブラウザが解釈して表示してくれる◉ W3C という非営利団体が仕様を定めている○ 1990年 Tim Berners-Lee 氏が考案◉ HTML にもバージョンがある○ 現在の最新は HTML 5.2 5
HTML をブラウザで表示してみる6
Markdown (.md)◉ 文章の書き方（記法）◉ 手軽に文章構造を表現する○ 元は電子メール（プレーンテキスト）の書き方○ 2004年 John Gruber 氏が開発◉ Markdown 対応の Web アプリケーションがHTML に変換する7
Markdown 記法でテキストを書く8
Markdown がHTML に変換される9
Plain Text (.txt)◉ 装飾やマークアップを含まない素のテキストデータ10
仕様変更があったのでコードを修正しました。修正内容・本文の文字サイズを大きくする・アイコンのまわりに余白を追加する確認方法・確認用のサイト https://example.com で表示を確認してください① Plain Text 例11
仕様変更があったのでコードを修正しました。## 修正内容- 本文の文字サイズを大きくする- アイコンのまわりに余白を追加する## 確認方法- [確認用のサイト](https://example.com)で表示を確認してください② Markdown 例12
仕様変更があったのでコードを修正しました。修正内容本文の文字サイズを大きくするアイコンのまわりに余白を追加する確認方法確認用のサイトで表示を確認してください③ HTML 例13
仕様変更があったのでコードを修正しました。修正内容● 本文の文字サイズを大きくする● アイコンのまわりに余白を追加する確認方法● 確認用のサイトで表示を確認してください④ HTML 例 をブラウザで表示14
◉ Markdown をどんな HTML に変換するかはサイト次第◉ HTML をどんなスタイル（見た目）で表示するかもサイト次第◉ このスライドでは一般的なものを紹介します○ おもに GitHub で使うもの中心Attention15！
◉ JavaScript○ https://github.com/markedjs/marked○ https://github.com/showdownjs/showdown◉ Ruby○ https://github.com/vmg/redcarpet○ https://github.com/gjtorikian/commonmarkerMarkdown/HTML Parser 例16
HTML の雛形見えないけれどあるんだよ17
HTML の雛形18タイトルこの部分が画面に表示される。- この文章は html です宣言- ここから html が始まります（言語は日本語）- ここから head（表示されない情報）が始まります- 文字コードは UTF-8 です- タイトルは「タイトル」です- ここまで head（表示されない情報）です- ここから body（本文）が始まります本文の内容- ここまで body（本文）です- ここまで html です
HTML の基本◉ TAG indexhttps://www.tagindex.com/○ "HTML の基本" ページ○ "HTML5 の基本" ページ19
Markdown の記法とHTMLこれだけは覚えて帰ってください20
書き方のルール◉ 段落◉ 強調◉ リンク◉ 見出し◉ 箇条書き（順序なし、順序付き）◉ 引用◉ コード21
これは段落です。 2つの文があります。 これは別の段落です。ここにも 2つの文があります。段落のなかに改行を入れられる場合もあります。◉ Markdown 段落どうしは空行 ↲で分ける。文末に空白␣2つで改行◉ HTML p は "paragraph"（段落）、br は "break"（改行）段落22これは段落です。2つの文があります。↲これは別の段落です。ここにも2つの文があります。↲↲段落のなかに改行を入れられる␣␣場合もあります。Markdown HTML
*強調* もしくは _強調_（斜体として表現されることが多い）**強い強調** もしくは __強い強調__（太字として表現されることが多い）強調 もしくは 強調（斜体として表現されることが多い） 強い強調 もしくは 強い強調（太字として表現されることが多い）◉ Markdown 強調したい文字を * や _ で囲む。斜体より太字のほうがよく使われる◉ HTML em は "emphasis"（強調）強調23Markdown HTML
段落の中にリンクがあります段落の中に[リンク](https://www.w3.org/)があります。◉ Markdown [リンクのテキスト](リンクのアドレス) という形式◉ HTML a は "anchor"（錨）、href は "hypertext reference" ※諸説あるリンク24Markdown HTML
# レベル1の見出し#### レベル4の見出しレベル1の見出し=============レベル2の見出し-------------レベル1の見出しレベル4の見出しレベル1の見出しレベル2の見出し◉ Markdown レベル1-2 のみ 2 種類の書き方ができる◉ HTML h は "heading"（見出し）、文字サイズを大きくするために使うのは NG 見出し25Markdown HTML
順序なしリストのアイテム 1順序なしリストのアイテム 2順序なしリストの入れ子 順序なしリストのアイテム 3- 順序なしリストのアイテム1- 順序なしリストのアイテム2␣␣␣␣- 順序なしリストの入れ子- 順序なしリストのアイテム3* 順序なしリストのアイテム1* 順序なしリストのアイテム2◉ Markdown アイテム（文）の先頭に - または * を付ける◉ HTML ul は "unordered list"、li は "list item"箇条書き (1) 順序なしリスト26Markdown HTML
順序付きリストのアイテム 1順序付きリストのアイテム 21. 順序付きリストのアイテム12. 順序付きリストのアイテム2- 順序なしアイテム1- 順序なしアイテム2␣␣␣␣1. 順序付きアイテム␣␣␣␣2. 入れ子で組み合わせも可能- 順序なしアイテム3◉ Markdown アイテム（文）の先頭に 1. 2. … を付ける◉ HTML ol は "ordered list"、li は "list item"箇条書き (2) 順序付きリスト27Markdown HTML
これは普通の文章です。> ここは引用された文章です。>> 引用内でも _Markdown_ が使える場合もあります。これは普通の文章です。 ここは引用された文章です。 引用内でも Markdown が使える場合もあります。◉ Markdown 引用した文の段落の先頭に > を付ける◉ HTML blockquote は長文 (block) の引用 (quote) に使われる引用28Markdown HTML
インラインコードは `piyo code` のように書きます。␣␣␣␣# 複数行にまたがるコード 1␣␣␣␣puts 'Hello World!'```# 複数行にまたがるコード 2puts 'I love cat.'```インラインコードは piyo code のように書きます。 # 複数行にまたがるコード 1Puts 'Hello World!'◉ Markdown インラインコードは `（バッククオート）で囲む。コードブロックには2 種類の書き方がある◉ HTML pre は "preformatted text"（整形済みテキスト）で、その中身の改行やスペースがそのまま表示されるコード29Markdown HTML
キレイに表示された例30
Reference◉ TAG indexhttps://www.tagindex.com/◉ HTMLクイックリファレンスhttp://www.htmq.com/◉ 日本語Markdownユーザー会http://www.markdown.jp/31
◉ 空白（半角スペース）, 改行, 空行 大事！###見出しのつもり本文のつもり-リストのつもり-リストのつもり###見出しのつもり本文のつもり -リストのつもり -リストのつもりよくあるやらかし32Markdown HTML
◉ とくに改行・空行はこまめに入れるよう意識しよう！◉ プレビューがあるツールなら、プレビューでチェックしよう！###␣見出しのつもり↲本文のつもり↲-␣リストのつもり-␣リストのつもり見出しのつもり 本文のつもりリストのつもり リストのつもり よくあるやらかし «修正»33Markdown HTML
◉ いろんな種類のリストをごちゃまぜにする○ 出力された HTML を見てみましょう○ なんでその混ぜ方ができないのかわかります◉ 見出しレベルをごちゃまぜにする○ 本来はレベル 1 から 2, 3, … と順に入れ子にする○ これがめちゃくちゃでも怒らない render もある○ 怒る render もある（最近は減った気がする）稀によくあるやらかし34
Markdown のルールチェック◉ markdownlint/markdownlinthttps://github.com/markdownlint/markdownlint○ docs/RULES.md○ $ mld hoge.md --config .mdlcfg.json○ ルールの除外も可能○ Auto fix はない（VSCode 拡張機能にある）35
Any questions ?You can find me at @tmd45Presentation template by SlidesCarnivalThanks!36
tmd45
fendo181
mpyw
alexandresalome
ryunen344
takahirom
mrstsgk
cocoeyes02
speed1313
mski_iksm
masayaaoyama
10xinc
gennei
reverentgeek
nonsquared
lauravandoore
sferik
malarkey
vanstee
bryan
jonrohan
brad_frost
zenorocha
jennybc
brettharned