今日はWEBページの主に文章を構成する言語「ＨＴＭＬ」において、Wordpressで記事を作成し、サイトを保守・管理していく上で最低知っておくと便利な基礎を一から丁寧に記事と動画（記事下）で解説していきます。
最初にしっかりと学んでおけば、後々Wordpressに起こり得る様々な状況に的確に対応でき、より本格的な記事やサイト創りが可能となりますので、しっかりと学習していきましょう。
HTMLとは
HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ、HTML（エイチティーエムエル））は、ハイパーテキストを記述するためのマークアップ言語の1つである。World Wide Web (WWW)において、ウェブページ（1990年代後半頃からはコンテンツという語も利用されている。「中身」という意味の語であり、大層な意味は無い）を表現するために用いられる。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。引用元：Wikipedia
HTMLは、<タグ>と呼ばれる<山カッコ>でマークアップして挟んだ「要素」と呼ばれる１単位を積み重ねて構成していきます。
HTMLによって書かれたWEBページの情報を、指定したデザインやレイアウトに装飾してから配置するのが前回勉強したCSSです。
今日は、WordpressでWEBサイトを作成するにあたり、知っておきたい最低限のHTMLの知識をこれから説明していきます。
HTMLの基本構造
HTMLの基本単位の要素を分析しよう
WEBページのＨＴＭＬ構造
さらに細かく覗くと….
HTMLの基本単位は、タグで囲まれた<要素>
開始タグと終了タグを目で追ってみよう、終了タグがないタグも。。
終了タグが存在しないタグ（終了タグをつけるとエラーになる）
br, img, hr, meta, input, embed, area, base, col, keygen, link, param, source
Wordpressでよく見るHTML特殊文字を知っておこう
要するにこういうこと…
代表的な特殊文字は書けなくても知っておこう
| No. | 文字表記 | 10進表記 | 16進表記 | 文字 | コメント |
|---|---|---|---|---|---|
| 001 | " | " | " | “”” | クォーテーション |
| 002 | & | & | & | & | アンパサンド |
| 003 | < | < | < | < | 小なり |
| 004 | > | > | > | > | 大なり |
| 005 | |   |   | 空白 | |
| 006 | © | © | © | © | コピーライト |
| 注1）文字表記は必ず小文字で記述。 | |||||
表の参照元：pst.co.jp
文字の装飾
WEBページにおいて”表示スタイル”や”文字の装飾”などコンテンツに個性やテイストを与えるものは基本的にCSSの役目です。
しかし、かつてはHTMLに直接記述するやり方が取られていたこともあるようで、そういったWEBページやブログのHTMLと出会った時に（頻繁にあります。）上手く解読できるように一通り眺めておきましょう。
記憶してマスターする必要はありません。
文字を大きいサイズにする。
文字を大きいサイズにする。
<span style="font-size: 28px;">文字を大きいサイズにする。</span>
文字を太字にする。
文字を太字にする。
<strong>文字を太字にする。</strong>
文字を斜体にする。
文字を斜体にする。
<em>文字を斜体にする。</em>
文字に下線を付ける。
文字に下線を付ける。
<span style="text-decoration: underline;">文字に下線を付ける。</span>
文字の色を付ける。
文字の色を付ける。
<span style="color: #ff00ff;">文字の色を付ける。</span>
文字の背景に色を付ける。
文字の背景に色を付ける。
<span style="background-color: #ff6600;">文字の背景に色を付ける。</span>
文字のスタイルを変更する。
文字のスタイルを変更する。
<span style="font-family: 'times new roman', times, serif; font-size: 20px;">文字のスタイルを変更する。</span>
文字を大きく、太字に、背景色を付けて、文字色とスタイルを変更する。
文字を大きく、太字に、背景色を付けて、文字色とスタイルを変更する。
<span style="font-size: 24px; background-color: #3366ff; color: #ccffff; font-family: georgia, palatino, serif;"><strong> 文字を大きく、太字に、背景色を付けて、文字色とスタイルを変更する。</strong></span>
画像を挿入する
例えば、このような画像を挿入する時….
HTML
<img src="http://iborc.com/wp-content/uploads/2017/10/4.jpg" alt="WordpressでHTMLで画像を挿入する方法" width="893" height="321" class="alignnone size-full wp-image-1734" />
補足説明
imgでは終了タグは使わないません。そして、貼ることができるのはJPG/PNG/GIF形式の画像だけです。
リンクを挿入する
例文で理解する↓
詳しい情報はコチラから
HTML
詳しい情報は<a href="http://iborc.com/">コチラ</a>から
class属性とid属性
classとidは、デザインに関して便利な機能
開始タグ内に書く属性の1つに、class、もしくは、idというものがあります。
classやidは、class名やid名をHTMLのタグの中に記述します。次に、CSS（スタイルシート）のセレクタにclass名やid名を記述しておくことで、個別に呼び出して装飾するために使います。
idとclassはどのタグにも書くことができ、半角英数字（先頭に数字は×）で記述します。自分の分かり易い名前を決めて使うことが出来ます。
classとidの違いは、同じclass名は同じHTMLテキスト（１つのページ）で何度も利用できるのに対して、同じid名のものは同じHTMLテキストで１度きりしか使えません。
class属性の使用例
class属性はCSSのデザインをその都度呼び出す。
<h2 class="circle">class属性はCSSのデザインをその都度呼び出す。</h2>
id属性の使用例
id属性はcssのデザインをその都度呼び出しますが、
同じIDは、同じページで1度きりしか使えないですが、その代りにCSSやJavaScriptで呼び出す際の処理速度が速いです。
<span><strong>id属性はcssのデザインをその都度呼び出しますが、</strong> <p id="under">同じIDは、同じページで1度きりしか使えないですが、その代りにCSSやJavaScriptで呼び出す際の処理速度が速いです。</p></span>
divタグとspanタグ
divとspanは、ページ内デザインに欠かせない機能
divとspanもWordpressで非常に頻繁に見かけるタグです。
簡単に言えば、div（ブロック要素）やspan（インライン要素）はコードにまとまりを作るためのコードです。
まとまりを作れば、まとまりごとにデザインを変えることができるわけです。
divとspanの違いは
divではまとまりの前後にこのように空白行が入りますが、
一方で、spanではまとまりの前後に空白行が入りません。
spanタグ（インライン要素）は前後に空白行の入らない為に、文章の一部の文字色を変えたり、線を引いたりするときに便利です。つまり、文章の最中に使えるから”インライン要素”なのです。
divタグ（ブロック要素）は、前後に空白行が自動挿入されるためにコードをまとめて一つのブロックとして作るのに適しており、HTMLで最も使われているタグの一つです。
divタグの使用例
spanタグは文章の一部の装飾に向いているのに対して、
divタグはこのようにページ内で囲んだ範囲全てを一塊のブロックとして表示し、その範囲内だけにデザインを適用することに向いている。
もちろん、これはClass属性やid属性と組み合わせて使用し、
あらかじめ、class名などを付けてCSSを設定して個別にデザインをする。
<div class="back-blue"><strong> spanタグは文章の一部の装飾に向いているのに対して、 divタグはこのようにページ内で囲んだ範囲全てを一塊のブロックとして表示し、その範囲内だけにデザインを適用することに向いている。 もちろん、これはClass属性（推奨）やid属性と組み合わせて使用し、 あらかじめ、class名などを付けてCSSを設定して個別にデザインをする。 </strong></div>
spanタグの使用例
spanタグは前後に空白行の入らない為に、文章中に使用することが出来、文章の一部の文字色を変えたり、線を引いたりするときに便利です。
spanタグは前後に改行の入らない為に、文章中に使用することが出来、 <span style="color: #339966;"><strong>文章の一部の文字色を変えたり、</strong></span> <span class="under">線を引いたりするとき</span>に便利です。
コメントアウト
例
この国の未来について考える
現在のように国と国との関係が…………………
（この行に実はＨＴＭＬでは、自分用メモが隠されているが表示されていない。）
ＨＴＭＬコード
<h2>この国の未来について考える</h2> <p>現在のように国と国との関係が.....................</p> <!--フォーブス誌の５月号の記事を参考にしてまとめてみた。 https://www.forbes.com/sites/danalexander/2017/03/20 /in-trump-they-trust-inside-the-global-web-of-partners- cashing-in-on-the-president/#5f4fde0f7605 -->
見出しを作り記事を構造化する
見出しデザインを実装していない場合のｈ２見出しってこんな感じ↓
見出しデザインを実装していない場合のｈ２見出し
HTMLコード
<body>
<h1>ＨＴＭＬ超簡単入門</h1> <!--Wordpressでは通常、記事タイトルにはH1が自動挿入されます-->
<h2>ＨＴＭＬの基本構造</h2>
<h3>基本形</h3>
<img src=.........................>
<p>本文</p>
<h3>さらに細かく見ていくと</h3>
<img src=.........................>
<p>本文</p>
<h2>タグで囲まれた要素がＨＴＭＬの基本単位</h2>
<h3>開始タグと終了タグ</h3>
<img src=.........................>
<p>本文</p>
<h3>終了タグの無いタグ</h3>
<img src=.........................>
<p>本文</p>
...
</body>
補足説明
見出しには一般に『大見出し（Ｈ１）』『中見出し（Ｈ２）』『小見出し（Ｈ３）』などがあり、見出し（heading要素）は、
<h1>~<h6>の6つのタグでマークアップしていきます。
このサイトでは、各見出しに対してCSSを適用しているので、装飾された見出しデザインが<h2>タグや<h3>タグを挿入することによって呼び出されて表示されています。
（アニメーションに関しては、Wordpressプラグイン、又はCSSとJavaScriptの両方を連動させて実装しています。）
📹動画を観る
装飾された見出しデザインで1ランク上のサイトを作る
☥IBORCを応援してください。
