2018年12月8日2021年8月22日

どうも、管理人のそにたん@sonitan_etologです。

みなさん突然ですが、ブログは何で書いていますか??
ブログのプレビューモード的なもので書いていますか?
あれ、いいですよね!なかなか使いやすいですね笑

ただ、たまにはhtmlで書いたりhtmlに挑戦してみたくなりませんか?

htmlに慣れてしまえば、記事をとても素早く様々なバリエーションで
鮮やかに書けるようになりますよ!

あとは、htmlを学ぶと
いつか自分で、HPを立ち上げるときに
きっと役立つと思います。

さて今回は、html初心者やこれからhtmlに挑戦したい方への
簡単なテンプレートを作成してまいりました！

この記事は、PC環境で読むことを推奨します

 

では、実際にhtmlタグを紹介します。

1. まずはソースコードを紹介します。
2. 次に、表示例を出します。

今回はソースコードをコピーして一部を変更すれば、誰でも使えるようになります!

今回は、html初心者への導入編ですので
本当に基本的かつ便利なタグを紹介します。

 

*書くブログのhtml編集方法については、ご自分で調査をお願いします

見出し

まずは、見出しに使えるタグです

[html]
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
[/html]

表示例:

見出し1

見出し2

見出し3

リスト

ブログで、要点をまとめるとき等に使えるリストです。

[html]
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
[/html]

表示例:

• リスト1
• リスト2
• リスト3

[html]
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
[/html]

表示例：

1. リスト1
2. リスト2
3. リスト3

テーブル

テーブルは、色々な比較に使えますよ!

[html]
<table border="1">
<tbody>
<tr>
<th>param1</th>
<th>param2</th>
</tr>
<tr>
<td>value1-1</td>
<td>value2-1</td>
</tr>
<tr>
<td>value1-2</td>
<td>value2-2</td>
</tr>
</tbody>
</table>
[/html]

表示例：

param1	param2
value1-1	value2-1
value1-2	value2-2

文字の装飾

[html]
<span style="color: #ff0000;">赤文字</span>
<span style="color: blue;">青文字</span>
<b>太文字</b>
<u>アンダーライン</u>
[/html]

表示例:
赤文字
青文字
太文字
アンダーライン

ここで覚えておいて欲しいのは、htmlで編集する場合
改行は改行タグというものを記載する必要があります。
タグは改行したいところで以下を記入すると改行されます。

[html]
<br/>
[/html]

リンク

自分のブログへのリンクや、人のブログ紹介とかに使えるやつです

[html]
<a href="https://twitter.com/sonitan_etolog">@sonitan_etolog
</a>
[/html]

表示例:
@sonitan_etolog

さいごに

いかがです?これでhtmlを使った
基本的なブログ執筆は、出来ると思います。
htmlは、今日紹介したもの以外にも様々あります。

今回は、その導入編という位置付けになると思います。

例えば、赤色の太文字を出す場合はこの記事で紹介した
タグを、組み合わせることで出来ちゃいます!

 

赤太文字

赤太文字

なので、このページの基本タグだけでも
組み合わせ次第では、独自性を作り出すことができます。
今後も、便利なタグを見つけ次第
更新しますのでお楽しみに!

また、プログラミングに興味を持った方はwebだけで出来る簡単プログラミングを記事にしていますので
ぜひ参考にしてください！