html初心者入門!基本タグ一覧

今回は記事作成時に比較的よく使われる
htmlの基本的なタグを紹介します。

ここで紹介する基本的なタグさえ理解しておけば、
WordPressサイトの運営に関して言えば
それほど困ることはなくなります。
今回は、htmlに関する理論の説明は抜きで、
実際にどのように使用しているかを
紹介していきます。

※「font」と「center」タグは
HTML5.0から非推奨となりましたので、
CSSでの使用方法を紹介しています。
初心者の方は覚える必要はないので
「こんなようなタグがあるんだ」
くらいの認識で大丈夫です。

一通り目を通しておいてください。

html基本タグ:改行、br

※検索の時に「html 開業」と打ち間違えて
検索している方も多いようです^^;

↓改行のhtmlタグ (HTMLで書かれたページの場合)

<br>

↓改行のhtmlタグ (XHTMLで書かれたページの場合)

<br/>

 

どちらを使っても問題ありませんが、
WordPressの場合は<br/>を使用します。

記事本文内の改行の場合は、以下を参考にしてください。
関連記事→ WordPressで改行できない(反映されない)時の解決策!プラグイン不要

 

html基本タグ:テーブル、table、表

↓テーブルの表示例

テーブルタイトル
ヘッダーセル1 ヘッダーセル2
データセル1 データセル2
データセル3 データセル4

↓上記テーブルのコード

 

テーブルタイトル
ヘッダーセル1 ヘッダーセル2
データセル1 データセル2
データセル3 データセル4

 
※テーブルを結合したい時は以下を使用

colspan=””:水平方向
rowspan=””:垂直方向
 

エクセルを使って効率的に表を作成する方法を紹介しています。
関連記事→ EXCELエクセルで文字列を結合する方法

 

html基本タグ:リンク、link、a href

↓このサイトのトップページ
(https://affikatsu.com/)へのリンクです。

affikatsu.comのトップページ

↓上記リンク指定のコード

affikatsu.comのトップページ

 

リンクの貼り方の詳しい説明は、以下を参考にしてください。
関連記事→ リンクの貼り方!アンカーテキストとは?

 

html基本タグ:リスト、ul、li、lo、箇条書き

↓箇条書きパターン「ul」

  • パターンul
  • パターンul-1
  • パターンul-2
  • パターンul-3

↓箇条書きパターン「ul」のコード

    • パターンul

 

    • パターンul-1

 

    • パターンul-2

 

    • パターンul-3

 

 

↓箇条書きパターン「ol」

  1. パターンol-1
  2. パターンol-2
  3. パターンol-3

↓箇条書きパターン「ol」のコード

    1. パターンol-1

 

    1. パターンol-2

 

    1. パターンol-3

 

 

 

html基本タグ:コメントアウト

以下のように記載するとブラウザ上では表示されません。

ソースには表示されます。


実はこの文章の上にも
ブラウザ上には表示されていませんが、
コメントアウトの記載をしています(笑)

「CTRL + U」を押して、
ソースを確認してみて下さい。

以下のようになっています。
html入門 初心者 基本タグ一覧 コメントアウト

html基本タグ:半角スペース、全角スペース、空白

↓半角スペース、半角空白のコード


 

↓全角スペース、全角空白のコード


 

html基本タグ:特殊文字

上で紹介した空白を除く、
よく使われる特殊文字を紹介します。

↓「<」のコード

<

 

↓「>」のコード

>

 

↓「”」のコード

"

 

↓「&」のコード

&

 

↓「©」のコード

©

 

html基本タグ:太字、太文字

「太字」のコード

「太字」

 

html基本タグ:hr、水平の罫線、水平線

↓水平線を表示








↓上記のコード


 


 


 


 


 


 



 

CSS:フォント指定、font

フォント装飾に関する「font」タグは、
HTML5.0から非推奨となりました。

そのため、以下のようにCSSで
フォント装飾することをおすすめします。

文字色 文字の色 (CSS)

↓文字色の表示

カラー名:赤色
カラー名:青色
RGB値:赤色
RGB値:青色

↓上記のコード

カラー名:赤色
カラー名:青色
RGB値:赤色
RGB値:青色

 

文字背景色、マーカー (CSS)

↓文字背景色を付ける

文字背景色:黄色

文字背景色:黄緑色

↓上記のコード

文字背景色:黄色
文字背景色:黄緑色

 

文字サイズ、文字大きさ、フォントサイズ (CSS)

↓文字サイズの指定

文字サイズ xx-large
文字サイズ x-large
文字サイズ large
文字サイズ medium
文字サイズ small
文字サイズ x-small

↓上記のコード

文字サイズ xx-large
文字サイズ x-large
文字サイズ large
文字サイズ medium
文字サイズ small
文字サイズ x-small

 

CSS:center、センタリング

センタリングに関する「center」タグは、
HTML5.0から非推奨となりました。

そのため、以下のようにCSSで
センタリングすることをおすすめします。

↓文字をセンターに表示

センタリング

↓上記のコード

センタリング

 

 

以上、html入門として初心者のための基本タグ
紹介しました。

よく使いタグがある場合は
WordPressプラグイン「AddQuicktag」を
利用すると便利です。

「AddQuicktag」の使用方法は以下を参考にしてください。

関連記事→ WordPressプラグインAddquicktagの使い方!おすすめ設定も!

最後まで読んで頂いてありがとうございました。

記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!

↓↓↓メルマガ登録は下のフォームから↓↓

無料メールマガジン登録フォーム

メルマガ登録フォーム

苗字 (漢字で)
メールアドレス

※私からお送りする全てのメールに解除リンクを付けていますので、いつでもメルマガ解除をすることが可能です。




コメントを残す



コメントはサイト管理者が確認するまで表示されません。
他の読者さんにも有益だと判断した場合のみコメント対応を致します。

個別の問い合わせは【こちら】からお願いします。