HTML手打ちサイト更新簡略化計画


もくじ


マークダウンの書き方

マークダウンには基礎となるものに加えて、拡張バージョンがいくつか存在します。基礎だけでは、テーブルなどの表現ができないからです。ここではMarkdown Extraという拡張バージョンを使います。

ベーシックなマークダウン

基礎はこちらで確認できます。
Daring Fireball: Markdown Basics (公式)

見出し、引用、リストなど

基礎の書き方を、簡単にまとめます。マークダウンはHTMLと混在可能なので、マークダウンでできないところはHTMLタグで補います。

# 見出しh1
## 見出しh2
### 見出しh3
#### 見出しh4
##### 見出しh5
###### 見出しh6
#の次にスペースをひとつ置くと見出しになります。#の数が見出しのレベルになります。

見出し1と見出し2については、イコール = や ハイフン - で下線を引くこともできます。

見出しh1(= や - は少しでいい)
====================
見出しh2(1個でも大丈夫だった)
---------------------

> 引用blockquoteは  
> >のあとにスペースをひとつ置きます。
> 
> ブロック要素です。

段落pは、前後を空行にします。

途中で改行brしたいときは、  
改行位置にスペースを2つ置いてから改行します。

**重要strongはアスタリスク2つ**(または__アンダーバー2つ__)

*強調emはアスタリスク1つ*(または_アンダーバー1つ_)

アスタリスクを普通に表示したいときはバックスラッシュでエスケープする
\*momo*

- 順序なしリストulは、
- liを*か+か-かでマークします
- 半角スペースを置くのを忘れずに

1. 順序つきリストolは、
2. liを半角数字.でマークします
3. 半角スペースを置くのを忘れずに

- liを複数行pにするには、

    前後を空行にして行頭に半角スペース4つを置きます

    3行め

- 何行でもいける(改行は半角スペース2つで普通にできる)

もし行の先頭が数字、ピリオド、スペースと続くと順序つきリストになってしまうので、
バックスラッシュでエスケープします。

1967. 私が生まれた年です。

1967\. 私が生まれた年です。

横罫線hrはアスタリスクかハイフンかアンダースコアを1行に3つ以上含める。
スペースが入ってもいい。文字は入れないこと。
***
 * * *
---
___

リンク

リンクはコードの後に実例を表示します。

