40代高卒者が製造業からIT転職する【HTML3】

2023年6月3日 19:37

こんにちは、フローです。

前回は、HTMLの記述例を書きました。

今回はその例を使って、ひとつづつ詳しくみていきましょう。

<head>タグ

前回のHTMLはこちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>デモサイト</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">製品</a></li>
                <li><a href="#">サービス</a></li>
                <li><a href="#">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h1>デモサイトへようこそ</h1>
            <p>ここにテキストが入ります。</p>
        </section>
        <section>
            <h2>製品</h2>
            <div class="product">
                <img src="product1.jpg" alt="製品1">
                <h3>製品1</h3>
                <p>製品1の説明が入ります。</p>
            </div>
            <!-- 他の製品の情報も追加 -->
        </section>
    </main>
    <footer>
        <p>© 2023 デモサイト. All Rights Reserved.</p>
    </footer>
    <script src="scripts.js"></script>
</body>
</html>

このHTMLコードの<head>内には、このWebページのメタデータとしてブラウザに伝える情報が含まれています。

以下に、各要素の詳細を説明します。

<meta charset=”UTF-8″>

このWebページがUTF-8エンコーディングを使用することを指定します。

UTF-8は、多言語をサポートするテキストエンコーディングの一種です。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

このWebページがレスポンシブデザインを採用しており、

モバイルデバイスでも適切に表示されるようにするための指定です。

width=device-widthは、画面幅をデバイスの幅に合わせることを示し、

initial-scale=1.0は、最初に表示される拡大率を100%に設定することを示します。

<title>デモサイト</title>

このWebページのタイトルを指定します。

ブラウザのタブに表示されるタイトルや、検索結果に表示されるタイトルとして使用されます。

<link rel=”stylesheet” href=”styles.css”>

このWebページに適用されるCSSスタイルシートを指定します。

href属性には、スタイルシートファイルのパスを指定します。

この例では、styles.cssというファイル名のスタイルシートが適用されます。

私は、このスタイルシートの記述をよく忘れます笑

<header>タグ

Webページのヘッダー部分の内容が含まれています。以下に、各要素の詳細を説明します。

<nav>

このWebページのナビゲーションバーを示す要素です。

<ul>

ナビゲーションバーのメニューリストを示す要素です。

<li>

メニューリストの各項目を示す要素です。

<a>メニュー項目をクリックすると、指定されたリンク先に遷移するための要素です。

href=”#”

リンク先を空のページに指定することで、クリックしても何も起こらないようにしています。

この例では、

<nav>に<ul>が含まれ、

<ul>に各メニュー項目を示す<li>が含まれています。

<li>には、各メニュー項目をクリックしたときに遷移するリンク先が指定されている<a>が含まれています。

このように、<header>内にナビゲーションバーを含めることで、Webページの使いやすさを向上させることができます。

<section>タグ

Webページのセクションを定義しています。<section>は、Webページを論理的に分割するために使用され、各セクションには一意のタイトルがあります。

以下に、この例に含まれる要素の詳細を説明します。

<h1>

このセクションのタイトルを示す見出し要素です。この例では、”デモサイトへようこそ”というテキストが指定されています。

<p>

このセクションの本文を示す段落要素です。この例では、”ここにテキストが入ります”というテキストが指定されています。

次に、この例のもう一つの<section>要素内に含まれる要素の詳細を説明します。

<h2>

このセクションのタイトルを示す見出し要素です。この例では、”製品”というテキストが指定されています。

<div>

このセクション内の製品情報をまとめるための要素です。

<img>

製品画像を表示するための要素です。src属性には、画像のパスが指定されています。

alt属性

画像が表示できなかった場合に表示される代替テキストを指定するための属性です。

<h3>

製品のタイトルを示す見出し要素です。

<p>

製品の説明を示す段落要素です。

<section>要素は、Webページを論理的に分割するために使用され、各セクションには一意のタイトルがあります。

<section>を使用することで、Webページの構造を明確にし、コンテンツの意味を伝えることができます。

<footer>タグと<script>タグ

Webページのフッター部分を定義しています。以下に、各要素の詳細を説明します。

<p>

フッターに表示されるテキストを指定するための段落要素です。

&copy

コピーライト（著作権表示）を表すHTMLエンティティです。

2023

著作権年を示すテキストです。

デモサイト

Webサイトの名称を示すテキストです。

著作権の所有者が全ての権利を保有していることを示すテキストです。

<script>

JavaScriptファイルを読み込むための要素です。

src属性には、読み込むJavaScriptファイルのパスが指定されています。

この例では、scripts.jsというファイル名のJavaScriptファイルが読み込まれます。

<footer>は、Webページの最後に表示される部分で、

一般的には著作権表示や問い合わせ先などが表示されます。

また、<script>を使用することで、Webページに動的な機能を追加することができます。

まとめ

今回はHTMLの記述例を詳しく書いていきました。

基本的な形なので、簡単なWEBサイトなら、この記述例でも充分だと思います。

後は、製品ページや、お問い合わせページなど、

デザイナを自由に決めてWEBサイト全体を整えていく感じです。

色々なデザインに挑戦してみて下さい。

レッツチャレンジ！

この記事が気に入ったらサポートをしてみませんか？