最速5分見積
もり

ブログ

  1. トップ
  2. ブログ
  3. 今さら聞けない！HTML、CSS、PHP、JavaScriptの違いと使い分け方

Web制作

今さら聞けない！HTML、CSS、PHP、JavaScriptの違いと使い分け方

ホームページを制作する上で必要となるプログラミング言語は、HTML、CSS、PHP、JavaScriptなどが挙げられます。
これらのプログラミング言語は、それぞれ役割や機能を持っています。

「今からプログラミングを始めたいけど、どの言語から勉強すればいいの？」このような悩みを持つ方も少なくないと思います。
そのような悩みを解決するために本記事では、HTML、CSS、PHP、JavaScriptの違いや使い分け方を現役エンジニアの視点から説明します。

未経験の方やプログラミング学習を始めたばかりの方は、言語の違いや特徴を理解することで、学習効率が格段にアップするので、この機会に覚えておきましょう。

HTMLとは

HTMLはWebサイトを制作する上で必ず必要になります。
この言語は土台の役割を果たしており、家で例えると骨組みに相当します。

具体的には文字、画像の表示や文章を構成するための言語です。
HTMLはほぼ全てのWebサイトで使用されており、ソースを確認することも可能です。

HTMLのソースコードを確認したいWebサイトを表示させ、右クリックすると、「ページのソースを表示」というメニューが表示され、選択することで新たなブラウザが開かれ、HTMLのソースコードを確認できます。

CSSとは

CSSは、文字の大きさや色、配置を変更や背景を設定する言語になり、Webサイトを美しく、装飾することができます。
ただ、HTMLで骨格だけ整えても見た目がよくなければ、ユーザーのアクセスは見込めません。

最近では、スマホでWebサイトを閲覧する機会が増えているので、スマホで見たときの見やすさを重視したレイアウトが主流です。
CSSはデザインを設定できる言語と覚えておきましょう。

JavaScriptとは

JavaScriptを簡単に説明すると、動きのあるデザインを実装することができます。
画像がスライド式で入れ替わる機能や一定時間で背景が変わるなどの機能を実装できるのが特徴です。

その他にも、フォームに適切な文字列が入力されているかチェックすることもできます。
デザインだけでなく、機能性も兼ね備えている言語になり、多くのWebサイトで使用されています。

サーバーと通信する必要がないので、送受信にかかる時間を省くことができるところがメリットです。
オシャレでクールなWebサイトを制作するためには、JavaScriptが必要不可欠です。

JavaScriptのメリット

JavaScriptのメリットを紹介します。

使用できる機会が多い

PHP、Ruby、Pythonなど様々なプログラミング言語と併用して、JavaScriptを使用することができます。
JavaScriptを使用しないと実装できない機能もあるため、本格的なWebサイトを制作したい方には、習得必須の言語です。

サーバーへの負担がない

JavaScriptはユーザーのブラウザ上で動作するため、サーバーに負荷がかからないのが大きな特徴です。
大量の同時アクセス状態でも、正常に動作します。

JavaScriptのデメリット

JavaScriptのデメリットを説明します。

正常に動作しない場合がある

ユーザーが使用するブラウザによっては、JavaScriptが正常に動作しない可能性があります。
JavaScriptを使用する際は、様々なブラウザで正常に動作できているのか確認することが必須です。

PHPとは

PHPはJavaScriptと同じで、Webサイトに動的な機能を実装できます。
動的な機能をシンプルに説明すると、アクセスした時間帯によってWEBサイトの表示を変えること可能です。

例えば、朝の時間帯にアクセスしたユーザーには、「おはよう」と表示させ、昼の時間帯にアクセスしたユーザーには、「こんにちは」、夜の時間帯にアクセスしたユーザーには、「こんばんは」と表示する内容を変えることができます。
動的な機能を実装できる点においてはJavaScriptとPHPは同じですが、この2つの言語には大きな違いがあります。

JavaScriptはクライアントサイド言語とよばれており、ユーザー側のブラウザで処理がおこなわれます。
それに対して、PHPはサーバーサイド言語であり、処理はWebサーバーでおこなわれるのが大きな違いです。

サーバーサイド言語であるPHPは、MySQLやPostgreSQLなどのデータベースと連携することができるため、JavaScriptとは違った機能を実装することができます。
PHPを使用することで、掲示板、ECサイト、お問い合わせフォームなどを制作できるので、多くのWebサイトで使用されています。

グログや企業のホームページにも採用される、WordPressもPHPを使用しているアプリケーションです。
WordPressはデータベースと連携しているため、記事を投稿する度に、PHPがHTMLを自動的に作成して、Webサイトに表示してくれます。

PHPが使われるWebサイト

