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

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

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

#109 WEB言語紹介

WEB制作

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

公開日:
最終更新日:

サイトマップサイトマップ

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の詳細はあえて触れずに終わります。

WEBデザイナー・プログラミング学習にオススメ

WEB言語紹介の関連ページ

日付比較

キャンペーン期間中だけ表示させるPHPプログラム

期間限定の表示は訴求が強いけど、取り忘れるとユーザーに損した気分を与えてしまうので、忘れずにしっかり対応したいですね。

カレンダーの作り方2

PHP+jQueryで作る土日祝日が選べないカレンダーの作り方

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

PHPの覚え方

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

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

配列の解説

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

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

PHPを使って作るCMS

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

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

カレンダー

PHP+HTMLで作る 祝日対応のカレンダーの作り方

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

POST送信

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

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

PHP覚え方

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

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

ランダム表示バナー

PHPで作るランダムバナー表示プログラム

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

交差監視

Intersection Observer APIを図解で解説

Intersection Observerを仕事で使ったときに理解度が足りないと感じわかりやすい解説記事を書きました。

つまづきやすい5つのポイント

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

スクロール監視

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

indexOf

JavaScriptのIndexOfの使い方の復習

indexOfを使ってindex番号を取得する方法の解説記事を書いていたら、indexOfを使わなくても取得できました。

アンカーリンクナビ

交差監視を利用したアンカーリンクナビゲーション

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

jquery-match-height.js

高さを簡単に揃えるjquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

CLS対策上級編

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

CLS対策初級編

CLS改善をしてPageSpeed Insightsを大幅改善

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

CSSで作る横スライド

1行のCSSで作る横スライドの作り方

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

marginとpadding

CSSのmarginとpaddingの違いについて

CSSのmarginとpaddingの違いについて解説しました。 余白をつくるプロパティの使いわけおを考える。

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

MusicBeeのレイアウト変更方法
1位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

ノートPCスタンド
2位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

アンズテック
3位

アンズテック

小学生向けのゲームプログラミングオンラインスクール「アンズテック」。 仕様言語は「Scratch」と「Unity」となっています。

コンプライ
4位

コンプライ

評判と値段の高いコンプライのイヤーピースの購入後1週間レビュー!柔らかいウレタン素材のイヤーピースは装着前に指でつぶして耳穴に装着します。

ロジクール CRAFT
5位

ロジクール CRAFT

ロジクールが出している高級ワイヤレスキーボードCRAFTアプリがうまく動かなかったけどキーボードの使い心地は最高だった話

NORDACE
6位

NORDACE

NORDACEのSIENAというシンプルで機能的で収納力に優れたノートパソコンも入れられるナイスなリュックのレビューです

ロジクール マウス
7位

ロジクール マウス

PCを操作するのに必要なマウス。高級品でも安いマウスでも操作をするという点においては大差はありません。違いがあるのは操作に対する満足感。

運動会
8位

運動会

子供の運動会にα7Ⅲで初参戦!望遠レンズを買おうか迷ったのですが、本体とセットのズームレンズ1本で運動会を撮影してきました。

撮影用ボックス
9位

撮影用ボックス

ブログやオークションなどの商品撮影のクオリティを簡単に上げてくれるPULUZ製のLEDライト付きの撮影用ボックス レビュー。

Bluetoothイヤホンの使い方
10位

Bluetoothイヤホンの使い方

Bluetoothイヤホンのペアリング方法やリモコンの操作方法、リダイヤルの防止策を画像入りで解説します。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。