HTMLの基礎の「き」

こんにちは。青木尚美です。

この記事は、
HTMLやCSS、ソースコードといった言葉を
「聞いたことはある気がするけど、わからない、拒否したくなる」と思っている方へ
基本の基本を解説します。

ぜひ、この記事を読んで、
「なんとなくだけど、どこで区切られているかはわかるかな」
と思っていただければ最高です。

それでは、どうぞ！

HTMLとは

HTMLは正式名称を「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」と言います。

HTMLは、WEBサイトを表示するために、どこが段落で、文字が何色で、どこがリンクで、画像で、という情報（構文）が書かれた言語がHTMLです。

「言語」というのは、英語や日本語とは違って人のための言葉ではなく、GoogleChromeやSafariのようなWEBサイトを表示するアプリが認識する言葉です。

ほとんどのWEBサイトはHTMLをベースとして作られています。

HTMLの基本ルール

• HTML部分は半角英数で書く
• HTMLは < から始まり > で終わる
• <> だけと、 <> と </> で囲むセットがある

①　HTML部分は半角英数で書く

GoogleChromeやSafariのようなWEBサイトを表示する、インターネットブラウザーでは、
どこにどんな色の文字を配置するのかを判別するHTMLの部分は
半角英数しか認識できません。
スペースが全角、/（スラッシュ）が全角でもHTML部分とは認識してくれないので
表示が崩れている場合は、必要なところが全角になっていないかチェックポイントの一つです。

②　HTMLは < から始まり > で終わる

HTMLの文章は、必ず、半角の < から始まり、 > で終わります。

< で始まり、 > で終わる部分は、直接私たちが見える形で表示されません。
（表示されている場合は、意図して表示しているか、間違えているかのどちらかです）

③　<> だけと、 <> と </> で囲むセットがある

HTMLの開始の合図、 < のすぐ後には、「タグ」と呼ばれる
<>がどんな役割をするものかを表す英字を入れます。

「タグ」の種類によって、
<タグ>だけで役割が完結するものと
<タグ>で始まり</タグ>で終わるセットものの2種類が存在します。

<タグ>と</タグ>のセットは、間に日本語や英数字、別のタグ単体や、タグのセットを挟むことができます。

メルマガ・アメブロでよく使うタグ（役割）

• img　：　画像
• a　 ：　リンク
• br　 ：　改行
• p　　：　段落
• div　 ：　文章の塊（上下の空白が広くないブロック）
• span ：　文章の一部を選択（改行を含まない）
• h1、h2、h3、h4：　見出し

画像（img）

画像を表示するタグはimgです。
<>だけで構成されます。
基本は <img src=”画像のURL（https://から）”>　で画像が表示されます。
そのままだと大きい画像のことがほとんどなので、横幅だけは設定しましょう！

横幅は、width　横幅300pxは widh=”300px” 　横幅が画面いっぱいの場合は width=”100%”
横幅は、サイズ（ピクセルpx）と、表示できる範囲の何%かで設定できます。

例えば、横幅400ピクセルのこの記事のアイキャッチ画像を表示したい時は
<img src=”https://web-recipe.com/wp-content/uploads/2022/12/blog_html_base.jpeg” width=”400px”>
と書くと

と表示されます。

書く時のポイントは、
　・imgとsrcの間は半角スペースを入れる
　・”ではじまったら”でおわる
　・srcからjpeg”まではスペースも改行もなし
　・jpeg”とwidthの間は半角スペースを入れる
　・widthから2つ目の”まではスペースも改行もなし
です。

リンク（a）

リンクを表示するタグはaの1文字です。
<>と</>で構成されます。
基本は <a href=”押したら表示するページのURL”>実際に見える文字</a>　でリンクが設定できます。

リンクをクリックした時に、新しいタブを開くように設定したい場合や、
ページ内の特定の場所までジャンプするように設定したい場合は別の記事に掲載します。

基本の形だけの例は、
<a href=”https://web-recipe.com/”>ここを押すとトップページが開きます</a>
と書くと

ここを押すとトップページが開きます

となります。

画像にリンクを貼りたいときは<a></a>で<img>を挟む
こんな感じ！<と>がどこにあるか注目して、区切りがどこにあるか見つけてくださいね。

<a href=”押したら表示するページのURL”><img src=”画像のURL” width=”横幅サイズ”></a>

改行（br）

ソースコードが表示されている場合、基本的にソースコードが書かれているところで改行しても
保存してプレビュー画面になると改行されていないことがほとんどです。

その場合には、改行のタグを入れる必要があります。
それが <br> または、<br /> です。

どちらも改行を表すのですが、基本は最初の<br>だけで大丈夫です。
それでうまくいかない時、<br />を試してみてください。