PHPを採用している、もしくは採用されていたWebサイトを紹介します。

Yahoo

現在もPHPを使用している有名なWebサイトは、Yahooです。
約10年前までは日本製の検索サイトとして、とても人気のあるWebサイトでした。

Facebook

世界で最も多くのユーザーを抱えるFacebookもPHPを使用して開発されました。
今はFacebookが独自に開発した言語、Hackに移行していますが、Facebookが採用していた言語としてより多くの方に知られました。

Wikipedia

インターネットの黎明期から存在しているWikipediaもPHPを用いて開発されました。
現在はHackの導入を進めている状態です。

ニコニコ動画

動画配信サービスとして会員数200万人以上を誇るWebサイトが、ニコニコ動画です。
動画に関する部分はC++を使用していますが、その他はPHPを使用しています。

PHPのメリット

PHPのメリットについて紹介します。

プログラミング未経験者も学びやすい

PHPが自由度が高いため、覚える必要のあるルールや制限が少ないため、初心者も簡単にコードが書くことができ、プログラムを動かすことができます。
すぐにコードを書くことができ、実際にプログラムを動かせることは、学習者のモチベーションを向上させることに繋がります。

学習を始めてすぐに達成感を味わうことができるため、未経験者も挫折することなく、学び続けることができます。
学習する言語の選択に悩んでいる方には、PHPがオススメです。

環境設定が簡単

初心者がプログラミングを始めるにあたって、一番最初の関門になるのが環境開発の設定です。
環境開発を整えるのは、プログラミング学習者の方でも難しく、半日以上の時間を費やすことも珍しくありません。

そのため、環境開発で戸惑い、そのまま挫折する方もたくさんいます。
PHPは他のサーバーサイド言語と比べ、比較的簡単に環境開発を設定することができます。

動作環境に時間がかからない点は、プログラミング学習だけに集中することができため、学習者にとっては大きなメリットです。
PHPは初心者にとって敷居の低い言語になり、プログラミングを学び始めるにあたって最適です。

Webサイトを制作するのに特化している

PHPはWebサイト制作することを目的にして開発された言語になります。
Webサイトを制作するための機能やツールが数多く提供されているのが利点です。

先ほど説明したWordPressもより簡単にWebサイトを制作するために、開発されたツールになります。
「CakePHP」、「Zend Framework」、「Symfony」、「Laravel」、「CodeIgniter」などWebサイト制作の時間を大幅に短縮できるフレームワークもたくさんの種類があります。

手軽に、スピーディーにWebサイトを作れるのが、PHPの特徴です。

情報量が多い

PHPは歴史も長く、利用者が多いため、たくさんの情報が発信されています。
インターネットでも簡単に情報を集めることができ、書籍なども数多く出版されているので、情報を入手することに困らないのがメリットです。

プログラミング未経験者の方は、わからないことや問題に直面したときに、解決策を調べる必要があります。
なので、情報が簡単に手に入ることもプログラミング言語を選ぶときの重要な要素です。

求人が多い

PHPを採用している企業が多いので、必然的に求人も多くなります。
趣味でプログラミングを始め、いつの間にかエンジニアとして会社に採用された例も少なくありません。

クラウドソーシングを利用して、PHPでWebサイトを制作して、副業している方もいます。
学びやすく、使用できる機会が多いため、費用対効果の高いことが多くの方に選ばれる理由です。

PHPのデメリット

反対にPHPのデメリットについて説明します。

Webサイトだけに限られる

PHPのデメリットは、Webサイトでしか使用できないところです。
AndroidアプリやiOSアプリをPHPで作ることはできません。

Webサイト制作に特化しており、簡単に作ることができる反面、その他のことができないところがデメリットです。

セキュリティが弱い

PHPは他の言語に比べ、セキュリティが弱いところが一番のデメリットです。
バージョンアップされる度に、セキュリティは向上していますが、セキュリティの面で脆弱な部分があることが報告されています。

HTML、CSS、PHP、JavaScriptそれぞれの違い

プログラミング

静的なWebサイトを制作するのに必要になるのがHTMLとCSSです。
HTMLでWebサイトの土台を作り、CSSで作られたWebサイトを美しく装飾することができます。

JavaScriptやPHPを使用すれば動的な機能を実装することができます。
HTMLとCSSだけでWebサイトを制作することも可能ですが、JavaScriptやPHPだけでWebサイト制作するのは不可能です。

しかし、JavaScriptやPHPを使わなければ、動きのあるページやコンタクトフォームなどを実装することはできません。
HTMLとCSSの2つをマスターするだけで、プログラミング未経験者の方もWebサイトを制作することができます。

