【徹底比較!】HTML vs CSS!両者の違いからJavascript、PHPとの関係性まで分かりやすく解説します!

インターネットとは切っても切れないWebサイト。Webサイトの多くがHTMLなどの言語で作られており、これらの言語で作られたWebサイトは日常的にpc、スマホ、タブレットなどで閲覧できます。今回はこれらの言語の名前の意味などの基礎を始め、仕組みや使い方、言語習得のコツやアドバイスまで紹介致します。

 

そもそもHTMLとCSSって?

 

「HTML」&「CSS」の2つを簡単に説明

 

 

そもそもこれらの意味がわからないなんて人が大半ですよね。簡単に大きく別けて説明していきます。

 

・HTML

「HTML」は『Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)』の略です。Webページを作るための最も基本的なプログラムの言語のひとつです。

・CSS

「CSS」は『Cascading Style Sheets(カスケーディング・スタイル・シート)』の略です。ウェブページの文章のスタイルの指定をする言語です。

 

JavascriptとPHPとは?

 

「javascript」&「PHP」の2つを簡単に説明

 

 

・javascript

「Javascript(ジャバスクリプト)」は、有名な「java」と名前が似てますが全く別の言語です。

当時から人気があったjavaの良い波に乗りたいがために名前を「LiveScript」から「javaScript」に変更したと言われている言語。「javascript」の使い方はウェブページに動きをつける用途で使用されます。

・PHP

「PHP」は『PHP: Hypertext Preprocessor』の略。The PHP Groupによってコミュニティベースで開発されたオープンソースの公式汎用言語。主にサーバー側で使用

 

HTMLとCSSを簡単に説明

 

HTMLとCSS

 

 

・HTMLとは

HTML(ハイパーテキスト・マークアップ・ランゲージ)はWebサイト作成で最も多く用いられる言語です。

これから「ハイパーテキスト」「マークアップ」「ランゲージ」3つに分けて説明していきます。

 

ハイパーテキスト

ハイパーテキスト(HyperText)とはハイパーリンク埋め込み高機能を搭載しているテキストのことを表します。Webページをクリックすると別のページに飛ぶURLリンクのことです。

ハイパーテキストにはハイパーリンク機能で音声データや画像、動画、などサイト内に埋め込みすることが可能。情報と情報を繋げ整理する機能が使えます。

 

マークアップ

マークアップは目印をつける意味を示します。見出し、リスト、段落、などの文章の各部分を要素といいます。検索エンジンがWebページの構造を理解し分析、関連しやすいように示す事を意味します。

 

ランゲージ

ランゲージの意味は言語。簡単に例えると、人とコンピューターにおける翻訳ルールがHTMLです。

・CSSとは

CSS(カスケーディング・スタイル・シート)はHTML、XMLなどの要素をどのように修飾表示するか示す事ができる言語。体裁と文の構成を分離させる事ができるのがCSSです。

 

これから「カスケーティング」「スタイルシート」に別けてIT単語の意味を説明していきます。

 

カスケーディング

連鎖的あるいは段階的に物事が数珠のように同じものが連なる様子を表す。例えるなら小さな滝。何段も連なった数字や文字が小さな滝の様に見えることからこの様に呼ばれています。

 

スタイルシート

文字の見栄えなどの文字の大きさや色、字体などの修飾表現をひとまとめにして捉えるデータファイルなどを示します。

 

javascriptとPHPを簡単に説明

 

JavascriptとPHP

 

 

・Javascriptとは

javascriptは主にクライアント側(サービス利用のユーザー側)で使用される言語。静的(クライアント側)動的(サーバー側)と業界では呼ばれます。

静的なWebページで用いられるのがjavascriptです。他にもマルチメディア管理などが可能なスクリプト言語です。

実はjavascriptはほぼ全ての日本人が一日何回も使っています。スマホやパソコンのデバイスに組み込まれています。このjavascriptは上記でも説明した通り、javaとは別の言語なので気おつけましょう

javascriptとは主にユーザーとネット内のWebページを円滑に作動させるため用いられます。実際にネット上の記事を閲覧可能にしているのはjavascriptのおかげなのです。

 

・PHPとは

PHPはHTMLに埋め込み可能なため好んで使われることが多いスプリクトの一つです。javascriptとPHPどちらもスクリプトですがその大きな違いとなるのが実行できる場所が違うことです。

PHPはサーバー側(パスワード読み込みなどサービス提供側)で実行できるコードができ、javascriptは誰でも閲覧可能なクライアント側がコードを受け取り作動する仕組みになっています。

簡単にPHPができることはデータベース連携、HTMLソースコード作成、クライアントから配信された情報を受ける事ができるのがPHP。

様々なデータベースとの連携が可能なWebサイトを作成可能。サイトでのパスワード入力情報をPHPで受け取る事が可能。受け取った情報をHTMLで表示したり、データベースに保存したりすることが可能。

 

