今日はWEBページの主に文章を構成する言語「HTML」において、Wordpressで記事を作成し、サイトを保守・管理していく上で最低知っておくと便利な基礎を一から丁寧に記事と動画(記事下)で解説していきます。
最初にしっかりと学んでおけば、後々Wordpressに起こり得る様々な状況に的確に対応でき、より本格的な記事やサイト創りが可能となりますので、しっかりと学習していきましょう。

概要

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ、HTML(エイチティーエムエル))は、ハイパーテキストを記述するためのマークアップ言語の1つである。World Wide Web (WWW)において、ウェブページ(1990年代後半頃からはコンテンツという語も利用されている。「中身」という意味の語であり、大層な意味は無い)を表現するために用いられる。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。引用元:Wikipedia

HTMLは、<タグ>と呼ばれる<山カッコ>でマークアップして挟んだ「要素」と呼ばれる1単位を積み重ねて構成していきます。

HTMLによって書かれたWEBページの情報を、指定したデザインやレイアウトに装飾してから配置するのが前回勉強したCSSです。
今日は、WordpressでWEBサイトを作成するにあたり、知っておきたい最低限のHTMLの知識をこれから説明していきます。

HTMLの基本単位

WEBページのHTML基本形

HTMLの基本構造

開始タグと終了タグ

br, img, hr, meta, input, embed, area, base, col, keygen, link, param, source

HTML特殊文字

代表的な特殊文字
No. 文字表記 10進表記 16進表記 文字 コメント
001 &quot; &#34; &#x22; “”” クォーテーション
002 &amp; &#38; &#x26; & アンパサンド
003 &lt; &#60; &#x3C; < 小なり
004 &gt; &#62; &#x3E; > 大なり
005 &nbsp; &#160; &#xA0; 空白
006 &copy; &#169; &#xA9; © コピーライト
注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>

Wordpressで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形式の画像だけです。

詳しい情報はコチラから

詳しい情報は<a href="http://iborc.com/">コチラ</a>から

開始タグ内に書く属性の1つに、class、もしくは、idというものがあります。

classやidは、class名やid名をHTMLのタグの中に記述します。次に、CSS(スタイルシート)のセレクタにclass名やid名を記述しておくことで、個別に呼び出して装飾するために使います。

idとclassはどのタグにも書くことができ、半角英数字(先頭に数字は×)で記述します。自分の分かり易い名前を決めて使うことが出来ます。

classとidの違いは、同じclass名は同じHTMLテキスト(1つのページ)で何度も利用できるのに対して、同じid名のものは同じHTMLテキストで1度きりしか使えません。

class属性はCSSのデザインをその都度呼び出す。

<h2 class="circle">class属性はCSSのデザインをその都度呼び出す。</h2>

id属性はcssのデザインをその都度呼び出しますが、

同じIDは、同じページで1度きりしか使えないですが、その代りにCSSやJavaScriptで呼び出す際の処理速度が速いです。

<span><strong>id属性はcssのデザインをその都度呼び出しますが、</strong>
<p id="under">同じIDは、同じページで1度きりしか使えないですが、その代りにCSSやJavaScriptで呼び出す際の処理速度が速いです。</p></span>

divとspanもWordpressで非常に頻繁に見かけるタグです。
簡単に言えば、div(ブロック要素)やspan(インライン要素)はコードにまとまりを作るためのコードです。
まとまりを作れば、まとまりごとにデザインを変えることができるわけです。

divとspanの違いは

divではまとまりの前後にこのように空白行が入りますが、

一方で、spanではまとまりの前後に空白行が入りません
spanタグ(インライン要素)は前後に空白行の入らない為に、文章の一部の文字色を変えたり、線を引いたりするときに便利です。つまり、文章の最中に使えるから”インライン要素”なのです。
divタグ(ブロック要素)は、前後に空白行が自動挿入されるためにコードをまとめて一つのブロックとして作るのに適しており、HTMLで最も使われているタグの一つです。


spanタグは文章の一部の装飾に向いているのに対して、
divタグはこのようにページ内で囲んだ範囲全てを一塊のブロックとして表示し、その範囲内だけにデザインを適用することに向いている。
もちろん、これはClass属性やid属性と組み合わせて使用し、
あらかじめ、class名などを付けてCSSを設定して個別にデザインをする。
<div class="back-blue"><strong>
spanタグは文章の一部の装飾に向いているのに対して、
divタグはこのようにページ内で囲んだ範囲全てを一塊のブロックとして表示し、その範囲内だけにデザインを適用することに向いている。
もちろん、これはClass属性(推奨)やid属性と組み合わせて使用し、
あらかじめ、class名などを付けてCSSを設定して個別にデザインをする。
</strong></div>

spanタグは前後に空白行の入らない為に、文章中に使用することが出来、文章の一部の文字色を変えたり、線を引いたりするときに便利です。

spanタグは前後に改行の入らない為に、文章中に使用することが出来、
<span style="color: #339966;"><strong>文章の一部の文字色を変えたり、</strong></span>
<span class="under">線を引いたりするとき</span>に便利です。

html コメントアウトの仕方

この国の未来について考える

現在のように国と国との関係が…………………

(この行に実はHTMLでは、自分用メモが隠されているが表示されていない。)

<h2>この国の未来について考える</h2>
<p>現在のように国と国との関係が.....................</p>
<!--フォーブス誌の5月号の記事を参考にしてまとめてみた。
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
-->

見出しデザインを実装していない場合のh2見出し

 <body>
 <h1>HTML超簡単入門</h1> <!--Wordpressでは通常、記事タイトルにはH1が自動挿入されます-->
 <h2>HTMLの基本構造</h2>
 <h3>基本形</h3>
 <img src=.........................>
    <p>本文</p>
  <h3>さらに細かく見ていくと</h3>
  <img src=.........................>
    <p>本文</p>
<h2>タグで囲まれた要素がHTMLの基本単位</h2>
 <h3>開始タグと終了タグ</h3>
  <img src=.........................>
    <p>本文</p>
  <h3>終了タグの無いタグ</h3>
  <img src=.........................>
    <p>本文</p>
   ...
 </body>

見出しには一般に『大見出し(H1)』『中見出し(H2)』『小見出し(H3)』などがあり、見出し(heading要素)は、
<h1>~<h6>の6つのタグでマークアップしていきます。

このサイトでは、各見出しに対してCSSを適用しているので、装飾された見出しデザインが<h2>タグや<h3>タグを挿入することによって呼び出されて表示されています。

(アニメーションに関しては、Wordpressプラグイン、又はCSSとJavaScriptの両方を連動させて実装しています。)

CSS超簡単入門
保護中: 洗練された見出しデザインをCSSでカスタムしながら実装しよう

☥IBORCを応援してください。