Web制作

2014.10.09(thu)

LIGブログ編集部

Web担当初心者がまず知っておきたいHTMLやCSSに関する基礎知識【実例付き】

369

こんにちは、LIGブログ編集部です。

最近ではさまざまなプロモーションやマーケティング活動などでもWebを活用するようになり、専門職の方以外も「Web担当者」となる方が増えてきました。

とはいえ、アクセス解析や広告出稿などをメインに担当するような方から、簡単なサイト更新であれば全て対応されるような方まで、その職務範囲はさまざまだと思います。

そこで今回は、Webの知識がほとんどないまま初めてWebに関連する業務を担当することになった人が、最低限知っておきたい基礎知識についてまとめてみました。

業務上Webに関する知識は必要ないという方も、普段見ているネットの仕組みはこうなっているのか、と確認の意味でご覧いただければと思います。

▼目次

Webページの仕組み

Webページはさまざまなプログラミング言語から作成されています。

プログラミング言語とはコンピュータ言語の一種で、プログラムを記述するためのものです。「私たち人間とコンピュータの共通の言語」と考えると分かりやすいかと思います。

プログラミング言語を用いることによって、コンピュータにどんな意味であるかを定義付けたり、動作を指示したりすることができるようになります。

そしてWebページとは、以下のように定義されるものとなります。

Webページ：
WWW(World Wide Web)システムを使ってインターネット上で公開されている文書。Webブラウザに一度に表示されるデータのまとまりで、テキストデータやHTMLによるレイアウト情報、文書中に埋め込まれた画像や音声、動画などから構成される。インターネット上では本のように複数のWebページをひとまとめに公開するのが普通で、そのようなWebページのまとまりをWebサイトという。Webサイトは、本の表紙や目次に当たるトップページ(ホームページ)とそこからリンクされた他のWebページで構成される。

出典：IT用語辞典

Webページ、Webサイト、ホームページなどの違いをまずはおさえておきましょう。

Webサイトの構造

現在インターネット上で公開されているWebサイトのほとんどが「HTML」という言語で作成されています。

HTMLとは“HyperText Markup Language”の略称で、Webページを作成するための言語です。「head要素」「body要素」を含み、Webページの文書構造を規定するものとなります。その基本的な構造図は以下のとおりとなります。

なお、Webページ上で右クリックし「ページのソースを表示」という項目を選択すれば、その構造を確認することができます。

基本構造: Webサイト
ホームページ
webページ
HTML
　「head要素」
　タイトルなど文書に関わる情報
　「body要素」
　見出しや段落など
Webページ
Webページ
Webページ

HTMLのタグ

以下、LIGのホームページのソースをもとに、HTMLの基本的なタグを1つずつ説明したいと思います。

LIGのホームページのソース: <!DOCTYPE html>
<html lang=”ja” dir=”ltr”>
<head>
<meta charset=”UTF-8″/>
<title>台東区でウェブ制作なら株式会社LIG [リグ]</title>
（中略）
<meta name=”description” content=”株式会社LIG(リグ)は東京都台東区でウェブサイト制作を行うスペシャリスト集団です。ホームページ制作、システム開発、ウェブマーケティング、リスティング、SEO対策などのお仕事を承っています。副業として、日本初の『セミの抜け殻販売サービス』を展開したいと考えています。”/>
（中略）
</head>
<body id=”special46″>
（中略）
</body>
</html>

<!DOCTYPE html>

「文書宣言」と呼ばれるもので、HTMLの文書であることを表す決まり文句になります。

<html lang=”ja” dir=”ltr”>

HTMLは、<タグ属性="値">という形をとります。

langはlanguage、”ja”はjapaneseを表すので、HTMLで言語設定は日本語であるということになります。
dir属性は文書の方向を指定するタグで”ltr”はleft to right、文書の方向が左から右へ続くということになります。

つまり、このタグで囲われているもの全てのテキストが日本語設定で、左から右へ続くいくということを表しています。

<head>

headタグは、この文書に対する情報について指示するものです。終了タグまで囲われた箇所が、この文書の情報となります。

<meta charset=”UTF-8″ />

charset属性は文字コード指定するもので、文字コードがUTF-8であることを指定しています。また、metaタグは閉じタグのないタグです。

<title>台東区でウェブ制作なら株式会社LIG [リグ]</title>

titleタグはWebページのタイトルを指し、ブラウザで表示した場合のウィンドウのタイトル部分の文書を指定しています。

<meta name=”description” content=”株式会社LIG(リグ)は東京都台東区でウェブサイト制作を行うスペシャリスト集団です。ホームページ制作、システム開発、ウェブマーケティング、リスティング、SEO対策などのお仕事を承っています。副業として、日本初の『セミの抜け殻販売サービス』を展開したいと考えています。”/>

head要素にはさまざまなタグを入れることが可能ですが、サイト設計において重要になってくるのがmetaタグです。
descriptionとはこのWebサイトの説明であるということで、content属性にその説明文のテキストを入れます。
description内に記載されているワードは、SEO対策として重要です。

</head>

そして、「ここまでが文書に関する情報である」というhead要素の終了タグです。

<body id=”special46”>

body要素の開始タグです。（idについては後ほど説明します。）
body要素は見出しや段落について指示するタグで、ソースを見てみると見出しやリンクが並んでいることがわかります。

</body>

bodyの終了タグです。

</html>

ソースの最後に、こちらのhtmlの終了タグがあります。

以上がHTMLの基本的なタグの構成になります。

CSSについて

CSSとは“Cascarding Style Sheets”の略称で、HTMLと組み合わせてWebページを作成するために使う言語です。
HTMLが文書構造を定義する言語に対し、CSSは文書の色や大きさ、レイアウトなどデザインを制御するための言語になります。

HTMLとCSSは独立した別々のものなので、関連づけさせるときにはHTML上で指示をする必要があります。

たとえばLIGのWebサイトのホームページのソースをみてみると、headタグの中に
<link href=”http://liginc.co.jp/wp-content/themes/lig2013/css/all.min.css?d=20131113″ rel=”stylesheet” media=”all” id=”default_css”>
とあります。

これは「この文書に関してリンク先のCSSファイルを適用させる」という指示になります。
このように関連づけていくことで、HTMLで定義した文書構造にCSSのデザインが反映されるようになります。