未分類

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

投稿日:2020年2月7日 更新日:

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

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

【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](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の拡張機能を使う」をご紹介

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

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

【まとめ】

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









-未分類

執筆者:

関連記事

no image

Thunderbirdのメールを別のThunderbird(別のパソコン)に移行する

【 使用している環境 】Windows10Pro64bitThunderbird60.6.1 【結論】 「Thunderbirdフォルダ」 をコピペする。 【方法】 新しいパソコンにThunderbi …

no image

天災や障害は忘れたときにやってくる

パソコン障害、ネットワーク障害から天災まで。 テーマとしては、普段は何気なくしておいてもいいけど、何か起きたときのために対策とっておかないといけないよねということ。それって誰もがわかってるけどできない …

no image

Javascriptで簡単な条件分岐なら三項演算子が書きやすい?

結論 慣れたら同じ。 基本形 //変数宣言 let x = 1; //三項演算子 (x == 1) ? alert(“1です”) : (x == 2) ? alert(“2です”) : alert(” …

no image

RailsのScaffoldを久しぶりに利用する

いろいろ忘れていてもうアプリ開発は出来ないです。 昔、ウソかホントかはわからないが、アメリカで数年間バッチファイルに仕事をさせて収入を得ていたサラリーマンがいる記事を見たことがある。会社としてはダメな …

no image

YahooメールをThunderbirdやOutlookのIMAPで利用する方法

参考リンク IMAP設定方法 https://mail.yahoo.co.jp/info/options/imapprofile/ メールソフトで送受信するには(Yahoo!メールアドレスの場合) メ …