Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yoko TAMADA
October 12, 2018

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

『Markdown と学ぶ HTML 基礎(2018/8/31 e-Navigator 勉強会#4)』 https://speakerdeck.com/tmd45/31-e-navigator-mian-qiang-hui-number-4
より、一部修正・追加情報あります。

Yoko TAMADA

October 12, 2018
Tweet

More Decks by Yoko TAMADA

Other Decks in Programming

Transcript

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

    ◉ W3C という非営利団体が仕様を定めている ◦ 1990年 Tim Berners-Lee 氏が考案 ◉ HTML にもバージョンがある ◦ 現在の最新は HTML 5.2 5
  2. ◉ Markdown をどんな HTML に変換するかは サイト次第 ◉ HTML をどんなスタイル(見た目)で 表示するかもサイト次第

    ◉ このスライドでは一般的なものを紹介します ◦ おもに GitHub で使うもの中心 Attention 15 !
  3. HTML の雛形 18 <!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 です
  4. 書き方のルール ◉ 段落 ◉ 強調 ◉ リンク ◉ 見出し ◉

    箇条書き(順序なし、順序付き) ◉ 引用 ◉ コード 21
  5. <p>これは段落です。 2つの文があります。 </p> <p>これは別の段落です。ここにも 2つの文があります。 </p> <p>段落のなかに改行を入れられる<br>場合もあります。 </p> ◉ Markdown

    段落どうしは空行 ↲で分ける。文末に空白␣2つで改行 ◉ HTML p は "paragraph"(段落)、br は "break"(改行) 段落 22 これは段落です。2つの文があります。 ↲ これは別の段落です。 ここにも2つの文があります。 ↲ ↲ 段落のなかに改行を入れられる␣␣ 場合もあります。 Markdown HTML
  6. *強調* もしくは _強調_(斜体として表 現されることが多い) **強い強調** もしくは __強い強調__ (太字として表現されることが多い) <p><em>強調</em> もしくは

    <em>強調</em>(斜体とし て表現されることが多い) </p> <p><strong>強い強調</strong> もしくは <strong> 強い強調</strong>(太字として表現されることが多い) </p> ◉ Markdown 強調したい文字を * や _ で囲む。斜体より太字のほうがよく使われる ◉ HTML em は "emphasis"(強調) 強調 23 Markdown HTML
  7. # レベル1の見出し #### レベル4の見出し レベル1の見出し ============= レベル2の見出し ------------- <h1>レベル1の見出し</h1> <h4>レベル4の見出し</h4>

    <h1>レベル1の見出し</h1> <h2>レベル2の見出し</h2> ◉ Markdown レベル1-2 のみ 2 種類の書き方ができる ◉ HTML h は "heading"(見出し)、文字サイズを大きくするために使うのは NG 見出し 25 Markdown HTML
  8. <ul> <li>順序なしリストのアイテム 1</li> <li>順序なしリストのアイテム 2 <ul> <li>順序なしリストの入れ子 </li> </ul> </li>

    <li>順序なしリストのアイテム 3</li> </ul> - 順序なしリストのアイテム1 - 順序なしリストのアイテム2 ␣␣␣␣- 順序なしリストの入れ子 - 順序なしリストのアイテム3 * 順序なしリストのアイテム1 * 順序なしリストのアイテム2 ◉ Markdown アイテム(文)の先頭に - または * を付ける ◉ HTML ul は "unordered list"、li は "list item" 箇条書き (1) 順序なしリスト 26 Markdown HTML
  9. <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) 順序付きリスト 27 Markdown HTML
  10. これは普通の文章です。 > ここは引用された文章です。 > > 引用内でも _Markdown_ が使える場 合もあります。 <p>これは普通の文章です。

    </p> <blockquote> <p>ここは引用された文章です。 </p> <p>引用内でも <em>Markdown</em> が使える場合も あります。</p> </blockquote> ◉ Markdown 引用した文の段落の先頭に > を付ける ◉ HTML blockquote は長文 (block) の引用 (quote) に使われる 引用 28 Markdown HTML
  11. インラインコードは `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"(整形済みテキスト)で、その中身の改行やスペースがそのまま 表示される コード 29 Markdown HTML
  12. ◉ とくに改行・空行はこまめに入れるよう意識しよう! ◉ プレビューがあるツールなら、プレビューでチェックしよう! ###␣見出しのつもり ↲ 本文のつもり ↲ -␣リストのつもり -␣リストのつもり

    <h3>見出しのつもり </h3> <p>本文のつもり</p> <ul> <li>リストのつもり </li> <li>リストのつもり </li> </ul> よくあるやらかし «修正» 33 Markdown HTML
  13. ◉ いろんな種類のリストをごちゃまぜにする ◦ 出力された HTML を見てみましょう ◦ なんでその混ぜ方ができないのかわかります ◉ 見出しレベルをごちゃまぜにする

    ◦ 本来はレベル 1 から 2, 3, … と順に入れ子にする ◦ これがめちゃくちゃでも怒らない render もある ◦ 怒る render もある(最近は減った気がする) 稀によくあるやらかし 34
  14. Markdown のルールチェック ◉ markdownlint/markdownlint https://github.com/markdownlint/markdownlint ◦ docs/RULES.md ◦ $ mld

    hoge.md --config .mdlcfg.json ◦ ルールの除外も可能 ◦ Auto fix はない(VSCode 拡張機能にある) 35
  15. Any questions ? You can find me at @tmd45 Presentation

    template by SlidesCarnival Thanks! 36