ウェブサイトの作り方　”実践1”　headタグ

おはようございます

本日からいよいよウェブサイトの作り方・実践編をお送りしたいと思います。

ウェブサイトを実際に構築する手順に沿って丁寧に説明していきますので、何卒宜しくお願い致します。

まずはじめに、現在2021年8月に使われているhtmlのモデルはHTML Living Standardというものです。

ちなみに以前はHTML5と呼ばれるものが実装されていましたが、2021年1月に廃止されたばかりです。

なので当分の間は新モデルがリリースされることはないと感じているのですが、2021年より未来でこのブログを見てくださっている方は最新モデルが何なのか検索してみてください。

それによって書き方や機能が変わってしまいますので。

では本題の方へ移らせていただきます。

前回、前々回の確認がしたい方はこちら

ウェブサイトの作り方　”入門１” | 株式会社レーベン (leben-neu.co.jp)
ウェブサイトの作り方　”入門2”　HTML導入 | 株式会社レーベン (leben-neu.co.jp)
ウェブサイトの作り方　”入門3”　CSS導入 | 株式会社レーベン (leben-neu.co.jp)

その1

では早速、ウェブサイトのレイアウトをこうして、ここに文字を入れて、画像はこれにして・・・

とはいきません（笑）

まず始めにheadタグを書かなければなりません。

headタグとは、ウェブサイトに必要な情報や設定を記入するタグです。

パソコンを購入した際も、まずは初期設定を行わなければインターネットは使えませんよね。

それと同じで、ウェブサイトを作成するのにも初期設定のようなものが必要になります。

今回はその初期設定について詳しく解説していきます。

その2

では具体的に初期設定とはどのようなものなのか。

まずは必要なフォルダ、ファイルを作成します。下記画像と同じように作成してください。

フォルダの作り方：右クリック→新規作成→フォルダ

index.htmlの作り方：右クリック→新規作成→テキストドキュメント→新しいテキストドキュメント.txtの名前をindex.htmlに変更

私はsampleというフォルダの中にindex.html　そしてcssとimgフォルダを作成しました。

sampleというフォルダ名はご自分のお好みで変更してください。my blogやofficial websiteなど何でも構いません。

その3

index.htmlをVSCodeで開きます。

ここからはVSCodeがないと非常に作業がしにくいのでダウンロードすることを強くお勧めします。

まだダウンロードされていない方はこちらからどうぞ
Visual Studio Code – コードエディター | Microsoft Azure開き方：.htmlファイルを右クリック→プログラムから開く→Visual Studio Code 最初は英語表記になっておりますので、日本語に設定したい方はこらの手順を行ってください。
日本語にする方法：左バーの一番したにある4角形のマーク「Extension」をクリック→Serch Extensions in Marketplaceの欄に「Japanese Language Pack」と入力し、インストール→キーボードの「Ctrl+Shift+p」または「Commandl+Shift+p」を押し、出てきた欄に「Configure Display Language」と入力しクリック→jaを選択開けましたら、コードを書いていきます。打つと手間がかかるので下記をコピーしてください

<!DOCTYPE html>
<html>
    <head>
        <meta charset=“UTF-8”>
        <link rel=“stylesheet” type=“text/css” href=“css/common.css”>
        <link rel=“stylesheet” type=“text/css” href=“css/index.css”>
        <meta name=“viewport” content=“width=device-width,initial-scale=1.0”>
        <meta name=“Description” content=“ウェブサイトの説明文”>
        <meta property=“og:title” content=“ウェブサイトの名前”>
        <meta property=“og:type” content=“website”>
        <meta property=“og:url” content=“URL”>
        <meta property=“og:image” content=“アイコン”>
        <meta property=“og:site_name” content=“ウェブサイトの名前”>
        <meta property=“og:description” content=“ウェブサイトの説明文”>
        <title>サンプルサイト</title>
        <link rel=“shortcut icon” href=“img/logo/favicon.ico”>
    </head>
