アトリエコハク

アトリエコハク

兵庫県但馬のホームページ制作アトリエ

>
>
  • 学び

WEB制作入門。HTML,CSS,Javascript,PHPの役割

スポンサーリンク

HTML,CSS,Javascript,Jquery,PHP。。。
聞いたことあるけど何のことか分からない。
そんなウェブ制作の勉強を始めたばかりの人にむけて、HTML,CSS,Javascript,Jquery,PHPはウェブサイトでどんな役割をになっているのかざっくり解説してみたいと思います。

HTML


まずHTMLで文章や画像を置いていきます。
ウェブページを勉強机に例えると、鉛筆やノート、消しゴムなどのパーツを左上から順番に規則正しく並べている感覚です。
これがHTMLの役目。
最近ではウェブサイトの構造化という重要視されていたりするので、ただ単に置いているだけではなく「これがページのタイトルですよ」とか「ここがグローバルナビゲーションですよ」といった感じでパーツに説明を加えながら配置していきます。
文章を左に寄せたり画像を右に寄せたり、レイアウトしていくのはCSSの役目。

CSS


HTMLで記述した文章や画像をCSSでレイアウトしていきます。
先ほどのように机に例えると、勉強机に単調に並べたパーツを鉛筆は左上に、消しゴムはその右側。ノートは真ん中辺り。と言った感じにレイアウトしてきます。これがCSSの役割。
CSS3を使うと次の項目で話すJavascriptの様なアニメーションをつけることもできます。

Javascript


お次はJavascript。ウェブサイトでよく見かけるシュッと動く画像スライダーや、「トップに戻る」ボタンでグイ~ンとサイトが勝手にスクロールしたりする機能を実現するためにJavascriptというプログラミング言語を使います。
Javascriptを使うことでよりダイナミックで動きのあるウェブサイトを作ることが可能になる。
ただし、むやみやたらに使うとページの動作が遅くなったり、ユーザーにとって使いにくいサイトになったりするので注意。

Jquery


Jqueryは簡単に言うとJavascriptをカスタマイズして使いやすくしたもの。
Javascriptでは複雑なコードを書いかないと実現できなかった機能を、Jqueryならほんの数行のコードで実現できたりする。
便利すぎてまじヤバイ。

PHP


PHPはウェブサイトを構築する上で縁の下の力持ち的な役割。
例えばウェブサイトのフッターにあるコピーライトの表記。「2015 all rights reserved」みたいなやつ。
HTMLのみのウェブサイトでは毎年、年の部分を自分で書き換えなければいけない。2016年になれば「2016 all rights reserved」と自分で書き換えないといけない。
だけどPHPを使うと年が変わるごとに自動で2017にしたり2018にしたりしてくれる。(これはJavascriptでもできるけど)
また、データベースにブログ記事を保存したり引っ張りだしたりしてページに表示したりしてくれる。
CSSの様にレイアウトを整えることもしないしJavascriptの様に派手な動きもしないけどPHPを使うことで何十倍もウェブサイトの更新や管理が楽になる。
今回はPHPで説明しましたが、他にもRubyやJavaなどでも同じようなことができる。


以上、ざっくり説明してきましたが参考になればと思います。
ウェブサイトは復数の言語が絡み合ってるので学ばないといけないことが沢山ありますが、やり始めると楽しいですよ!
ちなみにプログラミング言語の勉強はドットインストール http://dotinstall.com/ というサイトがオススメです。

スポンサーリンク