ホームページ作成の費用相場について
いくらくらいが適切なの？
「HTMLとCSSってどんな違いがあるの？」
「HTMLやCSSでどんなことができるの？」
HTMLとCSSを理解すればWebサイトを作成できます。しかし、それぞれの違いや書き方は知らない人も多いのではないでしょうか。そこで本記事では以下について解説していきます。
- HTMLとCSSの違い
- HTMLとCSSの書き方
- HTMLとCSSを使ってWebページを作成する流れ
本記事を参考にそれぞれの言語の特徴を理解し、Webサイト制作にお役立てください。
HTMLとCSSの違い
HTMLとCSSはどちらもWebページを作成するための言語です。しかし、それぞれ役割が異なります。
| 言語 | 役割 |
|---|---|
| HTML | Webサイトの構成 |
| CSS | Webサイトの装飾 |
HTMLはWebサイトの骨組みを構成する言語です。タイトルや見出しなど、文章の構成を示す役割があります。一方CSSの役割はHTMLに装飾を施すことです。文字のサイズや位置を整えることで、ユーザーにとって見やすいWebサイトになります。
それぞれの言語について以下でくわしく解説していきます。
HTMLとは
HTMLとは「Hyper Text Markup Language」の略です。主に見出しや段落など、Webページ上の文章の構成を示す役割があります。また他のWebページに移動するためのリンクも記載可能です。
時代とともにバージョンが更新されており、現時点で最新のバージョンは「HTML Living Standard」です。WHATWGという組織によって策定されたバージョンで、2021年に発表されました。
HTMLの書き方
HTMLはテキストエディタというツールで作成します。テキストエディタはWindowsの「メモ帳」やMacの「テキストエディット」など、コードを書くためのツールです。他にもコードの入力補完やテキストの同時編集など、便利な機能を搭載したさまざまなツールがあります。
HTMLは意味の違うタグを使い分けて、Webページ上の文章に意味を持たせられます。たとえばタイトルを作りたい場合は、titleタグで文章を挟むことでコンピューターにその文章がタイトルであることを伝えられます。
<title>HTMLとは</title>HTMLを記述する際は、htmlタグで全体を囲みその中にheadタグとbodyタグを記述します。headタグはコンピューターに向けた情報を伝えるもので、記述した内容はWebページ内に表示されません。そのため、Webサイトの内容として表示したい見出しや本文、画像などはbodyタグに記述しましょう。その後、以下のように「入れ子構造」でHTMLファイルを作成していきます。
<html>
<head>
<title>HTMLとは</title>
</head>
<body>
<h2>HTMLについて解説していきます</h2>
<div class=”main”>
<img src=”image/sample.com” alt=”サンプル画像”>
<p>HTMLはWebサイトを作るためのマークアップ言語です。</p>
</div>
</body>
</html>HTMLタグの種類
HTMLタグの主な種類は以下のとおりです。
| タグ | 意味 |
|---|---|
| !DOCTYPE html | HTML文書を示す宣言 |
| html | HTMLコード |
| head | Webページの情報 |
| body | Webに表示させる情報 |
| header | Webのヘッダー部分 |
| footer | Webのフッター部分 |
| p | 段落 |
| h1~h6 | 見出し |
| img | 画像 |
| a | ハイパーリンク |
CSSとは
CSSは「Cascading Style Sheets」の略です。文章の位置や色、サイズの変更などWebページの装飾を行う役割があります。また、クリックされた文字の色を変えるなど、軽微な動きを取り入れることも可能です。
現時点で最新のバージョンは「CSS3」です。過去のバージョンと比べて「文字に影をつける」「アニメーション効果をつける」など、機能が増えています。
CSSの仕組み
CSSは「セレクタ」「プロパティ」「値」の3つで構成されています。
セレクタ{
プロパティ:値;
}それぞれの役割は以下のとおりです。
| CSS | 役割 | 例 |
|---|---|---|
| セレクタ | どこにCSSを適用させるかを示す | 見出しや段落 |
| プロパティ | 何にCSSを適用させるかを示す | サイズや色、位置 |
| 値 | どのようにCSSを適用させるかを示す | 大きくする、赤くする、右に移動させる |
HTMLの各要素にスタイルを適用させていくことで、Webページの装飾が可能です。たとえば以下のコードは、「pの部分の」「colorを」「redにする」ことを示します。
p {
color: red;
}CSSの書き方
CSSの書き方は下記の3種類です。Webページでの表示のされ方は同じでも、CSSを書く場所や記入内容が異なります。
- インスタイルシート
- 内部スタイルシート
- 外部スタイルシート
それぞれくわしく解説していきます。
外部スタイルシート
外部スタイルシートとは、HTMLとは別にCSSのファイルを用意して、HTMLのheaderに読み込ませる方法です。
HTMLとCSSを別々のファイルに分けることで、一方だけの修正や編集がしやすいというメリットがあります。
またCSSのファイルを複数作れば、1つのHTMLでさまざまなレイアウトのWebページを作成可能です。そのためPC用とスマホ用など、同じWebページで複数のレイアウトを作りたい場合も外部スタイルシートの使用が適しています。基本的には外部スタイルシートを使用するようにしましょう。
内部スタイルシート
内部スタイルシートは、headタグにCSSを直接書き込む方法です。HTMLファイル内でCSSを含めたすべての情報が確認できるため、規模の小さいWebページの制作に適しています。
しかしHTMLファイルごとにCSSを記述する必要があるため、基本的には外部スタイルシートを使用するようにしましょう。
インラインスタイルシート
インラインスタイルシートは、HTMLタグに直接CSSを書き込む方法です。HTMLのそれぞれのタグに「style=””」を追加して、セレクタ・プロパティ・値を書き込んでいきます。対象の要素に直接書き込めるため、シンプルでわかりやすい方法です。
しかし、HTMLタグ一つ一つにCSSを記述する必要がある上に、他のHTMLファイルに読み込めないため、管理の手間が増えます。基本的には外部スタイルシートを使用しましょう。
CSSセレクタ、プロパティの種類
CSSのセレクタ、プロパティにはさまざまな種類があり、それぞれスタイルの適用範囲が異なります。下記はそれぞれの種類の一部です。
CSSセレクタ
よく使用される3つのCSSセレクタを表にまとめました。
| CSSセレクタ | 書式 | スタイルの適用範囲 |
|---|---|---|
| 要素セレクタ | 要素名 | 指定した要素 |
| idセレクタ | 要素名#id名 | idが付いている要素 |
| classセレクタ | 要素名.class名 | 任意のclassが付いている要素 |
idやclassとは、CSSで装飾を行うためにHTML内に記述する、目印のようなものです。
他にもさまざまなセレクタが存在するため、気になる方は調べてみましょう。
CSSプロパティ
CSSには、以下のようなプロパティが存在します。値と組み合わせることで、文字色や指定領域の幅など、さまざまな対象にレイアウトを施せます。
| CSSプロパティ | スタイルの適用範囲 | 値でできること |
|---|---|---|
| font | フォント関連をまとめて指定 | フォントを変える |
| font-size | フォントのサイズ | サイズを変える |
| color | 文字の色 | 色を変える |
| background-image | 背景画像 | 画像の大きさや位置を変える |
| height | 内容領域の高さ | 高さを変える |
| width | 内容領域の幅 | 幅を変える |
プロパティは上記以外にもたくさんあるため、必要に応じて探してみましょう。
HTMLとCSSを使ってWebページを作成する流れ
HTMLとCSSを使ってWebページを作成する流れは以下のとおりです。
- 全体の構成やデザインを考える
- ファイルを作成する
- HTMLを書いて全体の構成を作る
- CSSを書いて全体のレイアウトを整える
- 正しく適応されているか確認する
はじめに具体的に全体の構成やデザインを考えることで、完成図をイメージして作業がしやすくなるでしょう。レイアウトを図にしたワイヤーフレームや、完成イメージを画像にしたデザインカンプを作成すると、計画的に進行できるでしょう。
デザインが定まったら、HTMLとCSSのファイルを用意し、作成を開始します。修正や編集がしやすいように、HTMLファイルとCSSファイルをそれぞれ作成する外部スタイルシートを用いましょう。
書く順番としては、HTMLで全体の構成を作ってから、CSSでレイアウトを整えます。作業の途中でも、それまでに書いた内容がどのようにWebページに反映されるかをブラウザで確認可能です。逐一確認しながら作業を進めていきましょう。
最後に、HTMLとCSSが正しく反映されているか確認をします。最近はPCやスマホなど、Webページが閲覧されるデバイスはさまざまです。PC以外のデバイスでも正しく表示されているか注意しながら、最終確認をしましょう。
Webサイトを構成するその他の言語
HTMLとCSS以外にもWebサイトを構成する言語は存在します。Web制作によく利用される、以下3つの言語についてそれぞれくわしく解説していきます。
- JavaScript
- PHP
- Ruby
JavaScript
JavaScriptはWebページに動きを加えるための言語です。スクロールに合わせて画像を表示させる、選択肢ごとに表示内容を変えるなど、ユーザーの動きに応じて変化するデザインが作成できます。
JavaScriptを用いれば、より多彩な表現でWebサイトを制作できるようになります。
PHP
PHPは「PHP: Hypertext Preprocessor」の略で、動的なコンテンツを作成するための言語です。
JavaScriptはクライアント側で動作しますが、PHPは主にサーバー側で動作します。PHPを使えば、HTMLを効率的に書けるようになるため、Web制作によく利用されるプログラミング言語です。人気が高いCMSであるWordPressも、PHPで作成されています。
Ruby
RubyはPHPと同じくサーバー側で使用される言語です。動的なコンテンツの作成に適しており、Web開発、スマホアプリ開発、スクレイピングなどさまざまな開発に利用されています。
日本で開発されたため、日本語の関連情報が豊富です。またRuby on Railsというフレームワークによって、短期間で開発できるという特徴があります。
HTMLとCSSの違いを理解してWebサイトを制作してみよう
HTMLはWebサイトの構成、CSSはWebサイトの装飾ができる言語です。HTMLで作った骨組みをCSSで装飾することで、Webサイトにデザインを施せます。
またJavaScriptやPHPなど他の言語と組み合わせれば、動的な表現を取り入れられるため、より自由なWebサイト制作が可能です。
Webサイトは集客や採用など、さまざまな目的で作られます。HTMLやCSSを使いこなして、目的に沿ったWebサイトを制作できるようになりましょう。
Share
