【web制作初心者向け】webページを表示させるには？

こんにちは。
webデザイナーの小川です。
前回に引き続き、今回もwebサイトのページの中身について話を進めていきたいと思います。
4回目の今回は少し技術的な方向にお話を進めたいと思います。

webページを表示させるには一般的にhtmlファイル、cssファイルや画像データなどさまざまなファイルが必要になってきます。ここに動きをつけたい場合はjavascriptファイルが追加されます。(他にも世界中に公開となるとサーバーやドメインなども必要にはなってきますが、それはまた別のお話…)
最低限htmlファイルがあれば表示はされますが、それだけでは文字が並ぶだけのつまらないページになってしまします。現在ではほとんどのwebページが上記のファイルを組み合わせて表示をしています。

役割としては主に文章(html)・デザイン(css)・写真等の画像と大別されます。
htmlとcssにはそれぞれ記述方法があり、そのルールに則って記述をしていきます。
ここでは極々簡単に説明をさせていただこうかと思います。

htmlの記述方法

htmlは、コンテンツの構造を定義するマークアップ言語です。htmlはタグと呼ばれるの要素で構成され、これらのタグがコンテンツ部分を囲み、表示や動作を行います。例えば、次のようなコンテンツがあるとします。
<p class="text">Hello, World!</p>
初めの<p>が開始タグ、最後にある</p>が閉じタグです。この開始タグと閉じタグで囲み文書構造をつくっていくと、webページで表示できるhtmlを作成することができます。例外としてタグ囲まないこともありますが、基本的には開始タグと閉じタグで囲まれる記述方法で記述をしていきます。
※例で出したpタグは段落（文章中の内容的なまとまり）を示すタグです。
※「class="text"」については後ほど説明します。

タグはたくさんの種類(記事執筆時点で108種類)があり、適宜使い分けが必要になってきます。

cssの記述方法

cssはセレクタとプロパティと値を記述して、スタイルを指定していきます。
p { color: #000000; }
pがセレクタ、colorがプロパティ、値が#000000になります。
セレクタは指定したい場所、ここではpのタグが指定されています。pタグ以外の様々なセレクタを指定できるので、他のhtmlタグにCSSで装飾を行うことが可能です。
プロパティは適用するスタイル。そして、値がそのプロパティの値。それらを指定することで、この例では文字色の指定を行なっています。
上記のhtmlと組み合わせてるとpタグ(p)の文字色(color)を黒色(#000000)にするといった指示になるので
Hello, World!
表示はこのようになります。

htmlとcssの組み合わせ

先程、htmlの記述方法でありました「class="text"」の部分はページ内に他にpタグがありそのpタグと区別したい際につけるクラス属性というものがあり、class=”〇〇”といった記述方法になります。それに伴いcssでは変更したいクラス要素をセレクタに入れ、下記のような記述になります。
.text { color: #ff0000; }
表示結果はクラス属性text(.text)の文字色(color)を赤色(#ff0000)にするといった指示を出しているので
Hello, World!
となります。

他にもid属性というものもあり、そちらの場合htmlでは、
<p id="text">Hello, World!</p>
cssでは、
#text { color: #00ff00; }
となります。
こちらの表示結果はid属性text(#text)の文字色(color)を緑色(#00ff00)にするといった指示を出しているので
Hello, World!
となります。

上記２つの違いは記述方法もですが、class属性は1ページ内に何度も使用できますが、id属性は1ページに1つと決まっている点です。
※ここでは2つとも属性名にtextと付けましたが、この描き方でも「class」と「id」は別物扱いなので、問題なく動作はしますが、個人的には混同してしまうのであまりおすすめはしません。

まとめ

今回は極々簡単にhtmlとcssについて説明をさせていただきました。イメージとしてはhtmlで文章(コンテンツ)を作りcssで見た目の調整(デザイン)をすると考えてもらえればいいかと思います。内容としてはすごく簡単に触れましたが、htmlもcssもさらに踏み込んだ記述の方法があります。興味を持たれた方はweb制作に取り組んでみるのもいいかと思います。
次回は個人的によく使うhtmlタグのご紹介ができればと思っています。

アドコミでは、様々な構成のサイトのご提案をさせていただいております。新規サイトの立ち上げ、サイトリニューアルの際は是非お声がけいただければと思います。