今回は記事作成時に比較的よく使われる
htmlの基本的なタグを紹介します。
ここで紹介する基本的なタグさえ理解しておけば、
WordPressサイトの運営に関して言えば
それほど困ることはなくなります。
今回は、htmlに関する理論の説明は抜きで、
実際にどのように使用しているかを
紹介していきます。
※「font」と「center」タグは
HTML5.0から非推奨となりましたので、
CSSでの使用方法を紹介しています。
初心者の方は覚える必要はないので
「こんなようなタグがあるんだ」
くらいの認識で大丈夫です。
一通り目を通しておいてください。
Contents
html基本タグ：改行、br
※検索の時に「html 開業」と打ち間違えて
検索している方も多いようです^^;
通常よく改行コードで使用されるのは「ノーブレークスペース」です。
HTMLの文中に を挿入すると半角スペース分の間隔を空けてくれるという機能を果たしてくれます。
そのため「 は半角スペースを入れたい時に使うもの」という認識の方も多いのです。
コードはこちら
↓
|
1 |
|
↓改行のhtmlタグ (HTMLで書かれたページの場合)
|
1 |
<br> |
↓改行のhtmlタグ (XHTMLで書かれたページの場合)
|
1 2 |
<br/> <pre><br/> |
どちらを使っても問題ありませんが、
WordPressの場合は<br/>を使用します。
関連記事→ WordPressで改行できない(反映されない)時の解決策！プラグイン不要
html基本タグ：テーブル、table、表
↓テーブルの表示例
| ヘッダーセル1 | ヘッダーセル2 |
|---|---|
| データセル1 | データセル2 |
| データセル3 | データセル4 |
↓上記テーブルのコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table> <caption>テーブルタイトル</caption> <tr><th>1列目名</th><th>2列目名</th></tr> <tr><td align="center">11</td><td align="center">21</td></tr> <tr><td align="center">12</td><td align="center">22</td></tr> <tr><td align="center">13</td><td align="center">23</td></tr> <tr><td align="center">14</td><td align="center">24</td></tr> <tr><td align="center">15</td><td align="center">25</td></tr> <tr><td align="center">16</td><td align="center">26</td></tr> <tr><td align="center">17</td><td align="center">27</td></tr> <tr><td align="center">18</td><td align="center">28</td></tr> <tr><td align="center">19</td><td align="center">29</td></tr> <tr><td align="center">20</td><td align="center">30</td></tr> </table> |
※テーブルを結合したい時は以下を使用
colspan=””：水平方向
rowspan=””：垂直方向
関連記事→ EXCELエクセルで文字列を結合する方法
html基本タグ：リンク、link、a href
↓このサイトのトップページ
(https://catherineroyal.com/)へのリンクです。
↓上記リンク指定のコード
|
1 |
→<a href="https://catherineroyal.com/">catherineroyal.comのトップページ</a> |
関連記事→ リンクの貼り方！アンカーテキストとは？
html基本タグ：リスト、ul、li、lo、箇条書き
↓箇条書きパターン「ul」
- パターンul
- パターンul-1
- パターンul-2
- パターンul-3
↓箇条書きパターン「li」のコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<ul> <li class="odd">パターンul</li> </ul> <ul> <li class="odd" type="disc">パターンul-1</li> </ul> <ul> <li class="odd" type="circle">パターンul-2</li> </ul> <ul> <li class="odd" type="square">パターンul-3</li> </ul> |
↓箇条書きパターン「ol」
- パターンol-1
- パターンol-2
- パターンol-3
↓箇条書きパターン「ol」のコード
|
1 2 3 4 5 6 7 8 9 10 11 |
<ol> <li class="even">パターンol-1</li> </ol> <ol> <li class="even">パターンol-2</li> </ol> <ol> <li class="even">パターンol-3</li> </ol> |
html基本タグ：コメントアウト
以下のように記載するとブラウザ上では表示されません。
ソースには表示されます。
|
1 |
<!--コメントアウト--> |
実はこの文章の上にも
ブラウザ上には表示されていませんが、
コメントアウトの記載をしています(笑)
「CTRL + U」を押して、
ソースを確認してみて下さい。
以下のようになっています。
html基本タグ：半角スペース、全角スペース、空白
↓半角スペース、半角空白のコード
|
1 |
ホームページで 上位化を目指すにはSEO対策が必要です。 |
↓全角スペース、全角空白のコード
|
1 |
ホームページで 上位化を目指すにはSEO対策が必要です。 |
html基本タグ：特殊文字
上で紹介した空白を除く、
よく使われる特殊文字を紹介します。
↓「<」のコード
|
1 |
< |
↓「>」のコード
|
1 |
> |
↓「”」のコード
|
1 |
" |
↓「&」のコード
|
1 |
& |
↓「©」のコード
|
1 |
© |
html基本タグ：太字、太文字
↓「太字」のコード
|
1 |
<strong>「太字」</strong> |
html基本タグ：hr、水平の罫線、水平線
↓水平線を表示
↓上記のコード
|
1 2 3 4 5 6 |
<hr/> <hr width="50%"/> <hr width="100"/> <hr width="200"/> <hr width="400"/> <hr/> |
CSS：フォント指定、font
フォント装飾に関する「font」タグは、
HTML5.0から非推奨となりました。
そのため、以下のようにCSSで
フォント装飾することをおすすめします。
文字色 文字の色 (CSS)
↓文字色の表示
カラー名：赤色
カラー名：青色
RGB値：赤色
RGB値：青色
↓上記のコード
|
1 2 3 4 |
<span style="color: red;">カラー名：赤色</span> <span style="color: blue;">カラー名：青色</span> <span style="color: #ff0000;">RGB値：赤色</span> <span style="color: #0000ff;">RGB値：青色</span> |
文字背景色、マーカー (CSS)
↓文字背景色を付ける
文字背景色：黄色
文字背景色：黄緑色
↓上記のコード
|
1 2 |
<span style="background-color: yellow;">文字背景色：黄色</span> <span style="background-color: lime;">文字背景色：黄緑色</span> |
文字サイズ、文字大きさ、フォントサイズ (CSS)
↓文字サイズの指定
文字サイズ xx-large
文字サイズ x-large
文字サイズ large
文字サイズ medium
文字サイズ small
文字サイズ x-small
↓上記のコード
|
1 2 3 4 5 6 |
<span style="font-size: xx-large;">文字サイズ xx-large</span> <span style="font-size: x-large;">文字サイズ x-large</span> <span style="font-size: large;">文字サイズ large</span> <span style="font-size: medium;">文字サイズ medium</span> <span style="font-size: small;">文字サイズ small</span> <span style="font-size: x-small;">文字サイズ x-small</span> |
CSS：center、センタリング
センタリングに関する「center」タグは、
HTML5.0から非推奨となりました。
そのため、以下のようにCSSで
センタリングすることをおすすめします。
↓文字をセンターに表示
↓上記のコード
|
1 |
<div style="text-align: center;">センタリング</div> |
以上、html入門として初心者のための基本タグを
紹介しました。
よく使うタグがある場合は
WordPressプラグイン「AddQuicktag」を
利用すると便利です。
「AddQuicktag」の使用方法は以下を参考にしてください。
