（2）HTMLはメモ帳とブラウザだけで簡単表示!!―基礎編

2020年9月9日　

ウェブに関しては実務経験のない私の解説ページでも見にきてくださっている方がおりました。本当にありがとうございます。前回はブラウザ上に文字を表示するところで終わりましたが、今回は画像なども使用して簡単なブログ風ページを作成してみようかと思います。

今は無料ブログ（ライブドアブログ、FC2ブログ、はてなブログなど）やワードプレスなどで簡単に綺麗ですっきりしたトップページや記事が作成できるので、前時代的ではありますがHTMLや後述のCSS（Cascading Style Sheets）の基礎を理解するにはとても良いと思ったので（実際に私もそこから理解が深まったので）ちょっと古くさい感じがするかもしれませんが敢えてトライしてみましょう。

最終的にはブラウザで開いた時にこのような形に表示される記述を目指します。

前回記述したコードのおさらい
head要素にtitleタグを追加する
見出しを付ける
画像を挿入する
改行を入れた文章を記述する
CSSを使用してHTMLを装飾する
HTMLファイル内にCSSを記述する
画像を中央寄せする
リンク先を追加する

前回記述したコードのおさらい

1）それでは前回の記事で記述したコードを引っ張ってきて応用に使用しましょう。

前回までの記述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>こんにちは</p>
</body>
<html>

今回は<p>こんにちは</p>の部分は使用しないので新しい記述を追加する前に削除します。

head要素にtitleタグを追加する

ブラウザでいろいろなページを閲覧していると上部の「タブ」が目に付くことが多いと思います。スマホではわかりづらいかもしれませんが、パソコンではかなり目立っています。よくよく見てみるとそのサイトのタイトルだったり記事のタイトルだったりが表示されていると思いますが、そのページの「タイトル（題名、表題）」を明示させるための要素がtitleです。

これをhead要素に追加します。場所は<head>～</head>内であればどこでも判別されますが、ひとまず以下のように記載してみましょう。

ここまでの記述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ねこさまブログ</title>
</head>
<body>
</body>
</html>

見出しを付ける

これは少々重要なポイントになってきますが、HTMLには見出し用のhタグというものがあります。ブラウザや検索エンジンに対して「これが見出し（タイトルおよびサブタイトル）ですよ」ということを伝えるものになるので、自分が何を中心に発信したいのかということをコンピュータに対してメタ的に伝えることができます。もちろんブラウザが言語を認識して描写してしまえば閲覧している人間にはわかりません。ひとに対してはタイトルの視認性やインパクトによって伝えなければならないのでデザインやキャッチコピーのセンスが必要になります（←これがいちばん難儀）。

話が逸れましたがhタグには<h1>から<h6>まで存在し数字が大きくなるほど強調度が低下します。既定値では<h1>→<h6>の順で文字の大きさが変化しますが、CSSを利用してフォントサイズを変更することができるので気にしなくて大丈夫です。

2）今回はページの見出しを<h1>として記述してみましょう。これは<head>～</head>内ではなく<body>～</body>内に記載します。

ここまでの記述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ねこさまブログ</title>
</head>
<body>
<h1>ねこさまブログ</h1>
</body>
</html>

画像を挿入する

それではこちらの猫ちゃんの画像をダウンロードしてご自身のパソコンのデスクトップに保存してください。私が個人的に撮影した地域猫さんなので著作権的なことはもろもろ大丈夫です（被写体が許せば）。

画像の保存先がデスクトップに設定できていれば正式な保存名は
C:¥Users¥ユーザー名¥Desktop¥cat.jpg
となります。

保存した画像を右クリックして「プロパティ」を開けば「場所:」で確認できます。画像のファイル名がわかれば下準備は完了です。

3）画像を挿入する場合には下記のタグを使用します。

そして今回の場合は以下のように記述します。

ここまでの記述

img srcは見たままイメージソース（image source）です。img src=""の「""（引用符）」の中に画像ファイルの場所を指定しないとブラウザは画像を探し出すことができません。

後ろにはtitleとaltという指示がありますが、titleはtitle属性と呼ばれ画像にマウスオーバー（対象にマウスポインタを重ねること）した際に画像の説明文を表示できるものです。正直スマホでの閲覧が圧倒的に増加した昨今ではほとんど使うことはなかったりします。ちなみに要素の後ろに引っ付いているこれらを属性値と呼び「属性値=""」の形で使用します。要素の開始タグと属性値は半角スペースで離します。

<開始タグ属性値=""><終了タグ>

altはalt属性と呼ばれる「代替テキスト」で最近ではTwitterやInstagramなどのSNSでも目にするかもしれませんが、画像が何らかの理由で表示できない場合に代わりにテキストで説明を付与するものです。tilte属性と比べると重要度は高いですが、空白のままでも問題はありません。また「猫」以外の説明も加えたい場合は

