シンプルなWebサイトを作れるようになる
html

【Part1】HTMLの基本を理解する

シンプルなWebサイトを作れるようになる
2024.04.24
この記事は約6分で読めます。

HTMLは、Webページの構造をつくるための言語です。この記事では簡単なHTMLファイルを作成して、基本構造を理解した後に、オリジナルのWebページを作成します。

HTMLファイルを作成する

VS Codeを利用すると作業を効率化することができます。事前にインストールしておきましょう。

作業場所はデスクトップ上にフォルダを作成して行います。作成したフォルダを右クリックして、メニューから「Codeで開く」を選びましょう。

フォルダを選択した状態で「Codeで開く」を選択すると、フォルダが開かれた状態でVS Codeが起動します。メニューに「Codeで開く」の選択肢がなくてもCodeを起動してから、「ファイル」>「フォルダを開く」と選択していき、作業フォルダを選択すれば同じことができます！

新しいファイルを作成します。最初に作るファイル名はなんでもいいですが、「1.html」にわたしはします。フォルダ名の部分にマウスカーソルを合わせると、「新しいファイル…」と表示されるのでクリックし、ファイル名の指定があるので「1.html」と入力します。

右側のエディタ画面に移動し、html:5と入力します。

emmet 省略記法と表示されるので、表示されている状態でenterを押すと、HTMLファイルのテンプレートが自動で入力されます。順番に見ていきましょう。

タグの概念とHTMLの基本構成

HTMLにおけるタグは、Webページの構造を定義するためのマークアップ要素です。タグは<と>によって囲まれた部分で、制御情報を示します。HTMLタグは一部の例外を除いて「開始タグ」と「終了タグ」で構成され、それらで囲まれた部分を「コンテンツ」と呼びます。そして、この3つで構成されたものを「HTML要素」と呼びます。HTMLには多くのタグがありますが、今回作成したファイルで使われているタグを紹介します。

htmlタグ

htmlファイルの基本中の基本です。すべての要素はこのhtmlタグの中に記述していきます。

headタグ

headタグはページに関するメタデータやスクリプト、CSSのリンクなどを記述します。headタグの中身はブラウザや検索エンジンにとって重要な情報を含んでいますが、直接的にはコンテンツとして表示されません。

bodyタグ

bodyタグはウェブページの可視部分、つまりユーザーが直接目にするテキストや画像、フォームなどのコンテンツを含んでおり、Webページの主要な部分を形成しています。

titleタグ

titleタグにはページのタイトルが設定されます。設定されたタイトルはブラウザのタブ部分に表示されます。

見出しと本文の追加

Webページの最低限の要素はこれで完成しました！完成したhtmlファイルは開くことができるはずです！開いてみると「Document」とタイトルの付いた新しいタブが開きます。bodyの部分に何も記述していないので、特に何も書かれていないページですね。このままではさみしいので、テキストコンテンツを追加していきます。

真っ白な画面
bodyタグ内になにも書いていないので、なにもないまっしろな画面が表示されました

テキストコンテンツによく使われるタグに、hタグとpタグがあります。hタグが見出し、pタグが本文を表します。

hタグ

hタグは見出しを表し、h1からh6までのレベルが存在します。見出しを適切に設置することで、ページの階層構造を明確にすることができます。

pタグ

pタグは段落を定義し、テキストのブロックを形成します。

pタグを使わなくてもbodyタグ内で本文を書くことはできますが、CSSを用いた装飾などがしづらくなるというデメリットがありますので、本文はpタグの中に書くようにしましょう。

テキストの装飾

テキストの装飾の一部はタグによってすることも可能です。一例を紹介します。

brタグ

文章の途中に改行を入れることができます。brタグは終了タグのないタグの一つです。

strongタグ

タグの範囲内を太字にすることができます。また太字部分は検索エンジンに対しても重要ワードとして示すことができます。

iタグ

タグの範囲内を斜体にすることができます。斜体は通常、引用や外国語、心の声を表す際に使用されます。

課題

自分のお気に入りサイトのタイトルとURLをジャンルごとに３つずつ出し、オリジナルのWebサイトをつくってみましょう！私がつくってみたサイトの画像を掲載していますが、なるべく自分の発想でオリジナルサイトを作ってほしいので、隠しておくことにします

完成イメージ
作成したHTMLコード
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>わたしのお気に入りサイト</h1>
    <h2>買い物</h2>
    <p>Amazon<br>https://www.amazon.co.jp/</p>
    <p>楽天市場<br>https://www.rakuten.co.jp/</p>
    <p>AliExpress<br>https://ja.aliexpress.com/</p>
    <h2>ゲーム</h2>
    <p>Steam<br>https://store.steampowered.com/</p>
    <p>unityroom<br>https://unityroom.com/</p>
    <p>EPIC GAMES<br>https://store.epicgames.com/ja/</p>
    <h2>SNS</h2>
    <p>Facebook<br>https://www.facebook.com/home.php</p>
    <p>X<br>https://twitter.com/home</p>
    <p>Youtube<br>https://www.youtube.com/</p>
</body>

</html>

次回は、imgタグを使った画像の挿入、aタグを使ったリンクの作成、埋め込みコンテンツについて学習します。お付き合いよろしくお願いいたします！

コメント

タイトルとURLをコピーしました