高度な機能や動きのあるおしゃれなWebサイトを制作するためには、JavaScriptやPHPが必要です。
このような違いがあることを覚えておきましょう。

HTMLとPHPとの使い分け方

HTMLとPHPの使い分けの代表的な例として「外部ファイル化」が挙げられます。
外部ファイル化とはグローバルメニュー、サイドバー、フッターなど各ページで共通して表示する部分を外部ファイルに移行することで、
1つのファイルを全てのページで使いまわすことができます。

外部ファイル化にするメリット

共通部分を外部ファイル化にするメリットは2つあります。

・コードが見やすくなる
・修正が楽になる

共通部分を外部ファイル化することで、コード全体が見やすくなるだけではなく、コード書く量を減らすことができるので、時間短縮にもなります。
コードを修正する必要がある場合、外部ファイルだけを修正するだけで済むので、労力を削減できのがメリットです。

外部ファイル化する方法

実際に、PHPを使用して、HTMLの一部を外部ファイル化します。
外部ファイル化はこのような手順です。

STEP1.共通部分を見つけ出す
STEP2.共通部分を切り取りPHPファイルに保存する
STEP3.関数を使い、外部ファイルを読み込む

STEP1.共通部分を見つけ出す

以下のHTMLコードの、「」から「」までを外部ファイル化します。
（ここではグローバルメニューを外部ファイル化します。）

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div id="wrapper">
  <div id="header">
  <h1>このサイトは外部ファイル化するためのWebサイトです。</h1>
  </div>
<!--外部ファル化の開始点-->
  <div id="gnavi">
<ul>
  <li><a href="/index.html">トップページ</a></li>
  <li><a href="/profile.html">プロフィール</a></li>
  <li><a href="/about.html">当サイトについて</a></li>
  <li><a href="/links.html">リンク集</a></li>
  <li><a href="/contact.html">お問い合わせ</a></li>
</ul>
  </div>
<!--外部ファイル化の終了点-->
  <div id="main-content">
  <p>
     ここはメイン部分です
</p>

  </div>
  <div id="footer">
  <p>ここはフッター部分です。</p>
  </div>
  </div>
</body>
</html>

STEP2.共通部分を切り取りPHPファイルに保存する

「外部ファル化の開始点」から「外部ファイル化の終了点」までを切り取り、拡張子を「.php」にして保存します。

gnavi.php

<!--外部ファル化の開始点-->
  <div id="gnavi">
<ul>
  <li><a href="/index.html">トップページ</a></li>
  <li><a href="/profile.html">プロフィール</a></li>
  <li><a href="/about.html">当サイトについて</a></li>
  <li><a href="/links.html">リンク集</a></li>
  <li><a href="/contact.html">お問い合わせ</a></li>
</ul>
  </div>
<!--外部ファイル化の終了点-->

STEP3.関数を使い、外部ファイルを読み込む

include関数を使用して、外部ファイルを読み込みます。

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div id="wrapper">
  <div id="header">
  <h1>このサイトは外部ファイル化するためのWebサイトです。</h1>
  </div>
<?php include('./gnavi.php'); ?>
  <div id="main-content">
  <p>
  ここはメイン部分です
</p>

  </div>
  <div id="footer">
  <p>フッターの部分です。</p>
  </div>
  </div>
</body>
</html>

このような手順で共通部分を外部ファイル化することができます。
これはグローバルメニューに限らず、サイドバーやフッターなど共通部分であれば使用可能です。

HTML、CSS、PHPの使用例

実際に、HTML、CSS、PHPこの3つの言語を使用して、簡単なフォームを作成します。

HTMLで土台を作る

まずは、HTMLで基本構造を作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
<form id=”form1″ name=”form1″ method=”post” action=”sample.php“>
  <h2>あなたの性別を教えてください</h2>
  <br />
  <input type="radio" name="gender" value="男">男 <br />
  <input type="radio" name="gender" value="女">女 <br />
  <input type="submit" value="送信">
</form>
</body>
</html>

ここまでのコードで、このような表示になります。

プログラミング

CSSで装飾する

次はCSSを使って、綺麗に装飾します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
  h2{
  background-color:#000000;
  color:#FFF;
  padding:10px 0px 10px 10px;
  }
  input{
  font-size: 20px;
  background-color:#000000;
  border-style: none;
  color:#FFF;
  padding:10px 20px;
  margin: 20px 20px;
  }
  </style>
</head>
<body>
<form id=”form1″ name=”form1″ method=”post” action=”sample.php“>
  <h2>あなたの性別を教えてください</h2>
  <br />
  <input type="radio" name="gender" value="男">男 <br />
  <input type="radio" name="gender" value="女">女 <br />
  <input type="submit" value="送信">
</form>
</body>
</html>

