2019/06/01

【HTML】基本的な構造・書き方
【HTML】基本的な構造・書き方

はじめに

この記事は

「HTMLって言葉は聞いたことあるけどよくわからない...。」

「ホームページ作ってみたいけどよくわかんない...。」

「そもそもWEBページの仕組みがわかんない...。」

というような基礎の基礎がわからないという人に向けて書いた記事です。

最初は難しいと思いますが、プログラミング言語に比べると

HTMLやCSSは比較的簡単です。

初心者でも比較的理解しやすいと思います。

HTMLやCSSを学ぶ際に、最初に知っておきたい事項をまとめました。

    目次
  1. WEBページが表示される仕組み
  2. HTMLの構造
  3. タグの書き方
  4. head要素とbody要素
  5. 文字コードについて
  6. CSSとは
  7. ディレクトリとパスについて

WEBページが表示される仕組み

ブラウザにURLを入力するとWEBページが表示されるということは

知っていると思います。

URLはインターネット上の住所と同じです。

ブラウザにURLを入力することでWEBページにリクエストが送られます。

そしてリクエストに対して、データを送り返します。

この送り返されたデータがHTMLだったり、CSSだったりするわけです。

webサイトの仕組み

WEBページ自体はメモ帳(Windowsのデフォルトで入っているやつ)

さえあれば作ることが可能です。

(実際は見ずらいので他のテキストエディタをお勧めしますが...。)

要するに簡単に作ることが可能だということです。

メモ帳を保存するときに拡張子を「.html」にして保存すれば

HTMLファイルとして保存できます。

保存したHTMLファイルをクリックして表示すれば

ブラウザで自分のWEBページを見ることができます。

HTMLの構造

まずは下のHTML文書を見てみましょう。

<!DOCTYPE html>

<html>

 <head></head>

 <body></body>

</html>

一行目にDOCTYPE宣言をします。

DOCTYPEはHTMLのバージョンを示しています。

<!DOCTYPE html>はHTML5以降のバージョンを表しています。

昔はもっと長いDOCTYPE宣言が必要でした...。

<html>はHTML文書全体を表します。

そして<html>の中の要素に<head><body>

含まれています。

ですので<html>タグの間に<head>と<body>をはさみ、

</html>で閉じるように記述します。

html文書

headとbody要素については後述します。

タグの書き方

タグには開始タグ終了タグがあります。

見出しとしてよく使う、h1タグを例にしますが、

<h1>が開始タグ</h1>が終了タグです。

終了タグは「/」スラッシュを付けます。

タグの使い方

また、終了タグを省略できるものがあります。

  • </li>
  • </dd>
  • </p>
  • </tr>
  • 等(他にもたくさんある。)

基本的には開始タグと終了タグを対にして記述します。

ですが終了タグを書いてはいけないタグもあります。(終了タグをつけるとエラー)

  • <br>
  • <img>
  • <meta>
  • <link>
  • 等(他にもたくさんある。)

タグの中に属性を記述することができます。

imgタグを例にすると「img」のあとに半角スペースで区切った、

src」が属性名となります。

属性値は「""」(ダブルクォート)で囲います。

これは「imageフォルダのtest.pngという画像ファイルを表示する

という意味になります。

タグの使い方

head要素とbody要素

head要素は文書に関する情報を指定するところです。

body要素は文書の本文を記述するところです。

サイトを訪れるユーザが目にするのはbody要素の部分です。

ですのでhead要素だけ記述した場合は、

ブラウザの画面には何も表示されないと思います。

●head要素とbody要素の例

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>文書のタイトル</title>

 </head>

 <body>

  <h1>見出し</h1>

  <p>文章</p>

  <img src="image/test.png">

 </body>

</html>

●head要素内

・meta要素のcharset="utf-8"文字コードの指定です。

(文字コードについては後述します。)

・title要素は名前の通り、文書のタイトルです。

●body要素内

・h1要素は大見出しです。

サイトの閲覧者に見出しを伝えるために使用します。

・img要素は画像を表示するタグです。

src="image/test.png"」は

imageフォルダ内の「test.png」の画像を表示する指定です。

文字コードについて

コンピュータ上でテキストを表示するために割り当てられた数字のことを

文字コードと呼びます。

