HTMLをMarkdown記法で書けるようになると効率が良い！

慣れれば体裁の整った文書を簡単に作成できるようになります。Wordよりも速くできるのがいいと思いますし(人によるか…笑)、私はブログ作成に利用しています。文書をHTML化することで、なんとなくいい感じの見た目をブラウザが勝手にレンダリング(描写)してくれます。私にとってはWordでやるような面倒な細かいところを勝手にしてくれるのでとても便利です。

やっていることは結局は「HTMLを書いている」というだけなのですが、ブラウザで表示内容を確認してデザイン・体裁がOKなら印刷、ブログ投稿へ進むという感じです。

【Markdown記法を覚える】
【参考】
【必要なタグとは？】
【例】
【確認方法】
【変換方法】
1. 「Vscodeの拡張機能を使う」をご紹介
【まとめ】

【Markdown記法を覚える】

これが基本になります。例えば、HTMLタグなら見出しをh2で囲んで記述しますが、Markdownではh2に相当したものを「## (半角スペース)見出し」で記述します。こういうのをひとつずつ覚えていきます。

Markdown記法は派生がいくつかあり、それらの中で多くのHTMLタグは共通しているのですが、細かいところや使えないものがそれぞれあったりします。

だから、文書作成に対して、「自分なりに必要なタグや鉄板」を見つけていくことが情報の整理につながると思います。

【参考】

「markdown　基本　一覧」
https://qiita.com/oreo/items/82183bfbaac69971917f
「markdown 変換ツール」
https://www.atmarkit.co.jp/ait/articles/1804/27/news034.html
https://akamist.com/tool/markdown2html/index.php

【必要なタグとは？】

見出しと…パラグラフと改行、あとリンクと…リストに画像と水平線と強調とコード？preタグ？あとはテーブルは…別のツール使ったほうが速そうだ。出典があるなら引用符必要だね。それくらいかな？これくらいで一般的な文書はできそうだ。

【例】

# 見出し1
## 見出し2

何も書かなければパラグラフのpタグ。

途中で改行を入れたければ、半角スペースを2つ文末に  
入れてエンターで改行

* 黒丸リストなら
    * アスタリスクと
    * 半角スペース
* 入れ子のできるよ！

1. 数字リストなら
    1. 1ドット半角スペース
    2. 数字を変えて2ドット半角スペース
2. または

1. 全部
    1. 1ドット半角スペース
    1. 1ドット半角スペース
1. 次のタグが来ないとリストが続く！？

アスタリスク3つで水平線
***

これだけで簡単自動リンク
<https://www.amazon.co.jp>

表示名変えたいなら  
Amazon APIのアクセスキーもしくはシークレットキーもしくはトラッキングIDが設定されていません。「Cocoon設定」の「API」タブから入力してください。(https://www.amazon.co.jp)

強調は**囲む**こと

codeやpreについて。
バッククォートを1つ、2つ、3つと試したが、3つが無難、かな？
「```」
file = File.read("sss.txt")
file = file.split("ー")
file = file.reverse
puts file
「```」

dl、dt、dd、これはHTMLタグ？
<dl>
<dt>xyz</dt>
<dd>abcdefg</dd>
<dt>xyz</dt>
<dd>abcdefg</dd>
<dt>xyz</dt>
<dd>abcdefg</dd>
</dl>


画像はリンクにびっくりを先頭に付けるだけ
![ダミー画像](http://placehold.it/100)

~~打ち消す~~(VSCODEのみで可能。派生によって分かれる。)

テーブルはどうする？
単純なテーブル？ | 縦棒でOK
- | -
値1 | 値2
あああああああああああ | いいいいいいいい
ボーダーはstyle=""で設定する

引用はよく使う？
> wsedfg  
これによって
>> 入れ子

【確認方法】

上記の「例」をコピペして、中断くらいのcode・preの「“`」の「」を外して、WebツールかVSCODEで変換すると、HTML化されます。できない場合は検索してください。ごめんなさい。ここでできないとVSCODEやHTML、Markdownとかもう少し自分で調べたほうがいいということだと思います。力も付きますしね！

変換しなくても、VSCODEで右下の言語モードの選択を「markdown」にして、プレビューするとHTMLが表示され、リアルタイムで確認ができます。

ブログアップに限らず、体裁を整えた文書をサクッと作りたい時に効率がいいと思います。覚えることも多くはないので。

【変換方法】

Webサイトを使う
Vscodeの拡張機能を使う

「Vscodeの拡張機能を使う」をご紹介

拡張機能「Markdown PDF」をインストールする。
Markdown記法のコードを拡張子「.md」で保存する。
「表示」からコマンドパレットを選択
「mark」まで打ち込めば、「Markdown PDF: Export(html)」が出てくる。
クリックしたら処理が始まる。
同じカレントディレクトリにhtmlファイルが作成されます。

ちなみにHTMLソースコード見てみると、まぁいろいろ書かれてますわ……。

【まとめ】

覚えたらめっちゃいいと思う。効率上がると思う。
「～したら良い！」ってのは人生においてなんでもそうなんだけどね。
お金はあったほうがいい！記憶はたくさんあったほうがいい！勉強したらいい！とか。