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

Markdown/HTML を覚えるついでに HTML/Markdown に入門しましょう。

e-Navigator 勉強会#4 https://e-navigator.connpass.com/event/96656/

Transcript

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

   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. HTML の雛形
    見えないけれどあるんだよ
    16
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. キレイに表示された
    例
    29
    

    View Slide

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

    View Slide

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

    View Slide