CSSを加えると、このような表示になります。

プログラミング

PHPで処理を実行する

最後はPHPを使って処理を実行します。

sample.php

<?php
if(isset($_POST[“gender“]) && ($_POST[“gender“]==”男” || $_POST[“gender“]==”女”)){
 print “あなたの性別は”;
 print $_POST[“gender“];
}else{
 print “性別が選択されていません。”;
}
?>

「男」を選択して、送信ボタンを押すと、このような結果になります。

プログラミング

説明をわかりやすくするために、今回はJavaScriptの使用は省きました。
この例文を見れば、HTML、CSS、PHPの違いが理解していただけたと思います。

人間の目で確認できる表面的な部分を構成しているのがHTMLとCSSになり、人間の目で確認できない、裏側で動作しているのがPHPになります。

PHPの基本構文

今度はPHPの基本的な記述について説明します。

拡張子は「.php」を使用する

PHPの処理を実行するためには使用するファイルの拡張子を「.php」にする必要があります。
拡張子を「.php」にすることで、サーバーがPHPのファイルとして認識することができ、処理を実行します。

開始タグと終了タグを記述する

PHPのコードを正しく、動作させるためには、「開始タグ」と「終了タグ」の間に記述します。
開始タグは「」です。

<?php
  //ここにPHPのコードを記述します。
  echo '<p>Hello World</p>';
?>

コードの最後には、セミコロン「;」を記述します。
セミコロンの記述がないと、正しく動作しなくなるので、必ず記述するようにしましょう。

コードの間を区切る

コードの間を区切ることが、PHPの記述ルールになります。
「半角スペース」、「タブ」、「改行」で区切るようにしましょう。

以下の2つのコードは、区切る方法が違いますが、「Hello, World!」という同じ結果を出力します。

<?php

 echo "Hello, World!";
?>

<?php
 echo
 "Hello,
 World!"; ?>

コードを見やすくするために区切る方法は、「半角スペース」、「タブ」、「改行」いづれかで統一することがオススメです。

コメントの記述

コメントとは、コード内にメモ書くことです。
コードの内容や記述した意図をメモすることで、コードを見返す作業が楽になり、チームでプログラミングする場合は、コメントを記述する機会が多くなるので、必ず覚えましょう。

コメントする方法は以下の3種類になります。

・「//」を文頭に記述する
・「#」を文頭に記述する
・「/*〜*/」〜の部分にコメントしたい内容を記述する

以下のようにコメントを記述します。

<?php
// これはコメントです
# これはコメントです
/*
　これはコメントです。
*/
?>

複数行にわたってコメントを記述する場合は、「/*〜*/」を使用することが一般的です。
コメント部分の記述は出力されません。

PHPの文法

PHPを使用する上で文法を理解する必要があります。
ここでは、汎用性が高く、基本的な文法を紹介するので、この機会にPHPを習得したいという方は参考にしてください。

変数

変数を説明する前に知っておくべきことは、「=」（イコール）の意味です。
小学校で習ったイコールは「左辺と右辺が等しい」という意味でしたが、プログラミングで使用するイコールは「左辺に右辺を代入する」という意味です。

<?php
  $num = 5;
  $NUM = 10;
  $string = 'これは文字です';
  print ($num);
  print ($NUM);
  print ($string);
?>

上記のコードを整理するとこのようになります。

・「$num」には「5」が代入されている
・「$NUM」には「10」が代入されている
・「$string」には「これは文字です」が代入されている

変数を記述するときのルールは以下のようになります。

・「$」（ドル記号）を先頭に記述する
・変数名の先頭に数字は使用しない
・使用できる文字の種類はa～z、A～Z、0～9、「_」(アンダースコア)

演算子

演算子とは、計算をおこなうことです。

<?php
  echo 5 + 5;
  echo 4 - 3;
  echo 5 * 4;
  echo 12 / 4;
?>

配列

配列とは、1つの変数に同じデータ型である複数の値を代入することを指します。
array()の中に入れたい複数の値を記述します。

<?php
  $week = array('Monday', 'Tuesday', 'Wednesday','Thursday','Friday','Saturday','Sunday');

  echo $week[0]; // Monday
  echo $week[1]; // Tuesday
  echo $week[2]; // Wednesday
  echo $week[3]; // Thursday
  echo $week[4]; // Friday
  echo $week[5]; // Saturday
  echo $week[6]; // Sunday
?>

プログラミングは「0」から始まるということに注意してください。

まとめ

本記事では、HTML、CSS、Javascript、PHPの違いとPHPの基本的な部分を紹介しましたが、いかがでしたか。
プログラミングを効率良く習得するためには、プログラミングの概要から理解することが必要です。