Feedforce Developer Blog

フィードフォース開発者ブログ

社内勉強会で『Markdown と学ぶ HTML 基礎』を発表しました

虚構集めてますか? こんにちは、白魔の id:tmd45です。

社内勉強会の担当で『Markdown と学ぶ HTML 基礎』という発表をしました。

タイトルの通りごくごく基本的な内容ですが、ちょっとした部分で「知らなかった!」みたいなのが結構あったみたいで盛り上がりましたv( ̄Д ̄)v

speakerdeck.com

スライドはほぼ初学者向けに書いていますが、これは 8 月末に開催した e-Navigator 勉強会#4 向けに作成したスライドの焼き増し(第二版)だからだったりします。

一部 HTML の間違いを修正し、Markdown parser や linter の情報を追記しております。

以下、FFTT 恒例の感想付せん返信です。

感想付せん返信

  • Markdown にまだ慣れてない感があるので警察こわい
  • 警察👮こわい
    • こわくないよ〜 勉強会で発散したから しばらく こわくないよ〜
    • ぜひこれを機会に文章構造と HTML を意識してみてください!
  • HTML 使いこなすためにはまず文章構造をですね…
    • それな
  • 勉強になりました!捕まらないように気をつけます…
    • (ΦωΦ)フフフ…
  • ul タグと ol タグの意味を理解できました
    • やったね!
  • はじめてプログラミングに触れた日、ドットインストールで HTML から始めた時を思い出しました!
    • ( ;∀;) イイハナシダナー
  • tmd45 さんが楽しそうに話されていて楽しかったです!!
    • 照れる〜 🤑
  • WHATWG HTML Living Standard もよろしくオネシャス!
    • これは知らなかった!へ〜

HTML5 や HTML 5.1 は W3C が標準化を進めていますが、W3C とは別に、Apple, Chrome, Opera が設立した WHATWG という団体が独自に策定を進めている HTML 仕様です。HTML Living Standard と呼ばれ、バージョン番号や、何年何月何日版という概念もなく、毎日改版、修正、強化が進められています。

HTML Living Standard - とほほのWWW入門

  • 奥深き Markdown …
    • GitHub Flavor とか方言や拡張がいろいろあるので、あっちでは上手く書けたのがこっちでは崩れるとか
    • 文章構造をシンプルにすれば、あまり悩まなくて済んだりもします 😇
  • リストに - [ ] を混ぜるのによく困ってますね
    • これも HTML がどうなって「意図どおりでない」表示なってしまうのか把握できるといいですね 😇
    • もしかしたら、インデントのスペースの数が合ってないとかも影響してるかも?
  • 基礎的な内容だと思ったけど知らないこともあって良かった!!
    • そう言ってもらえるとありがたいです!😊
  • 総合職向け勉強会で話してもいい内容だと思いました
    • たしかに 🦀
  • リストの中の複数行コードという積年の悩みが消えました。ありがとうございます!
    • この質問に答えてくれたのは id:masutaka26 ですけど
    • これもやっぱり Markdown の拡張と、文章構造/HTML の話の絡み合いですねー
  • Markdown のリンク記法はめんどいから Alfred Workflow に頑張ってもらってます
    • 私は Chrome 拡張の Create Link を使ってます!
  • はてな記法に触れるやさしさ
    • やさしさなんだろうか(笑)
    • Markdown が台頭してくる前は、世の中の文章構造は全部はてな記法で書ければいいのにと思ってた時期もありました😏
  • font color を red にするにはどうしたらよいですか?
    • ( ^ω^) おっ?
    • マジレスすると「文字を赤色にする」のは文章構造ではないので、たとえば「強調」の構造に対して Style(CSS)に color: red を定義するなど、文章構造とスタイルは分けるほうが良いですね 😇

気づいたら社内の派閥投票がされていた!

f:id:tmd45:20181012170816j:plain:w400

私は「Shift キー押さなくて済むので - リスト派」です。

CommonMark(0.28)の仕様でも、どちらかに制限されているわけではないので、どちらがジャスティスってことも無いみたいですね。

勉強会後の雑談で「 - リストを書いてる途中で、リアルタイムプレビューがせっかちで一瞬 見出し 記法(レベル 2 見出し)として扱われる」ことに気がついて * リストに宗旨変えしてる人がいました!

変換される HTML(というか文章構造)が把握できるとそんな気づきもあったりします!ぜひみなさんも Markdown から HTML、そして文章構造について知ってみてくださいね。