-
HTML/CSS
- css
- html
- php
HTML、CSS、PHPの基本、違い、学習方法を徹底解説
Web制作における必須言語と言えばHTML、CSSです。Webページを生成するためにはHTML、CSSが必要だからです。HTML、CSSはフロントエンドであり、ユーザーに近い領域の操作をする事ができます。
一方で、データベースの操作などのサーバーサイドの操作は他のプログラミング言語を使わないといけません。特にWeb制作で使われているのが、WordPressでも使用されているPHPです。本記事では、HTML、CSS、PHPについて解説し、違いや学習方法を解説します。
HTML、CSS、PHPとは
HTMLとは
HTMLは「Hyper Text Markup language 」の略で、Webページの作成するために作られた言語です。ハイパーリンクを埋めることができるテキストをハイパーテキストと言います。マークアップは目印という意味があります。
HTMLにおける、マークアップは「見出し」「段落」「表」「リスト」など、テキストに役割を与えることになります。テキストに役割を与えることで、レイアウトが整い、見やすくなります。
ファイルの拡張子に.htmlをつけて、HTML形式にすることで、ブラウザ上で動かすことができます。
HTMLは厳密にはプログラミング言語ではなく、マークアップ言語です。
CSSとは
CSSは「Cascading style sheet」の略で、HTMLで作成したWebページの見た目を整えるための言語です。例えば、見出しのH1の文字色やサイズを変えたり、表の表示位置を変えたりすることができます。
HTMLである程度のスタイル操作はできますが、HTMLを文書構造、CSSをスタイルと切り分ける方がいいという考えが主流であり、CSSが頻繁に使われています。
CSSの記述方法は2種類です。
- HTMLファイル内の<head>内に<style>を作り、その中に記述する。
- 外部ファイルにCSSファイルを作り、HTMLファイル内で読み込む
どちらでも違いはないので、記述方法は好みになります。ただし、CSSが長くなる場合は外部ファイルにしたほうが、コードの見た目もスッキリします。
ちなみに、CSSはプログラミング言語にもマークアップ言語にも分類されず、スタイルシート言語と呼ばれます。
PHPとは
PHPは動的にWebページを作るためのプログラミング言語です。サーバーサイドを操作することができ、MySQLなどのデータベースとの連携がしやすい、初心者でも分かりやすいなどの理由から人気のプログラミング言語です。
PHPを必須とする転職市場も広く、HTML、CSS、JavaScriptが終わった後に習得するべき言語として、よく挙げられます。また、WordPressにもPHPが使用されていることから、需要は非常に高いです。
Webアプリケーション開発にも使われます。近年ではRubyの需要が高まっておりますが、PHPを使用したWeb開発も非常に多く、PHPの技術を必要とする案件は多いです。
PHPはHTMLファイルの中に埋め込むことができるので、とても便利です。PHPのコードを書いたら拡張子を.phpにします。初心者にとってHTMLとPHPの違いが分かりにくいので、次に違いを解説します。
HTMLとPHPの違い
HTMLは静的なページのみ
HTMLは静的なページしか作ることができません。いつ見ても同じページになります。ログインして個人の専用ページを作ったり、アクセスしたタイミングで表示するページを変えるといったことはできません。
共通ページや、更新作業の少ない企業サイトにはHTMLで作成されたWeb制作をする事があります。
PHPはDBなどサーバーを操作できる
PHPはデータベース（DB）と連携することで様々な画面を表示することができます。ショッピングページでカートに入れた商品や個数の確認画面にも使われます。ログイン機能もPHPが利用できます。
これらのコードをHTML形式で書かれたコードの中に埋め込むことで利用できます。PHPのコードを見るとHTML形式のコードがあるため、戸惑いやすくなります。しかし、中には<?php コード ?>というコードがあります。コードはPHPの処理を表しています。
また、PHPはブラウザ上だけでは動かず、サーバーを用意しなければなりません。開発段階では仮想開発環境を用意しますが、初心者の方は、PHPの環境構築でつまずくことが多いです。
HTMLとPHPのメリットとデメリット
HTMLのメリット、デメリット
HTMLのメリットはテキストエディタがあればすぐに始めることができる点です。パソコンを持っていれば、ブラウザが入っていないことはほとんどありません。そのため、すぐに開発することができます。
初心者にも分かりやすいため、勉強すればすぐに簡単なWebページを作れます。自分の成果を出しやすく、挫折率も低いです。
デメリットは、データベースに接続することができないので、データを利用する場合は都度、ページを作成、更新していく必要があります。
PHPのメリット、デメリット
PHPのメリットはデータベースの接続が容易である点です。そのため、データベースを利用したページの生成がとても簡単です。例えば、ログインによるマイページの生成です。
プログラミング言語の中では比較的簡単なため、学習もしやすいです。Laravelというweb制作のためのフレームワークもあり、Webページの作成もやりやすいです。また、PHPを必須とする企業が多いため、エンジニア転職にも有利です。
デメリットは環境構築が必要なことです。特にローカル環境でやる場合、PATHを通すなどのPCの基礎知識が必要になってくるため、初心者にはハードルが高いです。環境構築で挫折するという話はよく聞きます。
しかし、同じような悩みを持った人が多いため、Google検索すればいろんな人が質問、回答しているため、ゆっくりやればできるようになります。
HTML、CSS、PHP学習方法
全ての言語を学べるオンライン学習サイト「Progate」
HTML、CSS、PHPの勉強をするには「Progate」がおすすめです。ブラウザ内でコードを書きながら勉強するので、難しい環境構築いりません。登録すればすぐに学習できます。また、HTML、CSS、PHPを網羅しているので、一気に学習できます。
一部は無料ですが、しっかり学習するには有料プランに登録することをおすすめします。月額1080円なので、書籍一冊買うよりも安いです。一か月あれば、全部学ぶことができます。
学習の順番はHTML/CSS⇒PHPを勉強しましょう。間にJavaScriptを入れればもっと理解が深まります。
Progateは基礎を学べるのですが、実践やより深い知識となるとProgateだけでは不足です。Progateである程度理解出来たら、他のオンラインサービスである「ドットインストール」や「Udemy」を使用することもおすすめです。
また、本を使った学習もおすすめです。
本を使って勉強する
本を使った勉強はオンラインサービスである程度基礎を理解した後で行うことをおすすめします。特に独学でやる場合は、言語を広く浅く知った後の方が良いと思います。なぜならば、本は200ページに文章をきっちり書いてある分、深く解説しています。
その分、難しい部分が多いために、理解に時間がかかります。結果、前のページの基礎を忘れてしまって中々進みません。なので、オンラインサービスで全体像を学びましょう。もし、本だけでやるならば、理解できなくても一気に最後までいくことをおすすめします。
初心者の方におすすめの本を下に挙げるので、参考にしてみてください。
HTML＆CSS
PHP
プログラミングスクールで学ぶ
転職やフリーランスに向けていち早くスキルを身に着けたいのであればプログラミングスクールがおすすめです。HTML、CSS、PHPであればWeb制作コースを使えば網羅的に深く学ぶことができるでしょう。
値段は本やオンラインサービスに比べたら高額になります。10万以上かかりますが、その分講師の人からわからない部分をすぐに教えてもらえるので学習効率が上がります。しかし、聞けば答えてくれるので、調べる力が身につかないというデメリットがあるということも念頭においておきましょう。
まとめ
HTMLとCSS、PHPの基本から違い、学習方法まで解説しましたが、いかがでしたか。HTML、CSS、PHPはそれぞれ別物ですが、Webサイト上では密接に関係しています。別々に学ぶのではなく一気に学ぶことでより効率的にスキルを習得できます。
特に、サーバーサイドを利用した技術はWebサービスでは当たり前になりつつあります。フロントエンドエンジニアを目指している人も、一度はProgateを用いて勉強することをおすすめします。
