【コピペでOK】現役SEが教える html初心者でも簡単にブログ記事が書けるhtmlタグ集
どうも、管理人のそにたん@sonitan_etologです。
みなさん突然ですが、ブログは何で書いていますか??
ブログのプレビューモード的なもので書いていますか?
あれ、いいですよね!なかなか使いやすいですね笑
ただ、たまにはhtmlで書いたりhtmlに挑戦してみたくなりませんか?
htmlに慣れてしまえば、記事をとても素早く様々なバリエーションで
鮮やかに書けるようになりますよ!
あとは、htmlを学ぶと
いつか自分で、HPを立ち上げるときに
きっと役立つと思います。
さて今回は、html初心者やこれからhtmlに挑戦したい方への
簡単なテンプレートを作成してまいりました!
この記事は、PC環境で読むことを推奨します
では、実際にhtmlタグを紹介します。
1. まずはソースコードを紹介します。
2. 次に、表示例を出します。
今回はソースコードをコピーして一部を変更すれば、誰でも使えるようになります!
今回は、html初心者への導入編ですので
本当に基本的かつ便利なタグを紹介します。
*書くブログのhtml編集方法については、ご自分で調査をお願いします
見出し
まずは、見出しに使えるタグです
<h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3>
表示例:
見出し1
見出し2
見出し3
リスト
ブログで、要点をまとめるとき等に使えるリストです。
<ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul>
表示例:
- リスト1
- リスト2
- リスト3
<ol> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol>
表示例:
- リスト1
- リスト2
- リスト3
テーブル
テーブルは、色々な比較に使えますよ!
<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>
表示例:
param1 | param2 |
---|---|
value1-1 | value2-1 |
value1-2 | value2-2 |
文字の装飾
<span style="color: #ff0000;">赤文字</span> <span style="color: blue;">青文字</span> <b>太文字</b> <u>アンダーライン</u>
表示例:
赤文字
青文字
太文字
アンダーライン
ここで覚えておいて欲しいのは、htmlで編集する場合
改行は改行タグというものを記載する必要があります。
タグは改行したいところで以下を記入すると改行されます。
<br/>
リンク
自分のブログへのリンクや、人のブログ紹介とかに使えるやつです
<a href="https://twitter.com/sonitan_etolog">@sonitan_etolog </a>
表示例:
@sonitan_etolog
さいごに
いかがです?これでhtmlを使った
基本的なブログ執筆は、出来ると思います。
htmlは、今日紹介したもの以外にも様々あります。
今回は、その導入編という位置付けになると思います。
例えば、赤色の太文字を出す場合はこの記事で紹介した
タグを、組み合わせることで出来ちゃいます!
赤太文字
赤太文字
なので、このページの基本タグだけでも
組み合わせ次第では、独自性を作り出すことができます。
今後も、便利なタグを見つけ次第
更新しますのでお楽しみに!
また、プログラミングに興味を持った方はwebだけで出来る簡単プログラミングを記事にしていますので
ぜひ参考にしてください!
ディスカッション
コメント一覧
まだ、コメントがありません