$30 off During Our Annual Pro Sale. View Details »

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. Markdown と学ぶ
    HTML 基礎
    2018/10/12 Fri. FFTT#331 @tmd45
    第二版

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. Markdown が
    HTML に変換される
    9

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    確認方法

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

    ③ HTML 例
    13

    View Slide

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

    View Slide

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

    View Slide

  16. ◉ 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

    View Slide

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

    View Slide

  18. HTML の雛形
    18




    タイトル


    この部分が画面に表示される。


    - この文章は html です宣言
    - ここから html が始まります(言語は日本語)
    - ここから head(表示されない情報)が始まります
    - 文字コードは UTF-8 です
    - タイトルは「タイトル」です
    - ここまで head(表示されない情報)です
    - ここから body(本文)が始まります
    本文の内容
    - ここまで body(本文)です
    - ここまで html です

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    ◉ Markdown 段落どうしは空行 ↲で分ける。文末に空白␣2つで改行
    ◉ HTML p は "paragraph"(段落)、br は "break"(改行)
    段落
    22
    これは段落です。2つの文があります。

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


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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide


  26. 順序なしリストのアイテム 1
    順序なしリストのアイテム 2

    順序なしリストの入れ子


    順序なしリストのアイテム 3

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

    View Slide


  27. 順序付きリストのアイテム 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

    View Slide

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

    ここは引用された文章です。
    引用内でも Markdown が使える場合も
    あります。

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

    View Slide

  29. インラインコードは `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

    View Slide

  30. キレイに表示された

    30

    View Slide

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

    View Slide

  32. ◉ 空白(半角スペース), 改行, 空行 大事!
    ###見出しのつもり
    本文のつもり
    -リストのつもり
    -リストのつもり
    ###見出しのつもり本文のつもり -リストのつもり -リスト
    のつもり
    よくあるやらかし
    32
    Markdown HTML

    View Slide

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

    本文のつもり

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide