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

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

ここで紹介する
基本的なタグさえ理解しておけば、
WordPressサイトの運営に関して言えば
それほど困ることはなくなります。
 

今回は、
htmlに関する理論の説明は抜きで、
実際にどのように使用しているかを
紹介していきます。

初心者の方は覚える必要はないので
「こんなようなタグがあるんだ」
くらいの認識で大丈夫です。

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

html基本タグ:改行、br

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

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

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

 

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

記事本文内の改行の場合は
以下を参考にしてください。
WordPressでの改行方法

 
※brを使用するのは「テーマの編集」時です。

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

↓テーブルの表示例

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

↓上記テーブルのコード

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

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

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

 

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

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

affikatsu.comのトップページ

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

 

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

 

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

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

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

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

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

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

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

 

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

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

 

実はこの文章の上にもブラウザ上には表示されていませんが、コメントアウトの記載をしています(笑) 「CTRL + U」を押して、ソースを確認してみて下さい。以下のようになっています。
html入門 初心者 基本タグ一覧 コメントアウト

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

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

 

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

 

html基本タグ:特殊文字

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

↓「<」のコード

 

↓「>」のコード

 

↓「"」のコード

 

↓「&」のコード

 

↓「©」のコード

 

html基本タグ:フォント指定、font

フォント装飾に関するhtml基本タグに関して紹介します。

太文字、太字

「太字」のコード

 

「強調」のコード

 

文字色 文字の色

↓文字色の表示

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

↓上記のコード

 

文字背景色、マーカー

↓文字背景色を付ける
文字背景色:黄色
文字背景色:黄緑

↓上記のコード

 

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

↓文字サイズの指定

文字サイズ7
文字サイズ6
文字サイズ5
文字サイズ4
文字サイズ3
文字サイズ2
文字サイズ1

↓上記のコード

 

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

↓水平線を表示








↓上記のコード

 

html基本タグ:center、センタリング

↓文字をセンターに表示

センタリング

↓上記のコード

 

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

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

「AddQuicktag」の使用方法は以下を参考にしてください。
WordPressプラグインAddquicktagの使い方!おすすめ設定も!
 

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

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

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!
(PDFとサイト版の両方をプレゼント)
AFFIKATSUGuideBook

>> メルマガ登録はこちら <<

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

メルマガ登録フォーム

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

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




コメントを残す



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

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

CAPTCHA