こんにちは、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ページ
HTML
「head要素」
タイトルなど文書に関わる情報
「body要素」
見出しや段落など
Webページ
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、文書の方向が左から右へ続くということになります。
つまり、このタグで囲われているもの全てのテキストが日本語設定で、左から右へ続くということを表しています。
※10/8 記載に誤りがあったため文章を修正しました。
<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=”https://liginc.co.jp/wp-content/themes/lig2013/css/all.min.css?d=20131113″ rel=”stylesheet” media=”all” id=”default_css”>
とあります。
これは「この文書に関してリンク先のCSSファイルを適用させる」という指示になります。
このように関連づけをしていくことで、HTMLで定義した文書構造にCSSのデザインが反映されるようになります。
id属性
headタグの中にidという属性があります。
これは「セレクタ」というものの一種で、セレクタとはグルーピングのことを指します。
たとえば<body id=”××”>という場合であれば、CSS上で××と名付けられたデザインのグループをbodyタグに適応させるということになります。
id属性を使うことで、同じコードを何度も書く必要がなくなるので大変便利です。
ただし、id属性は文書内で同じ値のものは1度しか使えません。同じ値を使いたい場合は、class属性というものを使います。
※10/9 class属性に関する記載を追記させていただきました。
スクリプト言語
HTMLは、文書をタグ付けする「マークアップ言語」というものに分類されます。
それに対し、Webページやアプリケーション内で動きを指示するためのプログラミング言語のことを「スクリプト言語」と呼びます。
マークアップ言語がほぼHTMLとなるのに対し、スクリプト言語はさまざまな種類が使われます。今回は代表的なスクリプト言語であるJavaScriptについて、概要だけ紹介させていただきます。
JavaScript
動きのないWebページに、動きを加えることを目的として開発された言語です。
また、JavaScriptをより便利に扱うためのライブラリに、jQueryというものがあります。JavaScriptをもっと簡単に書くためのツール、というのがわかりやすいかもしれません。
その他プログラミング言語にはスクリプト言語以外にも多くの種類があるうえ、毎年のように新しい言語が発表されます。
どのようなものかその都度チェックしてみてもいいかも知れないですね。
※10/9 一部内容に誤りがありました。お詫びして修正させていただきます。
まとめ
いかがでしたでしょうか。
HTMLの1つ1つを全て記憶する必要はありませんし、Web担当者の中にもコードが書けないという人はたくさんいます。
しかしWebページがどのように構成されており、それぞれの要素がどのような意図を持っているものか、についてはSEO対策などにも活用できることです。
まずは最初に理解すべきWeb知識として、今回紹介した内容などをご確認いただければと思います。
以上、最後までお付き合いいただきありがとうございました。それでは、また。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
