HTML?CSS?ホームページ制作に欠かせない言語の基礎

タブレットと男性

更新日:2017年09月26日 | 公開日:2017年05月05日

ホームページを制作しようと考えたとき、専門知識がない人でも「HTML」や「CSS」といった言葉を耳や目にしたことがあるでしょう。
それもそのはず、この2つはホームページを構成するために必要不可欠な「プログラミング言語」と呼ばれるものなのです。

では、実際に「HTML」や「CSS」がホームページにおいてどんな役割を果たしているのかは知っていますか?
プログラミング言語がどういうもので、どういう働きをするのかが分かれば、楽しみながらホームページを作ることができますよ!

この記事ではホームページを制作する際に押さえておきたい4つのプログラミング言語「HTML」「CSS」「JavaScript」「PHP」を紹介するとともに、ホームページを構成する際の土台となるHTMLとCSSの基本的な記述と表示する場合の手順についても説明します。

1. 知っておきたいプログラム言語とは何か

コーヒーとキーボード

HTML

HTMLとは「ハイパーテキスト・マークアップ・ランゲージ」の略で、ホームページを構成するために使われるプログラム言語です。
「ハイパーテキスト」はハイパーリンクを使って複数の文章を関連付けて結び付ける仕組みを意味するもので、「マークアップ・ランゲージ」は段落ごとの文章構造や文字の装飾などを指定し、テキストに記述する言語のことを言います。

なお、「マークアップ」を記述するための文字列をタグといい、符号(半角の<>)で囲むことでさまざまな要素を指定することができます。

CSS

CSSとは「カスケーディング・スタイル・シート」の略で、ホームページのレイアウトや装飾、見栄えを指定するために使用する言語です。
HTMLは見出しの色をすべて青色から赤色に変えるには1ヶ所ずつ変更しなければならないのに対し、CSSはファイルを書き換えるだけですべて変更することができます。

JavaScript

Webブラウザなどに実装され、使われるスクリプト言語(簡易的なプログラミング言語)です。
HTMLのなかに埋め込むことで、ホームページにさまざまな動きや応答性を加えることができます。
もともとWebページは印刷物のような表示しかできませんでしたが、JavaScriptの登場で動的な表現が可能になりました。

PHP

PHPとは「PHP:Hypertext Preprocessor」が正式名称で、「PHP」自体は「Personal Home Page」を略したものです。
HTMLに埋め込むことで動的なWebページが作成できるスクリプト言語にあたります。
PHPを使うことで、掲示板やアクセスカウンタなどを設置することができます。


ほかにも「Perl」「Java」「Ruby」など、さまざまなプログラミング言語がありますが、ホームページを制作するうえで必須なのは「HTML」と「CSS」です。
この2つに「JavaScript」と「PHP」を組み込むことで、標準的な機能を備えたホームページを作成することができます。

次の項目ではプログラミング言語を使ってホームページを制作する際に必要なツールの紹介に続き、HTMLとCSSの記述の仕方と表示する手順についても説明します。

2. HTMLとCSSでホームページを作成し表示する手順とは

スマホと眼鏡

≪手順1≫ 表示に必要な2つのツール用意する

ホームページを制作するときに最低限必要なツールは「テキストエディタ」と「ブラウザ」です。

「テキストエディタ」とはテキストを編集するソフトのことで、Windowsの「メモ帳」やMacの「Simple Text」もこれに該当します。
無料で使えるテキストエディタも多く、なかにはコードを分かりやすく色分けしてくれる機能などを搭載しているものもあります。
このソフトにプログラミング言語を記述してホームページを作って行くため、自分にとって使い勝手のいいテキストエディタを選ぶことをおすすめします。

そしてブラウザは作成したページを確認するために必要になります。
HTMLのソースやCSSのコードをチェック・編集できる開発ツールを搭載しているブラウザもあるので、活用してみるといいでしょう。

≪手順2≫ HTMLファイルを作成する

テキストエディタの用意ができたら、早速起動してHTMLファイルを作成します。
見出しや段落、箇条書きなどで構成されたテキストをホームページに表示させるには、「タグ」を使って記述する必要があります。
タグの記述方法としては、「<開始タグ>〇〇</終了タグ>」という形でテキストや要素を囲むのが基本です。

タグの例としては以下のようなものがあります。

タグの一例
  • <h1>…ページ内の大見出し
  • <h2>…ページ内の中見出し
  • <h3>…ページ内の小見出し
  • <p>…段落
  • <br>…改行

タグを記述することでテキストの一部を色付けしたり、文字の大きさを変えたりすることも可能です。
HTMLファイルの作成とは「テキストに情報付けをしていく作業」と言えば分かりやすいでしょう。

≪手順3≫ CSSでスタイルを指定する

