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


もくじ


HTMLタグも使う必要があります

マークダウンとマークダウンエクストラで非常にラクにコンテンツを書けるようになるんですが、どうしてもHTMLタグを使う場面が出てくるんですよね。
IDをつけたいけど{#id}が使えない箇所があるとか、そもそもマークダウンがカバーしていないタグとか。

これらは単語登録しておくと入力が楽になります。

マークダウンとマークダウンエクストラでカバーできないHTMLタグ

まず、マークダウンとマークダウンエクストラでカバーできないHTMLタグを、使うことが多そうなものをあげていってみます。
どのように表示されるのかも示したいのでコードブロックなしで。CSSの設定はしていません。

<s></s> s要素(すでに正確ではない内容)
<cite></cite> cite要素(引用元 作品のタイトルのみを含める)
<q></q> q要素(引用フレーズ。q cite=""で引用元のURL)
<sup></sup> 上につけるとsup要素(上付き文字)こんな感じ
<sub></sub> 下につけるとsub要素(下付き文字)こんな感じ
<i></i> i要素(他と区別されるテキスト、思考・専門用語など)
<b></b> b要素(重要性を伝えず、注意だけを引きたいテキスト)
<u></u> u要素(ラベル付けされたテキスト)
<mark></mark> mark要素(目立たせたい特定のテキスト)
<ins></ins> ins要素(あとから追加されたテキスト)
<del></del> del要素(削除された内容)

それから、別タブでリンクを開きたいとき、ダウンロードリンク、など。

<a href=" URL " target="_blank" rel="noopener">アンカーテキスト</a>
<a href="" download="ファイル名">アンカーテキスト</a>

ページ内リンクはマークダウンで書けるけど、マークダウンを使えないときのために
<a href="# "></a> ページ内リンク

引用ブロックで引用元URLを含めておきたいとき、ブロック以外の引用

<blockquote cite=" 引用元URL "></blockquote> 引用
<q cite=" 引用元URL "></q> 引用(フレーズ程度)
<cite> 引用元のタイトルのみ </cite>

波括弧{ }が使えないときのために

それから、{#}が使えないときのために。見出しなどには使えるんですが、何でもないところには使えないんですよね。

<a id=""></a> ページ内リンクのリンク先を設定

あと、クラス指定したいところで{.}が使えないときは、HTMLタグを普通に書かないといけないので……

class=""  

divタグ

divはマークダウンでは書けないのでタグで書く必要があります。

<div></div> この範囲をグループ化

他にIDやクラス設定したいときにタグで書く必要があるものをいくつかあげます。

リストのタグ

リスト
<ul>
<li></li>
</ul>

<ol>
<li></li>
</ol>

<ol start=""> 開始番号を変更する
<ol reversed> 順序を逆順にする

<li value=""> 項目の番号を変更する

<dl>
<dt></dt>
<dd></dd>
</dl>

テーブル

テーブル
<table>
<caption></caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>

テーブルの縦グループの使い方
<colgroup>
<col style="background-color: #;">
<col span="2" style="background-color: #;">
</colgroup>

テーブルタグを書く順番
 table開始タグ
   caption要素
   colgroup要素 または col要素
   thead要素
   tbody要素
   tfoot要素
 table終了タグ

そのほか

<p></p> 段落
<pre></pre> 整形済みテキスト
<code></code> コンピューターコード
<pre><code>~</code></pre> コードブロック

<nav></nav> ナビゲーション部分
<header></header> ヘッダー部分
<footer></footer> フッター部分
<main></main> メイン部分
<address></address> 連絡先情報

マークダウン不使用時はこれも単語登録してあるとラク、とか

<br> 改行
<hr> 区切り

おまけ:特殊文字
< → &lt;
> → &gt;
" → &quot;
& → &amp;
' → &#39;
(空白文字) → &nbsp;

© → &copy;
¥ → &yen;

フォームタグについて

フォームタグはマークダウンではいっさいカバーされていません。
マークダウンはそもそもWeb ライター向けのテキストから HTML への変換ツールです。

Markdown のアイデアは、散文の読み書き、編集を簡単にすることです。HTML は出版フォーマットです。マークダウンは記述形式です 。したがって、Markdown の書式設定構文は、プレーン テキストで伝達できる問題のみに対処します。
Daring Fireball: Markdown Syntax Documentation

いちおうずらっと書きますが、HTMLで作れるのはフォーム画面だけで、送信されたデータの処理はPHPなどを使う必要があります。

フォームの表示状態

form:ブロック
input type="text"(一行テキスト入力エリア)
(複数行のテキスト入力エリア)

select(プルダウンメニュー)

fieldset:ブロック
legend(fieldsetのラベル) お名前:
ご住所:

input type="radio" 未チェック
input type="radio" チェック
input type="checkbox" 未チェック
input type="checkbox" チェック
input type="date" 日付入力
input type="month" 年月入力
input type="week" 週入力
input type="time" 時間入力
input type="datetime-local" ローカル日時入力
input type="number" 数値入力
input type="range" おおまかな数値の入力
input type="color" カラーコード入力

フォームのコード

<form method="post" action="">form:ブロック<br>
<input type="text" name="name">input type="text"(一行テキスト入力エリア)<br>
<textarea>textarea</textarea>(複数行のテキスト入力エリア)<br>
<input type="submit" value="submit"><br>
<select name="select">
  <optgroup label="optgroup label">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
</optgroup>
  <optgroup label="optgroup label">
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</optgroup>
</select>select(プルダウンメニュー)<br>
<button>button</button><br>
<fieldset>fieldset:ブロック<br>
<legend>legend(fieldsetのラベル)</legend>
  お名前:<br>
  ご住所:<br>
</fieldset><br>
<input type="radio" name="example" value="選択肢1">input type="radio" 未チェック<br>
<input type="radio" name="example" value="選択肢2" checked>input type="radio" チェック<br>
<input type="checkbox" name="example" value="選択肢1">input type="checkbox" 未チェック<br>
<input type="checkbox" name="example" value="選択肢2" checked>input type="checkbox" チェック<br>
<input type="date" name="example1">input type="date" 日付入力<br>
<input type="month" name="example1">input type="month" 年月入力<br>
<input type="week" name="example1">input type="week" 週入力<br>
<input type="time" name="example1">input type="time" 時間入力<br>
<input type="datetime-local" name="example1">input type="datetime-local" ローカル日時入力<br>
<input type="number" name="example1">input type="number" 数値入力<br>
<input type="range" name="example1">input type="range" おおまかな数値の入力<br>
<input type="color" name="example1">input type="color" カラーコード入力<br>
</form>

次ページ:参考リンク