</html>

上から順番にそれぞれのコードを説明していきます

<!DOCTYPE html>
DICTYPE宣言と呼ばれているコードで、どのバージョンのhtmlに基づいて記述されているかを記すために必要なコードです。
現在のバージョンは上記の短い書き方で問題ないのですが、HTML4等過去のバージョンでは更に長いコードを書く必要がありました。
「とりあえずhtmlを書くのに必要なもの」という認識で十分です。

<html></html>
htmlタグです。<html>から始まり、</html>で終了させます。
この</〇〇>がないと終了しないことを覚えておいてください

上のDOCTYPE宣言はタグではないので終了タグが必要ありませんが、</○○>のように終了タグが必要なケースはこれから何度も出てきますので非常に大切です。

肝心のhtmlタグの内容ですが、「ここからここまでがhtmlのコードです」ということをブラウザ側に認識させるためのコードです。

なので、このコードも「とりあえず必要」という認識で問題ありません。

<head></head>
headタグと呼ばれているコードで、ウェブサイトに必要な情報や設定を記入するタグです。<head>から始まり、</head>で終了させます。

headコードの中になにやら沢山並んでいますね。では1つずつ見ていきましょう。

href=”css/common.css”で保存されているファイルを指定します。
href=”index.htmlと同じ場所に保存されているファルダ名(css)/cssフォルダの中にあるファイル(common.css)”といった書き方をします。

../と記入すると1つ前のフォルダに戻ることができます。
今はまだこの方法は使う必要がありませんが、今後使うことが出てきます。なので、その際に詳しく説明したいと思います。

cssフォルダの中にcommon.cssとindex.cssファイルを作って読み込ませましょう。

.cssの作り方：右クリック→新規作成→テキストドキュメント→新しいテキストドキュメント.txtの名前を○○.cssに変更

共通という意味の「common」と「index」の2つのcssファイルを読み込ませています。

なぜ2つのファイルを読み込ませているかと言いますと、例えば全ページ共通のcssはcommonに。indexのみに適応させたいcssはindexにと使い分けるためです。

今はよくわからないと思いますが、次回紹介予定のヘッダータグの時に詳しく紹介したいと思います。

今はとりあえず記入しておいてください。

この文章を見て、そのサイトを訪問するか否かが決められる非常に大切なものとなっております。
文章の文字数は120字以下で、ウェブサイトの内容とユーザーが検索しそうなワードをうまく織り交ぜるようにしましょう。

<meta property=“og:title” content=“ウェブサイトの名前”>
<meta property=“og:type” content=“website”>
<meta property=“og:url” content=“URL”>
<meta property=“og:image” content=“アイコン”>
<meta property=“og:site_name” content=“ウェブサイトの名前”>
<meta property=“og:description” content=“ウェブサイトの説明文”>

TwitterやFacebookなどのSNSでシェアされた時に表示させる内容です。
二行目の content=”website”だけ注意がありまして、ウェブサイトのホームとなるページ以外はcontent=”article”に変更してください。

Facebookで私のブログをリンクさせた時はこのように表示されます。
これはブログ側が自動でしてくれたものなのですが、写真、URL、ブログのタイトル、そして本文が少し見えていますよね。この部分を装飾するのが上記のコードとなっております。

<title>サンプルサイト</title>
<link rel=“shortcut icon” href=“img/logo/favicon.ico”>

titleはウェブサイトのこの部分を表示させるものです。

そしてfaviconはtitleで入力した文字の横に表示されている画像です。

マウスで書いた酷い字と矢印が確認できますでしょうか。
faviconもcssの時と同じようにファイルの保存先を指定します。私の場合ですと、href=”img/logo/favicon.icoなので、index.htmlと同じ場所にあるimgフォルダ|その中にあるlogoフォルダ|その中にあるfavicon.icoということになります。