HTMLファイルの情報に沿って、ホームページのデザインをさまざまな形で指定するのがCSSの役割です。
CSSでは「セレクタ」「プロパティ」「値」という3つの要素で、「どのHTMLタグに対して、どのようなデザインを(プロパティ)、どの程度施すのか(値)」を指定します。

たとえばページ内の大見出しの文字サイズを16ピクセルにしたい場合の記述は、「h1{font-size:16px;}」という形になります。
CSSでよく使われるプロパティとしては、以下のようなものがあります。

CSSのプロパティ一例
  • 「color」…文字色の指定
  • 「font-family」…フォントの種類を指定
  • 「background」…背景の指定
  • 「line-height」…行の高さを指定
  • 「width」…幅を指定

なお、プロパティは複数の指定が可能で、文字の大きさと色を一緒に変更したい場合には「h1{font-size:16px,color:red;}」という形で、値の後にコンマを打って記述します。
このようにひとつのセレクタに複数のプロパティを記述することで、細かいデザインを施すことができます。

HTMLファイルに直接CSSを記述する方法もありますが、テキスト構造が崩れてしまう可能性があるため、CSSファイルを別に作成することをおすすめします。

≪手順4≫ 関連付けたファイルをブラウザに表示する

HTMLファイルとCSSファイルを関連付けたら、ブラウザで表示の確認をします。
世の中には「Microsoft Edge」「Internet Explorer」「Google Chrome」「Firefox」などいろいろな種類のブラウザがありますが、ブラウザごとにそれぞれ各要素に対するCSSがデフォルトで指定されています。

そのため、ブラウザによっては「こんなフォント選んでないのにー!」「行間がおかしくなってるー!」と、ホームページの表示が異なるケースがあります。


どのブラウザでもあなたが意図する形でホームページを表示させたい場合には、ブラウザのCSSをリセットするタグ(reset.CSS)を記述する方法を選択します。
ただし、reset.CSSを使用するとデフォルトの値がゼロになり、改めてすべての設定を行わなければなりません。

そうなるとCSSの記述が通常よりも増えてしまうため、「ここだけはこう見せたい!」という要素だけをリセットしデフォルトのCSSを残す「Normalize.CSS」の採用も検討してみるといいでしょう。

【まとめ】作業の効率化を図るならCMSを選ぶのもアリ

パソコンを操作しながら微笑む女性

ホームページを構成する「HTML」とレイアウトを設定する「CSS」という2つのプログラミング言語があれば、とりあえずホームページを作ることができます。
そこに「1. 知っておきたいプログラム言語とは何か」で取り上げた「JavaScript」や「PHP」などのスクリプト言語を組み込めば、動きのある立派なホームページの完成です。

もちろん、その前段階として、ホームページを作る目的や狙うターゲット層などを明確にした設計書を作成する必要があります。
いきなりHTMLやCSSを書き出しても「あれ? どういう構造のホームページにするんだっけ?」と制作途中で迷いが生じてしまうので、設計書のほかにホームページの構成(サイトマップ)やページのレイアウトなども考えておくと安心です。

HTMLやCSSの指定方法についてはネット上で検索すればすぐに情報が得られますし、費用をかけずにホームページを作るには最適な方法だと言えるでしょう。
しかし、ホームページを編集・更新したい場合には該当するファイルをテキストエディタで開いて、改めてプログラミング言語を記述する必要があります。

ホームページを運営しているうちに「毎回個別に指定するのも面倒くさいな…」と嫌気がさして、いつの間にか放置してしまう…なんて可能性もないとは言い切れません。

そうした面倒な作業を簡単にしてくれるのが、「WordPress」などのCMSを使ってホームページを作る方法です。
CMSはHTMLやCSSの記述がなくても簡単にホームページを制作できるだけでなく、管理画面から直接編集や更新が行えます。
そしてHTMLやCSSを使うことによって自由にカスタマイズできるCMSであれば、さらにオリジナル性の高いホームページが作れます。

「イチから作るのはさすがに大変だから、ベースは業者に任せたうえでノウハウを蓄積してみたい」「制作にかかるコストは抑えたいけど、自社で全部は作れそうにない…」といったことを考えているであれば、ぜひ日本最大級の業者比較サイト「アイミツ」までご相談ください。
「アイミツ」ではあなたの会社のご希望やご要望に応じて、最も適したホームページ制作業者を無料でご紹介させていただきます。

いま知りたいこと
コンシェルジュが解決します!

コンシェルジュサービスは
3万社以上が利用している無料の相談サービスです。

コンシェルジュ

発注は時間も手間もかかりますよね?

コンシェルジュが解決します!

コンシェルジュに相談、あなたにあった業者を提案、発注の手間を削減!

完全無料

まずはお気軽にご相談ください