『Javascript』でできることってなに?!アプリの事例とともに具体的な仕組みを徹底解説!

インターネットの入り口として利用されるのがブラウザです。そして、私たちがブラウザを利用する上で、無意識に触れているプロブラムがJavascriptなのです。今回は、Webサイトには欠かせないJavascriptとは何なのか、Javascriptの仕組みについて具体例を交えながら紹介します。

 

Javascriptとは

 

Javascriptは、Webサービスを提供するサイトに使用されるプロブラミング言語です。

私たちは普段、パソコンやスマートフォンで何かを調べる場合、ブラウザを利用しますよね。ブラウザには様々な種類がありますが、そのほとんどに対して汎用性を持つのがJavascriptなのです。

Javascriptは一般的に「JS(ジェーエス)」と略されていますが、一部では「ジャバスク」とも呼ばれています。

 

JavascriptJavaの違い

 

 

Javascriptに似た名称の言語として「Java」があります。名称は似ていますがJavascript」と「Java」はまったく異なる言語ですので間違えないようにしましょう。

JavascriptとJavaの違いについてWebサービスを例に挙げ、簡単に表すと以下のようになります。

 

・Javascript:サービス画面上でUIに動きをつけるプロブラミング言語

・Java:サービスそのものを構築するプロブラミング言語

 

もちろんWebサービスだけではなく、社内システムなどあらゆる場面で基礎となり得る言語であると言えます。

ちなみに、Javascriptが創られた当初は「LiveScript」という名称でした。しかし、Javascriptを広めるためのマーケティングのために、当時から人気のあったJavaの名称に寄せて「Javascript」に改名しました。

これが、JavascriptとJavaを名称的に区別し難くなった原因でもあるのです。

 

Javascriptの仕組み

 

Javascriptはその名の通りスクリプト言語です。スクリプト言語とは、テキスト形式で書かれたソースがパソコンなどで変換され、ユーザーがコンパイルなどを意識することなく実行できるプログラムです。

 

Javascriptが動く環境

 

 

JavascriptはWindowsやMacOSはもちろん、あらゆるブラウザで動作します。

開発環境についても、基本的にはメモ帳などのテキストエディタとブラウザが必要なだけで、特別な開発環境は必要ありません

簡単なJavascriptを試してみたい場合にも、基本的なHTMLの中に、Javascriptを記述するか、あるいは作成した「.js」のファイルを読み込ませるだけなので、15行ほどのプログラムで終わります。

 

Javascriptを含むHTMLファイルを開くことでブラウザが立ち上がり、Javascriptが実行されるのです。

またChromeなどでアドオンをインストールすれば、Javascriptはブラウザのみでもプログラミング可能で、テキストエディタすら必要ありません。

 

Javascriptでできること

 

Javascriptでできることは、主にWebブラウザ上において、画面の遷移無しでUIに動きをつけることです。

これにより、インターネットが普及した初期のWeb画面と比べても表現や操作に圧倒的な自由度が生まれました。

 

ブラウザ上で情報登録する際のフォームで数字だけを入力させる制御などは、Javascriptの入力データチェックによって行われます。また、サイトごとのCookie作成にもJavascriptが使われます。

Webサイト操作した時に出てくるポップアップウィンドウや、動的な画面サイズ調整もJavascriptが用いられているのです。

普段私たちが使うブラウザが、いかにJavascriptで制御されているかが分かりますね。

 

Javascriptの事例

 

それでは、Javascriptの事例を見ていきましょう。

 

ポップアップ画面

 

 

Webサイトにおけるポップアップ画面は、Javascriptが利用されています。

情報入力後の最期の確認として、わざわざ画面遷移をしなくてもポップアップ画面で表示できる機能は画期的な動作でした。

 

オンマウスでのメニュー表示

 

 

企業のWebサイトなどでも多く見られますが、オンマウスによるメニュー一覧の表示もJavascriptです。

これも、画面遷移せずにメニューを確認できる方法で、ユーザーのストレスを大幅に減らすと共に、サイト構成を簡易的に認識することが可能です。

 

電卓

 

 

Webブラウザ上で利用できる電卓も作成可能です。

サイトに埋め込まれた電卓を利用すれば、その場で計算が可能な上に、計算結果をその場でコピー&ペーストできます。

また、Javascriptを勉強する際の初期のテーマとしても採用されることがあります。

 

カレンダー

 

 

Googleカレンダーと同じようなモノもJavascriptで作ることができます。

日や曜日を取得することで、Web画面を開いた瞬間に今日が表示されていると言った、リアルタイムな情報をWebサイトで表現できますし、一つの画面上でカレンダーを編集できます。

 

チャート

 

 

リアルタイムなチャートやグラフを、ブラウザに表示することができます。

株価チャートのロウソク足などもJavascriptで作成することができるのです。1画面で確認すべき情報は、画面をリロードすることなく利用できる必要がありますね。

Javascriptでは、これらも実現できるのです。