段落（p）

この段落は、メルマガなどで多く使われます。
<>と</>で構成されます。
<p></p>の上下の空白が広くできることが多いです。（設定によりますが）

<p>と</p>の間には、文字も、画像<img>も、リンク<a></a>も、ブロック<div></div>も文字選択<span></span>も入れることができます。

基本的に<p>と</p>の間に<p></p>は入りません。

ブロック（div）

このブロック（文章のまとまり）は、アメブロの囲み枠などでよく使われます。
<>と</>で構成されます。
囲み枠で使われるオプションは次の章で解説します。

メルマガだと、Enter（折れた矢印）だけの改行は段落<p></p>の区切れ
Shiftを押しながらEnter だと、<div></div>の区切れになるか、ただの改行<br>になることがあります。

文章の一部（span）

文章の一部に色をつけたり、文字を太くしたりする場合に使われるのが spanです。
<>と</>で構成されます。

例えば、
文章の一部を<span color=”blue”>青色</span>にします。
と書くと

文章の一部を青色にします。

となります。
例は色の名前を使いましたが、色の名前をそのまま使うと強い色になったり、ダサさが出たりするので
「html カラーコード」とインターネットで検索して
#（シャープ、ハッシュタグ）から始まる6桁の16進数（0〜9、A〜F）を使ってください。
例えば、黒は #000000 です。

メルマガ・アメブロでよく使う属性（オプション）

「アメブロ囲み枠」と検索すると、かわいい囲み枠が多く出てきます。

例えば

<div style=”border: 7px double #fff; background-color: #F29F96; color: #fff; padding: 20px; border-radius: 10px;”>テキスト</div>

と表示されていますね。

この div は文章のブロック style=” から “までが文字に色をつけたり、線を書いたり、背景に色をつけたり、角を丸めたりする命令の部分です。
style は、文字の色や太さ、枠線の色や太さ、余白、背景色など、表示にまつわる設定だけをまとめた部分です。

使い方は、
<div から、 </div>までをコピーして、ソースの部分に貼り付け、
「テキスト」と書かれたところに文字を入れて使うことができます。

タグの中にタグがある・・コピーする区切りの見つけ方

リンクのところで少しご紹介しましたが、この、<>と</>の間に別の<>が入ると
どこからどこまでが境目なのか見分けるのが難しくなってきます。

<と>がどこから始まり、どこで終わるのか
どことどこが連動しているのか、見分ける目を養ってくださいね。

特に、<div>と</div>の間に、<div>と</div>が入っていたりすると
1個</div>を間違えて消すとレイアウトが崩れてしまうことがありますので、編集は慎重に！

例えば

これは↓　<div></div><div></div>と並んでいるだけです

<div style="border: 1px solid #93D2DB; background: #93D2DB; padding: 10px 20px; border-radius: 10px 10px 0 0;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #93D2DB; padding: 20px; border-radius: 0 0 10px 10px;">テキスト</div>

これは↓ <div><div></div></div>と入れ子（divの中にdivがある）になっています

<div style="border: 1px solid #93D2DB; background: #93D2DB; padding: 10px 20px; border-radius: 10px 10px 0 0;"><span style="color: #fff; font-weight: bold;">タイトル</span><div style="border: 1px solid #93D2DB; padding: 20px; border-radius: 0 0 10px 10px; background-color:#ffffff;">テキスト</div></div>

これを見分けるために、自分で書く場合には

<div style="border: 1px solid #93D2DB; background: #93D2DB; padding: 10px 20px; border-radius: 10px 10px 0 0;">
　　　　<span style="color: #fff; font-weight: bold;">
タイトル
　　　　</span>
　　　　<div style="border: 1px solid #93D2DB; padding: 20px; border-radius: 0 0 10px 10px; background-color:#ffffff;">
テキスト
　　　　</div>
</div>

というように、どこからどこまでが<>と</>のセットなのか分かるように、中に入っている<>と</>の始まりと終わりのタグを半角スペース2〜4個分ずらすと、少しわかりやすくなります。

まとめ

今回は、HTMLの基本の「き」をお送りしました。

今回の投稿で
「なんとなくだけど、どこで区切られているかはわかるかな」
「コピー＆ペーストしたソースのどこに文字を書けば良いかわかる！」
「どこからどこまでコピーしたら良いかがわかる！」
となっていただけると最高のゴールです。

このHTMLの基本の「き」がわかると
アメブロやメルマガ、ワードプレスで
「可愛い囲み枠　アメブロ」と検索した時に出てくる枠の
ソースコードに抵抗感が減ってきます。

さらに、CSS（色やサイズを指定する部分）がわかるとさらに表現の幅が広がります。

読んでいただいてありがとうございました