文字コードの種類はたくさんあります。

ASCLL 英数字が収録された文字コード。世界で使われているが、
漢字など(1バイト文字でない文字)は対応不可。
JIS 日本語表記の文字コード。
電子メールで日本語を表記する際の標準的な文字コード。
Shift JIS 日本語表記の文字コード。JISコードを改良したもの。
Unicode 世界の言語の文字をほとんど収録している。
UTF-8 Unicodeの一種。ASCLLとの親和性が高い。
UTF-16 Unicodeの一種。
UTF-8とは文字を表現するときの単位が違う。
EUC UNIX系のOSに使われる文字コード。

●文字化けが起こる原因

データそのものの文字コードと、表示するときの文字コードが同じでないと、

数字から文字の変換がうまくいかなくなり、文字化けが起こります。

実際にUTF8で保存したテキストデータをShift JISで開こうとすると

文字化けてしまいました。

UTF-8で保存したテキスト

タグの使い方

Shift JISで開こうとしたテキスト

タグの使い方

このようなことが起こらないためにも

文字コードをしっかり宣言しましょう。

head要素に<meta charset="文字コード">

記述すればOKです。

CSSとは

HTMLは文書の構造を示すものですがCSSはそこに装飾やレイアウトを施すものです。

p { background:#FFDBC9;}

↑これはpタグ要素の背景を薄いオレンジで塗ることを表しています。

文字の背景を塗ります。

文字の背景を塗ります。←CSSを適用した場合

CSSの記述場所は3つあります。HTML内に書く場合は2種類あります。

●HTMLの中に書く場合

・タグにピンポイントで記述する場合の例

 <p style="background:#FFDBC9;">

・スタイル要素をhead要素内に書く場合の例

 <style>
 p { background:#FFDBC9;}
 </style>

●CSSファイルに書く場合

HTMLファイルのhead要素に下記のようにlink要素を記述しましょう。

<link rel="stylesheet" type="text/css" href="sample.css">

href属性の部分には、自分で作成したCSSファイルのファイル名を記述します。

「sample.css」というファイルを自分で作成し、読み込みたい場合は

href="sample.css"」と記述します。

その他のrel要素やtype要素はコピぺで大丈夫です。

「sample.css」にCSSを書く場合は、

「sample.css」というファイルを作成し、

下記のようにスタイルを記述していきます。

sample.css の例

p { background:#FFDBC9;}

div { font-size: 20px;}

...

CSSファイルに書く場合は、ほかのHTMLからもlink要素で読み込めますので

同じCSSファイルを使いまわすことができます。

基本的に1ページごとに1HTMLファイル作成するわけですが、

そのたびにCSSを記述していたらめんどくさいですよね?

いろんなページで使う(共通)で使うスタイルは、CSSファイルに記述してしまいましょう。

あとからCSSを修正する場合にも、CSSファイルを直すだけになるので

修正しやすくなります。

HTMLファイル全部を修正するのは大変ですしね。

ディレクトリとパスについて

ディレクトリとは、フォルダのことです。

例えば「画像」というファイルをつくり、その中に「アニメ」「風景

といった感じでフォルダを作ることありますよね。

それと同じようにWEBサイトもディレクトリで階層化します。

例えばですが、一番上の階層がCドライブだった場合、

この階層にあるHTMLファイルがWEBサイトのトップとして表示されます。

ディレクトリ

●絶対パスについて

例えば上の画像のimg1.jpgの場所を表す場合、

パスは「C:\image\img.jpg」です。

フォルダを「\」で区切っています。


●相対パスについて

相対パスはリンクを書くページを基準として、

対象のファイルを相対的に指定する方法です。

相対パスは絶対パスよりも短く記述することができます。


main.htmlの階層を基準としてimg.jpgを指定したい場合は

image\img.jpg」です。


●HTMLで指定する場合(相対パス)

・「img1.jpg」(画像)をmain.html内に表示したい場合

<img src="image/img1.jpg">

・「sample.html」をmain.html内にリンク表示したい場合

<a href="sample.html">リンク</a>

えま
えま
主に英語、プログラミング系の情報を発信しています。某SIer企業に属していました。写真の子は飼っているチワワ♀のチーコです。カメラを向けるとすぐにカメラ目線になります。
Archive