[My Site](https://update-easy.mayoi.tokyo/) リンク

[My Site](https://update-easy.mayoi.tokyo/ "タイトル") タイトルを含められる(マウス乗せると出る)

表示:
My Site リンク

My Site タイトルを含められる(マウス乗せると出る)

リンクは[他の場所に書いたやつ][1]を参照することができる。タイトルも含められる。  
[私のサイト][簡略化計画]は作成中です。

[1]: https://www.google.com/ "Google"
[簡略化計画]: https://update-easy.mayoi.tokyo/ "HTML手打ちサイト更新簡略化計画"

表示:
リンクは他の場所に書いたやつを参照することができる。タイトルも含められる。
私のサイトは作成中です。

画像

画像の表示。リンクの書き方に似ています。
![画像alt](https://update-easy.mayoi.tokyo/images/xxx.png)

![画像alt](https://update-easy.mayoi.tokyo/images/xxx.png "タイトル")

![画像alt][1]
[1]: https://update-easy.mayoi.tokyo/images/xxx.png "タイトル"

コードとコードブロック

コードcodeはバッククオートで`<code>`囲みます。
バッククオートはキーボードの@のところにあるやつ。
(7のところにあるのはシングルクオート)

& < > はバッククオートで囲むことによって&amp; &lt; &gt; に変換される。
つまり& < > はそのまま書いていい。

コードのブロック<pre><code>~</code></pre>は、各行の冒頭に半角スペース4つを置く。

    <ul>
      <li>項目1</li>
      <li>項目2</li>
    </ul>

Windows:ショートカットキーでラクをする(とくに改行)

たとえば、今まで書き溜めた作品を大量にマークダウンファイルにしようとしたとき。改行のたびに半角スペース2つを入力するのがけっこう大変なんですよね。とくに日本語入力してるとき。

なので、最初に作品をマークダウンファイルにコピペしてから(または日本語入力してから)、英数入力モードにして、行末に半角スペースをダダダーっと入れていくことになります。

このとき、半角スペース2つを一つのキーで入力できたらラクですよね。
私はこのショートカットをAutoHotkeyというソフトで設定しています。

【AutoHotkey】キーに別の機能を割り当てるソフトの使い方
不要なホットキーをAutoHotKeyを使って無効化する方法【Windows 10】

特定のエディタを使っているときだけ有効にするという設定ができます。
私の設定はこんな感じ。

#IfWinActive,ahk_exe Atom.exe  ;Atomでのみ機能する

NumLock::Return ;NumLockを無効化

F1::Send,{NumpadMult}{NumpadMult}  ;F1を**に
F2::Send,{sc039}{sc039}  ;F2を半角スペース2つに
F3::Send, {Enter}  ;F3をEnterに

Atomというエディタを使っているので、そのときだけ有効になるようにしています。ついでに、バックスペースと間違って押してしまうことの多いNumLkキーを無効にしています。

Macのほうはわからないので検索してみてください。

拡張マークダウン(Markdown Extra)

マークダウンがもう少し使いやすくなります。ブロック要素の扱い・属性追加・テーブル・定義リスト・脚注などが追加されます。
php Markdown Extra (公式)

簡単にまとめます。

ブロック要素について

ベーシックなマークダウンでは、ブロック要素は空行で挟まなければならずインデントも不可ですが、この点が少しゆるくなります。またブロック要素の中でもマークダウンが使えるようになります。

  1. ブロックレベルの HTML 要素「<div> <table> <pre> <p>など」は半角スペース3つまでならインデント可能
  2. リスト内のブロック要素は、リスト項目と同じ量のスペースでインデントが必要
  3. ブロック要素の中でマークダウンを使うには、markdown="1"を追加する。
    <div markdown="1">
    ブロック内で**マークダウン**が使えるよ
    </div>
  4. <p>タグにmarkdown属性を使っても、普通の<p>同様にリストやブロック要素は含められない。
  5. テーブルのセルにリストやブロック要素を含めたい場合はmarkdown="block"と書く。markdown="1"と書いた場合はインライン要素のマークダウンのみ適用される。

属性を追加する

ページ内リンクのためにIDを追加するとき(#をつける)
### 見出しh3 {#3}

[見出しh3へのリンク](#3)

スタイルシート用のクラスを追加するとき(.をつける)  
### 見出しh3 {.mi}

単純な値を持つカスタム属性を追加するとき(属性名、等号、値の順に指定)
### 見出しh3 {lang=fr}

属性は複数書ける
### 見出しh3 {#3 .mi .pon lang=fr}

リンクと画像は、(url)の直後に書く
[link](url){#id .class}  
![img](url){#id .class}

コードブロックの別な書き方

3つ以上のチルダかバッククオートを含むフェンス行で挟む(チルダの数は上下同じにする)。
この書き方ならリストの中にコードブロックを追加できる。
~~~~~~~~~~~~~~~~~~~~~
コードです
~~~~~~~~~~~~~~~~~~~~~

``````````````````
コードです
``````````````````

クラス名の指定ができる(最初のフェンス行の端に書く。ドットは必須ではない)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .html
コードです
~~~~~~~~~~~~~~~~~~~~~~~~~~~~

属性の指定もできる
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {.html #example-1}
コードです
~~~~~~~~~~~~~~~~~~~~~~~~~~~~

テーブルを書く

単純なテーブル(左右のパイプはあってもなくても出力結果は同じ)。
各セルにはインライン要素のマークダウンが使える。
※各コードは公式サイトより引用

First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

コロンを使って列の中身の左右揃えができる

| Item      | Value |
| --------- | -----:|
| Computer  | $1600 |
| Phone     |   $12 |
| Pipe      |    $1 |
右揃え

| Item      | Value |
| --------- |:----- |
| Computer  | $1600 |
| Phone     |   $12 |
| Pipe      |    $1 |
左揃え

| Item      | Value |
| --------- |:-----:|
| Computer  | $1600 |
| Phone     |   $12 |
| Pipe      |    $1 |
中央揃え

定義リスト

dtとddをこのように書く。ddの:のあとの半角スペースは4つ。
長くなった場合の次の行のインデントはしてもしなくてもよい(出力結果は同じ)。
項目と項目の間に空行を挟む。

みけねこ
:   みけねこの特徴は毛の色である。白、黒、茶の3色からなり、 
    三毛猫の名前の由来になっている。

くろねこ
:   黒い毛で全身を覆われている。暗闇で目だけが光っていることがある。

または、

みけねこ
:   みけねこの特徴は毛の色である。白、黒、茶の3色からなり、 
三毛猫の名前の由来になっている。

くろねこ
:   黒い毛で全身を覆われている。暗闇で目だけが光っていることがある。

ddは複数書ける。

くろねこ
:   黒い毛で全身を覆われている。暗闇で目だけが光っていることがある。
:   縁起が悪いと言われることがあるが、黒猫に縁起をどうこうする力はない。

dtも複数書ける。

みけねこ
くろねこ
:    どちらも非常にかわいい。

ddの前に空行がある場合、ddはpでラップされる。
ddには複数の段落を含めることができる。他のブロック要素も含めることができる。

脚注

脚注とは、本文の下の方につける注記[^1]である。

[^1]: これが脚注である。

表示:
脚注とは、本文の下の方につける注記1である。次ページはHTMLである


  1. これが脚注である。