alt="猫,かわいい"

のように半角の「,（カンマ）」で区切って追加できますが、あまり説明が多くなりすぎるのは推奨されないようです。

先述した通り画像の場合のtitle属性とalt属性の記載は任意なので空白のままでも問題ありませんが、alt属性は例えば目が不自由な方用の閲覧に必要になったり画像検索用に使用されたりするので何かしら記載しておいた方が好まれます。

改行を入れた文章を記述する

4）前回は<p>タグで挨拶文を表示しただけでしたが、今回はもう少しだけ長文かつ「改行」を加えてみましょう。

<br>

参考：間違いやすい例

・<br></br>
・</br>
・<br/>

改行用の<br>タグには終了タグは必要ありません。また、これは私が初期にやらかしていたのですが何故か無暗にスラッシュを入れていたことがあったのでこれも不要です。（XHTMLという別の言語では<br />を使用しますがHTMLでは<br>を使用します）

ここまでの記述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ねこさまブログ</title>
</head>
<body>
<h1>ねこさまブログ</h1>
<img src="C:¥Users¥ユーザー名¥Desktop¥cat.jpg" title="猫" alt="猫">
<p>はじめまして！
<br>愛猫ちゃんのブログを始めました！！
<br>↓
<br>ENTER</p>
</body>
</html>

p要素の途中に<br>を入れるとそこで改行します。ただp要素は「ひとかたまりの文章」という意味なので、今回のようにレイアウトを考慮して改行を多用するのも実はあまり好まれません。レイアウトに凝る場合にはやはりCSSの知識が必須になってくるので、とりあえず今回はこのまま進みます。

ここまできたら前回と同じ方法でtxtファイルの拡張子をhtmlに変換してブラウザで開いてみてください。成功していれば下の画像のようになっているはずです。

CSSを使用してHTMLを装飾する

CSSとはCascading Style Sheets（カスケーディングスタイルシート）の略で、ざっくり説明するとHTMLで描写されるものに対してさまざまな装飾を与える言語です。HTMLとCSSはセットで覚えることが多いです。というよりCSSを使用しないとネット黎明期の頃の懐かしさが漂うと同時にかなり簡素な見た目になってしまうので、今のHTMLには欠かせない相棒言語です。

特徴のひとつとして言語は上から順番に読み込まれるというルールがあるので、例えば同様のタグに対して別の指示を二重に記述すると後述のものが優先的に上書きされて認識されます。そのためCSSでは記述する順番も重要素になる場合もありますが、今のところはそこまで気にせず自由に試して問題ないと思います。もっと専門的になると記述する順番や方法によってブラウザの読み込み速度に関係したり、仮に他の誰かとHTMLファイルやCSSファイルを共有して構築する際に視認性が良い方が好まれるなどもあります。ひとりで自由にやる分には余程のことがなければ大丈夫です。

HTMLファイル内にCSSを記述する

CSSの情報量が多くなってくると通常は外部ファイルとして新たにCSSファイルを作成しHTMLファイルに読み込ませるという方法を取るのが一般的になってくるのですが、ここでは外部に分ける必要もないかと思うので一緒に書いてしまいます。

HTML内にCSSを記述するには以下の要素を使用します。今回はhead内に記載します。

このstyle内に記載した通りにブラウザ側でHTMLに装飾を施してくれるわけですが!!HTMLとは記述方法がガラリと変わるので正直最初の頃はなかなか戸惑いました。

ここまでの記述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ねこさまブログ</title>
<style>
</style>
</head>
<body>
<h1>ねこさまブログ</h1>
<img src="C:¥Users¥ユーザー名¥Desktop¥cat.jpg" title="猫" alt="猫">
<p>はじめまして！
<br>愛猫ちゃんのブログを始めました！！
<br>↓
<br>ENTER</p>
</body>
</html>

5）まず見出し（h1）に指定した「ねこさまブログ」の文字を中央寄せにして色も変えてみましょう。

h1 {
text-align: center;
color: pink;
}

簡単に説明すると「h1の開始タグと終了タグに挟まっている文字は中央に寄せて、色はピンクにしてね」という指示です。色指定としては通常はRGB（Red, Green, Blueの3色を基盤とした配色コード）を使用するのが一般的ですが、直接英語名で指示しても反映されます。もっと複雑な色を指定したい場合には以下のような記述法があります。

参考：16進数で指定する場合

h1 {
text-align: center;
color: #F8ABA6;
}

参考：RGB（10進数）で指定する場合

h1 {
text-align: center;
rgb: (248, 171, 166);
}

さて、この謎の改行と空白は何なの??と思った方、私もそう思います。

h1 {text-align:center; color:pink;}

