ホームページ制作前に知っておきたいこと

HTMLとCSS

ホームページの基本

・ふだんChromeなどのブラウザで見ているものは全てホームページ(YouTube、Amazon、Twitterなどもホームページ)
・ホームページは、HTML(エイチ・ティー・エム・エル)という言語で作成されている。
・ホームページは、CSS(シー・エス・エス)という言語で装飾されている。

ホームページ制作に使用するソフト

・Windowsのメモ帳(慣れてきたら、フリーのエディタをインストールします)
Chrome(Googleのブラウザ) – サイト制作に適した機能が豊富なため利用します

押さえておきたい用語

HTMLとは?

Hyper Text Markup Languageの略。ホームページの構造を記述したもの
・HTMLを人に例えるなら「骨格」に相当する
・例としてChromeでサイト閲覧中、CtrlUキーを押すと、そのページのHTMLを閲覧できる(ぜひ見てみてください!)
・HTMLファイルの拡張子は、「html」または「htm

CSSとは?

Cascading Style Sheetの略。ホームページの見た目部分(色、フォント、レイアウト等)を記述したもの
・CSSを人例えると、肉体や服装
・現在の最新バージョンは3であり、CSS3と呼ばれている
・CSSファイルの拡張子は、「css

タグについての決まりごと

HTMLは、数種類のタグによってホームページを構成する。
タグは、基本的にはによって囲まれた文字列を指す

タグの例
 <p>こんにちは!<br>トマトです</p>

上記をブラウザで閲覧すると以下のように表示される

こんにちは!
トマトです

上記例では、pタグbrタグを利用している。

タグ意味
<p>段落の始まりを表す
</p>段落の終わりを表す
<br>段落内の改行を表す

※上記pタグのようにタグには、始まり終わりを表すものとbrタグのように単発で用いるタグの2種類がある。終わりタグが存在するものには、タグ名の前に/(スラッシュ)がつく。例)<h1>~</h1>

タグは入れ子で記述する

HTMLタグを記述する際の重要な考え方として、タグの中に別のタグを含める際、入れ子状に記述する決まりがある。
例えば、aaaというタグの中にbbbというタグ(実際にはaaaタグ、bbbタグは存在しない。説明のため)を記述するには次のようにする。

<aaa>文字文字文字文字<bbb>文字文字</bbb>文字文字</aaa>

次は記述エラー。

<aaa>文字文字文字文字<bbb>文字文字</aaa>文字文字</bbb>

タグの中にタグを含めない場合、入れ子にする必要はない。記述はこうなる。

<aaa>文字文字文字文字文字文字</aaa>
<bbb>文字文字</bbb>

必要最低限なHTMLタグ

ホームページを構成する上で必要最低限なタグは次の3つです。(最もこれだけでは何も表示されませんが…)

タグ意味
<html>
 ~
</html>
htmlタグの開始と終了。
ホームページはこのhtmlタグの内側に記述する必要がある
<head>
 ~
</head>
headタグの開始と終了。
ホームページの設定部分(タイトル、文字コード、検索された際のサイト紹介文等)を記述する
<body>
 ~
</body>
bodyタグの開始と終了。
ホームページに表示される内容を記述する
必要最低限なHTMLタグ

ホームページの構成イメージ

上記必要最低限なHTMLタグをイメージで表すとこうなる。

HTML5のひな型

前述のHTMLのイメージ図を実際に記述するとこうなる。(HTMLのバージョンは、HTML5として記述)
前述のHTMLイメージと言ったが、html、head、bodyタグのみだとブラウザで開いた時に何も表示されない為、titleタグ、h1タグ、pタグを追加している。
このファイルを基本としてホームページを作成していきます。
※メモ帳などのエディタで保存する際、文字コードUTF-8として保存してください。

補足説明として、先頭の <!DOCTYPE html> は、必ず1行目に記述するDOCTYPE宣言と呼ばれるもの。HTMLのバージョン5で記述されています、という意味を表す。

2023-08-03 追記
現在HTMLにバージョンという概念は廃止され、HTML Living StandardというWHATWGという団体が策定するものに変わった。

参考

HTML5が廃止されたのはなぜ?その経緯やHTML Living Standardとは? | ITエンジニアハック
HTML5は、W3Cが定めたHTMLの勧告のことですが、2021年1月28日に廃止されました。webサイトのフロントエンドを構築する上でも欠かすことのできないHTMLとCSSですが、既に一般的となって...
Web Hypertext Application Technology Working Group (WHATWG)

ファイル名:HTML5のひな型.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTML5のひな型</title>
</head>
<body>
	<h1>HTML5のひな型</h1>
	<p>HTML5のひな型ファイルです。</p>
</body>
</html>

コメント

  1. kiryu より:

    こんにちは、お忙しい中申し訳ありません。
    以前、Unity関連について質問したものです。度々本サイトを参考にしています。
    素晴らしい情報を提供していただいていることに感謝しています。
    一通りPythonの学習も終わり、Web開発のためにVSCodeでHTML&CSS&Javascriptを勉強しようかと思っています。
    ググればいくらでも記事は出てくると思いますが、電農産物さんの分かりやすい記事で環境を整えたいと思い、コメントしました。
    もしよろしければ、VSCodeでWebサイト作成の環境を構築する記事を執筆していただけないでしょうか?
    その場合は、私は電農産物さんの記事を楽しみにしています。
    何卒よろしくお願いいたします。

    • dennou より:

      こんにちは。管理人です。
      ちなみにサイト名は 電脳産物 です(^^)/

      これは当サイトへの仕事依頼でしょうか?お代金を頂かなくてはなりません。

      ご質問の

      VSCodeでWebサイト作成の環境を構築する

      ですが、VsCode自体がWebサイト作成の環境だとわたしは認識していまして、VsCodeをインストールさえすれば十分な環境が手に入りますよ。
      試しにVsCodeでindex.htmlというファイルを作成して、「!」(半角ビックリマーク)の後にTABキーを押してみてください。

      • kiryu より:

        すみません、お名前を間違えてしまいました
        返信ありがとうございます!了解しました!

        • dennou より:

          VsCodeは高機能なエディタですので、まずはインストールした状態で使ってみることをおすすめします。
          使っているうちに必要な機能拡張を追加したりしていけば自分の開発環境となります。

          よく「VsCodeのおすすめ機能拡張」などと紹介されていたりしますが、最初から環境を整えすぎてしまうと「自分にとって使いやすい環境を作っていく」という作業体験が抜け落ちてしまい、もったいないなと個人的には思います。

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