Markdown と学ぶ HTML 基礎（2018/8/31 e-Navigator 勉強会#4）

<h1>Markdown と学ぶ HTML 基礎</h1> 2018/8/31 Fri. e-Navigator Community #4

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

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

イントロダクションとりあえずそれぞれ見てみよう 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

<p>仕様変更があったのでコードを修正しました。</p> <h2>修正内容</h2> <ul> <li>本文の文字サイズを大きくする</li> <li>アイコンのまわりに余白を追加する</li> </ul> <h2>確認方法</h2> <ul> <li><a href="https://example.com">確認用のサイト</a>で表示を確認してください</li>
</ul> HTML 例 13

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

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

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

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

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

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

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

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

*強調* もしくは _強調_（斜体として表現されることが多い） **強い強調** もしくは __強い強調__ （太字として表現されることが多い） <p><em>強調</em> もしくは
<em>強調</em>（斜体として表現されることが多い） </p> <p><strong>強い強調</strong> もしくは <strong> 強い強調</strong>（太字として表現されることが多い） </p> ◉ Markdown 強調したい文字を * や _ で囲む。斜体より太字のほうがよく使われる ◉ HTML em は "emphasis"（強調）強調 22 Markdown HTML

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

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

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

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

これは普通の文章です。 > ここは引用された文章です。 > > 引用内でも _Markdown_ が使える場合もあります。 <p>これは普通の文章です。
</p> <blockquote> <p>ここは引用された文章です。 </p> <p>引用内でも <em>Markdown</em> が使える場合もあります。</p> </blockquote> ◉ Markdown 引用した文の段落の先頭に > を付ける ◉ HTML blockquote は長文 (block) の引用 (quote) に使われる引用 27 Markdown HTML

インラインコードは `piyo code` のように書きます。 ␣␣␣␣# 複数行にまたがるコード 1 ␣␣␣␣puts 'Hello
World!' ``` # 複数行にまたがるコード 2 puts 'I love cat.' ``` <p>インラインコードは <code>piyo code</code> のように書きます。 </p> <pre> <code># 複数行にまたがるコード 1 Puts 'Hello World!'</code> </pre> ◉ Markdown インラインコードは `（バッククオート）で囲む。コードブロックには2 種類の書き方がある ◉ HTML pre は "preformatted text"（整形済みテキスト）で、その中身の改行やスペースがそのまま表示されるコード 28 Markdown HTML

キレイに表示された例 29

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

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

Markdown と学ぶ HTML 基礎（2018/8/31 e-Navigator 勉強会#4）

Markdown と学ぶ HTML 基礎（2018/8/31 e-Navigator 勉強会#4）

Yoko TAMADA

More Decks by Yoko TAMADA

Other Decks in Programming

Featured

Transcript

<h1>Markdown と学ぶ HTML 基礎</h1> 2018/8/31 Fri. e-Navigator Community #4

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

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

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

HTML (.html) ◉ プログラミング言語／マークアップ言語 ◉ HyperText Markup Language ◉ ブラウザが解釈して表示してくれる

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

Markdown (.md) ◉ 文章の書き方（記法） ◉ 手軽に文章構造を表現する ◦ 元は電子メール（プレーンテキスト）の書き方 ◦ 2004年

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

Markdown が HTML に変換される 9

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

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

仕様変更があったのでコードを修正しました。 ## 修正内容 - 本文の文字サイズを大きくする - アイコンのまわりに余白を追加する ## 確認方法 -

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

◉ Markdown をどんな HTML に変換するかはサイト次第 ◉ HTML をどんなスタイル（見た目）で表示するかもサイト次第

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

HTML の雛形 17 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

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

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

書き方のルール ◉ 段落 ◉ 強調 ◉ リンク ◉ 見出し ◉

<p>これは段落です。 2つの文があります。 </p> <p>これは別の段落です。ここにも 2つの文があります。 </p> <p>段落のなかに改行を入れられる<br>場合もあります。 </p> ◉ Markdown

強調もしくは _強調_（斜体として表現されることが多い）強い強調もしくは強い強調（太字として表現されることが多い） <p><em>強調</em> もしくは

<p>段落の中に<a href="https://www.w3.org/">リンク</a> があります</p> 段落の中に[リンク](https://www.w3.org/) があります。 ◉ Markdown [リンクのテキスト](リンクのアドレス) という形式 ◉

# レベル1の見出し #### レベル4の見出しレベル1の見出し ============= レベル2の見出し ------------- <h1>レベル1の見出し</h1> <h4>レベル4の見出し</h4>

<ul> <li>順序なしリストのアイテム 1</li> <li>順序なしリストのアイテム 2</li> <ul> <li>順序なしリストの入れ子 </li> </ul> <li>順序なしリストのアイテム

<ol> <li>順序付きリストのアイテム 1</li> <li>順序付きリストのアイテム 2</li> </ol> 1. 順序付きリストのアイテム1 2. 順序付きリストのアイテム2

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

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

キレイに表示された例 29

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

Any questions ? You can find me at @tmd45 Presentation