【保存版】初心者〜中級者向け〈 HTML タグ〉for Steemit（Japanese Ver.）

こんにちは！

HTMLタグを用いたブログレイアウトの HowTo は既に多くの方が投稿されています。
私自身そのような投稿には度々お世話になっておりますが、そのほとんどが英語でしたので日本語の充実したタグ集を作りたいなと思いました。

タグを使うと投稿を書き上げるために必要な時間が少々割り増しになりますが、少しの使用でもとても読みやすくなります。
何か複雑な事柄を説明する投稿には可読性の向上を図るために必須なのではないかとも思っています。

初心者の方はもちろんのこと、投稿に慣れている方にもレイアウトの参考に役立てていただければと思います。

① テキスト用

文字の編集

Steemit の表示	HTML タグ
太文字	<b>太文字</b>
斜体（イタリック）	<em>斜体（イタリック）</em>
*太文字の斜体*	<b><em>斜体（イタリック）</em></b>
~~削除済み~~	<del>削除済み</del>
`等幅テキスト`	<code>等幅テキスト</code>
リンクを貼る	<a href=“リンク先URL”>リンクを貼る</a>

※HTMLコードのサンプルなどを記述する場合の例　　　　　　　　　　　　

Steemit の表示	HTML タグ
`SampleCode`	`<pre><code>SampleCode</code></pre>`

見出しのサイズ

Steemit の表示	HTML タグ
header1	<h1>header1</h1>
header2	<h2>header2</h2>
header3	<h3>header3</h3>
header4	<h4>header4</h4>
header5	<h5>header5</h5>
header6	<h6>header6</h6>

上付き／下付き文字（小さい文字）

Steemit の表示	HTML タグ
上付き文字^{上付き文字}上付き文字	上付き文字<sup>上付き文字</sup>上付き文字
下付き文字_{下付き文字}下付き文字	下付き文字<sub>下付き文字</sub>下付き文字

行の編集

スタイル	Steemit の表示	HTML タグ
改行	任意の位置で改行する。	任意の位置で<br>改行する。
中央揃え	---中央に揃える--- --中央に揃える--	<center>中央に揃える</center>
引用符	引用符をつける	<blockquote>引用符をつける</blockquote>

リスト表示

スタイル	Steemit の表示	HTML タグ
番号なしリスト	Steemit UpVote SteemPower	<ul> <li>Steemit</li> <li>UpVote</li> <li>SteemPower</li> </ul>
番号付きリスト	Steemit UpVote SteemPower	<ol> <li>Steemit</li> <li>UpVote</li> <li>SteemPower</li> </ol>

以上、文字の編集に使える HTML タグでした。
<sup> と <sub> は通常、記号などに用いるタグなのだと思いますが
使い方によっては通常テキストの約半分の大きさのテキストとして
使用することができますので便利です。

② レイアウト用

１. テーブル表示

Steemit の表示

１行目　左（項目名）	１行目　右（項目名）
２行目　左（項目1）	２行目　右（項目1）
３行目　左（項目2）	３行目　右（項目2）
４行目　左（項目3）	４行目　右（項目3）

HTML コード

<table>
　<tr>
　　<th>１行目　左（項目名）</th>
　　<th>１行目　右（項目名）</th>
　</tr>
　<tr>
　　<td>２行目　左（項目1）</td>
　　<td>２行目　右（項目1）</td>
　</tr>
　<tr>
　　<td>３行目　左（項目2）</td>
　　<td>３行目　右（項目2）</td>
　</tr>
　<tr>
　　<td>４行目　左（項目3）</td>
　　<td>４行目　右（項目3）</td>
　</tr>
</table>

_{※ <tr> から </tr> までがテーブルの１行です。必要に応じて行数を増減させてください。

※ <th> から </th> はヘッダーセルです。太字のヘッダーが不要の場合は行を削除します。}

２. 右側コラム表示

２− 1. 右側にテキストコラムを表示する

Steemit の表示

□サンプルテキスト右側の文章

□サンプルテキスト左側の文章

HTMLコード

<div class="pull-right">
□サンプルテキスト右側の文章
</div>
□サンプルテキスト左側の文章

２− 2. 右側に画像コラムを表示する

Steemit の表示

□サンプルテキスト左側の文章

HTMLコード

<div class="pull-right">
http://kojiman.info/wp-content/uploads/2018/05/sample.png
</div>
□サンプルテキスト左側の文章

２− 3. 左側に画像、右側にテキストコラムを表示する

Steemit の表示

□サンプルテキスト右側の文章

HTMLコード

<div class="pull-left">
http://kojiman.info/wp-content/uploads/2018/05/sample.png
</div>
□サンプルテキスト右側の文章

以上、HTMLタグとコードのまとめでした！
コードをコピペして使ってみてください。

Markdown 集もありますので、参考にしてくださいね！

【保存版】初心者〜中級者向け〈マークダウン〉for Steemit（Japanese Ver.）

では〜！

【保存版】初心者〜中級者向け〈 HTML タグ 〉for Steemit（Japanese Ver.）

① テキスト用

文字の編集

見出しのサイズ

header1

header2

header3

header4

header5

header6

上付き／下付き文字（小さい文字）

行の編集

リスト表示

② レイアウト用

１. テーブル表示

Steemit の表示

HTML コード

２. 右側コラム表示

Steemit の表示

HTMLコード

Steemit の表示

HTMLコード

Steemit の表示

HTMLコード

【保存版】初心者〜中級者向け〈 HTML タグ〉for Steemit（Japanese Ver.）