上述のように縮めてしまっても動作には問題ないのですが専用のテキストエディタでも自動的に補完してくれるようになっているので、理由は正直よくわかりませんが慣れてくると詰めている方が違和感が出てきます。とりあえずは一般的な記述方法で練習することをおすすめします。

6）次に挨拶分（p要素）も中央寄せにしてみます。

p {
text-align: center;
}

これもh1と同様です。このファイルでp要素はひとつしかないのでこれでOKです。p要素が複数ある場合は全てのp要素にこのCSSが適用されてしまいますが、情報量が多くなる時はまた別の方法がありますので今はこのまま進みましょう。

ここまでの記述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ねこさまブログ</title>
<style>
h1 {
text-align: center;
color: pink;
}
p {
text-align: center;
}
</style>
</head>
<body>
<h1>ねこさまブログ</h1>
<img src="C:¥Users¥ユーザー名¥Desktop¥cat.jpg" title="猫" alt="猫">
<p>はじめまして！
<br>愛猫ちゃんのブログを始めました！！
<br>↓
<br>ENTER</p>
</body>
</html>

画像を中央寄せする

画像の場合もCSSで中央寄せを指定できます。昔のダイヤルアップのように画像をダウンロードするだけでカリカリと何分も待たされた頃と比べて圧倒的に通信容量が増えた昨今では画像の使用頻度も増えています。

7）まずHTMLの方でimgタグを下記の要素で囲みます。

このdivは区分や部分などを意味する「division」の略です。この場合「divで囲った部分に」CSSを適用させるという要素になります。では後ろのclass="cat"は何かというと、囲った部分に対して名前を付けるclass属性というものです。

引用符の中は完全に任意なので、自分や共有者がわかりやすいように自由に指定して問題ありません。今回の場合は猫の画像なのでclass名はcatにしましょう（極端な話dogでも良いです）。これでHTMLとCSSの間では画像の名前は「cat」に命名されました。

では、ここからstyle内にどのように記述するかというと以下のようになります。

.cat{
text-align: center;
}

中央寄せの指示はh1とpの時と同じですが、catの先頭に半角の「.（ドット）」を付けるのを忘れないようにしましょう。これが「class属性（囲った部分）に付けた名前ですよ」ということをブラウザに教えるものになります。

ここまでの記述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ねこさまブログ</title>
<style>
h1 {
text-align: center;
color: pink;
}
p {
text-align: center;
}
.cat {
text-align: center;
}
</style>
</head>
<body>
<h1>ねこさまブログ</h1>
<div class="cat">
<img src="C:¥Users¥ユーザー名¥Desktop¥cat.jpg" title="猫" alt="猫">
</div>
<p>はじめまして！
<br>愛猫ちゃんのブログを始めました！！
<br>↓
<br>ENTER</p>
</body>
</html>

リンク先を追加する

それではCSSからは離れてHTMLのいちばん要になる機能である「リンク」を設置してみましょう。

これはa要素と呼び開始タグと終了タグで囲んだテキストや画像をクリックすると引用符に記載された場所に移動する指示を出します。後ろのhref属性は「引用符の中がリンク先のURLですよ」ということを示しています。今のままではリンク先のアドレスがないので擬似的に記述してみましょう。

引用符の中に「#」を入れると「ページの上部に移動する」という指示になります。よく「PAGE UP」や「ページ上部へ戻る」という矢印を目にするかもしれませんが、これを使用している場合が多いです。このサイトでも使用しています。

ここまでの記述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ねこさまブログ</title>
<style>
h1 {
text-align: center;
color: pink;
}
p {
text-align: center;
}
</style>
</head>
<body>
<h1>ねこさまブログ</h1>
<div class="cat">
<img src="C:¥Users¥ユーザー名¥Desktop¥cat.jpg" title="猫" alt="猫">
</div>
<p>はじめまして！
<br>愛猫ちゃんのブログを始めました！！
<br>↓
<br><a href="#">ENTER</a></p>
</body>
</html>

スクショ画像ではなくHTMLファイルでブラウザに表示されたものが見たい!!という方は下記のリンク先に作成しているので参考にしてみてください。私のブログの仕様上により別ページに作っています。

※新しいタブが開きます

⇒ねこさまブログ（HTMLのみver.）
⇒ねこさまブログ（HTML+CSS追加ver.）

もし「これがわかりづらい」「こんな表現をしてみたい」「ここ間違ってるよ」などがあれば、お気軽にメールやSNSなどで教えてください。私は実務経験もなければこれといってウェブ系の資格も持っていませんが（普通の事務でExcelなどを使用していた程度）IT凡人ならではのわかりやすい解説ができたらなと思っています。

こういった操作や記述は他と同じように慣れが必要なのでいろいろ試して共に頑張りましょう

＼気になったらSHARE!!／

次の記事：キャンベルハムスター4匹家族の生涯をみた

prev

next

（解放感ゼロ）なんとなく終わった空白の夏→2020：前の記事