WEB制作で使われるいろいろな言語を紹介します

いつもWEB制作をささえてくれるいろいろな言語を紹介しています。 他にもMySQLがあるんですが長くなるので割愛しました

WEB制作をささえるHTML・CSS・Javascript・PHP

WEB言語紹介 WEB制作

HTMLからCSS、Javascript、Jquery、PHPを中心にAjaxとかサーバーサイド、クライアントサイド、動的処理とはなどいろいろな言語紹介をしています。フロントエンドとバックエンド両方できると楽しいです。

公開日:
最終更新日:

WEB言語紹介 関連ワード #109
使い方
WEB制作
  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る
  • rss2.0

HTMLとCSSとJavascriptとJqueryの役割

私がWEB制作に使ういろいろなものをまとめて全部、どういう役割なのかを説明したいと思います。
厳密に言うと、と注意書きをいれたくなので最初に断りを入れさせていただくと「概念」的な話なので、多少間違ったり、拡大解釈したりすると思いますが何卒ご容赦ください。

気軽に読んでもらえれば幸いです。雑学的な。

HTMLの役割 WEBページを支える屋台骨

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、タグと呼ばれる<>で囲われた色んな種類のタグを使ってブラウザを通して見れる状態にするための言語です。

タグには色々な意味があって、役割があるのですが、その役割を無視して適当に作っても、表示上の問題はあまりなく、エラーなども出ません。(表示が崩れるくらい)

本来の役割に沿った使い方を厳密に行い、なるべく無駄なタグを使わないのが美徳とされています。

HTMLタグの一例

タグの一例

タグの役割に基づく使用方法などをめぐってしばしば論争が起きます。
また、HTMLはプログラミング言語かどうか、HTMLは簡単だ、いや難しい、ソースが汚い、<img>タグはH1で囲うべきではない、などその火種が尽きることはないでしょう。

コーディングを正しく、美しく組めるコーダーの人は尊敬されます。
HTMLの純度をどこまで高められるかという点において、妥協しない人ほどHTMLは難しいと言い、見た目が良ければよいという人には簡単と言われる不思議な言語です。

懐かしのマーキー

CSSの役割 レイアウトや装飾担当

CSSはCascading Style Sheets、カスケーディング・スタイル・シートと呼ばれる、主に見た目のレイアウトや色、文字の大きさなどを担当しています。

CSSがなかった(一般的でなかったのか)頃は、タグに文字の大きさやセンタリングのタグがあったのですが、それらのタグはCSSでやることを前提とされ、HTMLのバージョンによっては廃止タグという扱いで、使わないことを推奨されています。

もっというとtableタグでレイアウトしてたんだぜ。

CSSの一例

CSSの役割

CSSのおかげで、WEBページのスタイルに一貫性を持たせることが可能になり、HTMLは論理構造にそって作れるようになった。

また、CSSはバージョンアップを重ねるたびにできることが増える反面、ブラウザによっては思い通りに表示されないスタイルがあったり、めんどくさいところもあります。

IE(インターネットエクスプローラ)で見られると、意図しないデザインになることが多い。IE10まではサポート終わってんだからIEは使うなと、WEBデザイナーはもれなく思っている。
IE11は2025年でサポート期間終了と。ながい。

最近では、この次に紹介するJavascriptのように、色々な動きを付けることもできるようになってきました。

Javascriptの役割 動きやインタラクションの担当

インタラクションは双方向という意味で、ユーザーのアクションに応じて何かをさせることを指します。

Javascriptの一例

Javascriptの役割

Javascriptは昔、ユーザー側がJavascriptをオフにしている場合があるから、Javascriptを切られても表示できるようにWEBを作れと言われていました。
最近はそんなことを気にしなくなりましたね。

Ajaxが生まれたころから、一気に息を吹き返し、一気に覇権をとったイメージ。
AjaxはGoogleマップのように、ページ遷移することなくどんどん情報を読み込むことができる仕組み、と思ってください。非同期通信と呼ばれます。

サーバーサイドJavascriptと呼ばれるものまで生まれてきて、大活躍しています。
私はサーバーサイドジャバスクリプトは使ったことがありません。node.jsとか興味はあるんですけどね。

プログラミング言語のJavaとは一切互換性がないので、Javascriptが使えてもJavaは使えないです。
THE BLUE HEARTS と THA BLUE HERBくらい違います。

画面を遷移させずに、色々な動きを付けることができるのが特徴。

Jqueryの役割 動きやインタラクションの担当

役割やできることはJavascriptと同じです。というかJavascriptです。
Javascriptのめんどくさい記述を劇的に簡単かつわかりやすく使えるようにしてくれたのがJquery。

HTML、CSS、Javascriptは何もしないで、HTMLファイルに記述すれば使えるけど、JqueryはJqueryのファイルを読み込まないと使えません。

Jqueryの特徴

Jqueryの特徴

Jqueryの登場以前と以後で、WEBの世界は大きく変わったと思ってます。

簡単な記述で、表現の幅がものすごい広がり、思わず使いたくなるサンプル集が世界各地で作られ、それをコピペして使うWEBデザイナーを量産しました。

アコーディオン、タブ、フェードイン、フェードアウト、トグルなどなど、Jqueryによってもたらされたものは数多い。

JavascriptなのでJavascriptと同様、画面を遷移させずに、色々な動きを付けることができるのが特徴。

ここをクリックすると

隠れてた要素が表示されます。
これはアコーディオンと呼ばれます。

最近はWEB高速化のトレンドが逆風になり、脱Jqueryの動きが広まっている。
でも便利だからなかなか忘れられない。

花の慶次でいうおまつ様的なポジション。

花の慶次 おまつ様

花の慶次 雲のかなたに 十八巻 73ページより引用

補足すると、慶次はおまつに惚れていたわけですが、おまつは前田利家の奥さんなので、道ならぬ恋なわけですよね。
なんやかんやでおまつ様のことは忘れるんだけど、慶次の心の中にはおまつ様がいるわけです。

HTML CSS JavascriptとJquery はクライアントサイドの言語

今あげた4つはクライアントサイドで動く言語です。
サーバーサイドの反対語で、簡単に言うとHTMLを開けばそのままちゃんとブラウザで見れる言語。

最近の言い方でいうところのフロントエンドです。

サーバーのレスポンスが不要で、手軽に確認もできるというナイスな特徴があります。

クライアントサイド

PHPの役割 サーバーサイドの処理担当

Personal Home Page Toolsの略で、動的なページを作るために作られた言語。

サーバーサイドの処理担当。ここからへんから説明が一気に難しくなってきます。

サーバーに情報を送って、そのレスポンスに応じた内容をHTMLとしてレンダリング(描画)するため、開発環境と呼ばれるものを準備する必要があります。
Apache(アパッチ)と呼ばれるサーバーを個人のPCにインストールするのが一般的で、これがないとPHPファイルは動きません。

サーバーサイド

サーバーサイドってなんだ?バックエンド

サーバーサイドのサーバーはWEBサーバーです。WEBサーバーがサーバーサイドの言語を読み取って、HTMLの状態を返す処理をします。

最近の言い方でいうところのバックエンド

HTMLで「こんにちは」と書くのは <p>こんにちは</p> と書きます。
PHPで書くときは <?php echo '<p>こんにちは</p>'; ?> と書きます。

ブラウザでレンダリングされた結果を見ると、どちらも <p>こんにちは</p> となります。

わかりました?同じ結果でもプロセスが違うんです。

PHPとWEBサーバーとHTML

WEBサーバーがいないとPHPは役に立たない

HTMLで書かれた<p>こんにちは</p> はサーバーがいらないのでそのまま出力されるんですが、PHPで書くとサーバーを通らないと<p>こんにちは</p> にならない。

サーバーが<?php echo '<p>こんにちは</p>'; ?>という命令を受けとって、<p>こんにちは</p> を出力しているわけです。

「こんにちは」を出力するだけならわざわざPHPで書く必要はないんですが、サーバーサイドの面白いところは動的処理にあります。

動的処理とは?

動的の反対は静的で、これは基本的に同じ内容を表示させることしかできないページです。
Javascript使えば時間によってメッセージ変えたりできるんですけどね、それはまぁ置いといて。

動的っていうのは、時間であったり、リクエストであったりに応じて、出力結果を変えることができる処理です。

で、表示させる結果をプログラムで作ったり、データベースから引っ張ってきたりといろいろなことができます。

今まで紹介したものを全部使った簡単なコンテンツで説明

とりあえず「+」ボタンをを押してみてください。

0

漢字、出ましたかね?
ボタンを押すと数字が変わり、その数字に応じた漢字が出力されます。

なにやってるかの解説

HTMLで+と-、0を書きます。
ボタン化したい要素を<span>で囲って、そのspanにCSSで線を付けて、角を丸くしてボタンっぽく仕上げます。

HTMLでの処理1

解説その1

Jquery(Javascript)で、ボタンが押されたら0の数字を1ずつ加算しなさいという処理がされます。

ボタンが押されたらAjaxを使ってPHPを通してデータベースにアクセスします。
Ajaxを使うことでサーバーサイドであってもページ遷移なしで動的にページを変更できると。

HTMLでの処理2

解説その2

データベースは漢字クイズに使っているデータベースにつないでます。
現在140種の漢字が登録されているので、1~140の数字の間だったらそれに対応した漢字が表示されると。

本当は1~140以外の数字は押せないようにしないといけないんだけど、めんどくさいので今回はそのままにしてます。
0以下の数値、141以上の数字になるとなにも表示されません。

あとがき

こんな感じでいろいろな技術の組み合わせで、世の中のWEBサイトは作られているわけです。
色々と覚えないといけないことは多いんですけど、おもしろいからなんとかなりました。

思いついたアイデアを最善の形で作りたいとなると、色々覚えなきゃ表現できないわけです。

PHPを覚えたのもSE(システムエンジニア)になりたいから覚えたわけではなく、やりたいことをやるために必要だったので覚えました。

そんな感じで少しずつやれることを増やしていけば、やれることは増えると。
やりたいことが明確だとそこにたどり着くスピードが上がると思いますので、やりたいこを明確にすることが重要です!

データベースとMySQLの詳細はあえて触れずに終わります。

  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る
  • rss2.0
はてなブックマーク

おもしろかったらぜひ、はてなブックマークをお願いいたします。

次の記事はこちら

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
39歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップのレンタルサーバーを使っています

プロフィール詳細はこちら

WEB言語紹介 オススメ関連コンテンツ

PHP 関連記事はこちら すべての WEB制作 記事はこちら

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

PHPを使った漢字クイズの作り方解説 その1 POST送信

PHPを使った漢字クイズの作り方解説 その1 POST送信

【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。

PHPの良いところは難しいと思われていること

PHPの良いところは難しいと思われていること

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの配列ってイメージは付くけどちゃんと理解するのが難しい。 例題がわかりづらいせいだと思うんですよね。これはわかりやすい。

PHPを手っ取り早く覚えるには作りたいものを作ること

PHPを手っ取り早く覚えるには作りたいものを作ること

PHP単体でもHTMLよりもできることの幅はひろがるけれど、それにプラスしてデータベースを扱えるようになると無敵感を味わえます。

ブログアクセスランキング

新着記事

カテゴリリスト

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
39歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップのレンタルサーバーを使っています

プロフィール詳細はこちら

WEB制作関連・オススメ商品 amazon