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デザイナー・プログラミング学習にオススメ

記事内で紹介している商品リスト
(価格はAmazon参考価格)

初心者からちゃんとしたプロになる PHP基礎入門〈PHP8対応〉

2,750円(税込)

初心者からちゃんとしたプロになる PHP基礎入門〈PHP8対応〉

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

2,948円(税込)

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

HTML5 & CSS3 デザインレシピ集

3,025円(税込)

HTML5 & CSS3 デザインレシピ集

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

2,838円(税込)

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

HTML&CSSとWebデザインが 1冊できちんと身につく本

2,300円(税込)

HTML&CSSとWebデザインが 1冊できちんと身につく本

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

2,486円(税込)

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

2,640円(税込)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

2,454円(税込)

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

1,958円(税込)

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

イラスト図解式 この一冊で全部わかるWeb技術の基本

1,848円(税込)

イラスト図解式 この一冊で全部わかるWeb技術の基本

WEB言語紹介の関連ページ

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

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

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

URLの疑似静的化

URLの疑似静的化 動的URLを静的URLにする方法

htacessを使いhtmlファイルが存在しない静的URLを生成する方法と、仕事で使った疑似URLの活用方法の紹介です。

ランダム表示バナー

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

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

日付比較

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

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

PHPで作るカレンダーの作り方2

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

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

PHPの覚え方

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

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

配列の解説

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

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

PHPを使って作るCMS

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

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

PHPで作るカレンダー

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

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

POST送信

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

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

PHP覚え方

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

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

スクロール監視

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

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

jquery-match-height.js

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

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

indexOf

JavaScriptのIndexOfの使い方の復習

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

アンカーリンクナビ

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

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

bookblock

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

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

交差監視

Intersection Observer APIを図解で解説

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

WEBフォント設定

WEBフォント使用時の最適な設定を考える

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

アイキャッチの作り方

参考にならない適当につくるアイキャッチの作り方!

ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。

SVG背景

CSSとSVGを使った三角形背景の作り方

SVG背景を覚えたらborderで背景画像を作るのが馬鹿らしくなります。 それくらい簡単で汎用性の高い方法です。

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

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

PHPで作るカレンダー
1位

PHPで作るカレンダー

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

jquery-match-height.js
2位

jquery-match-height.js

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

SEL50F18F
3位

SEL50F18F

ソニーの単焦点レンズSEL50F18Fを愛用しています。コスパに優れた単焦点レンズで、F値の開放が1.8と明るく撮れるレンズです。

Kazakiri 1枚刃のカミソリ
4位

Kazakiri 1枚刃のカミソリ

カミソリの替刃の価格が高すぎるので1枚当たり11円で使える片刃のカミソリを購入しました! 切れ味抜群でヒゲソリが楽しい!

ノートPCスタンド
5位

ノートPCスタンド

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

千鳥ヶ淵夜桜
6位

千鳥ヶ淵夜桜

2019年4月3日に九段下は千鳥ヶ淵の夜桜撮影をα7Ⅲでしてきました。往路は広角レンズSEL24F14GMで復路は単焦点レンズSEL50F18Fにて。

レンズ比較
7位

レンズ比較

「ズームレンズ SEL2870」「単焦点レンズ SEL50F18F」「マクロレンズ SEL50M28」の比較検証をしました

車用スマホホルダー
8位

車用スマホホルダー

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

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

MusicBeeのレイアウト変更方法

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

α7Ⅲで夜景
10位

α7Ⅲで夜景

去年はPENTAX Q7で撮影してきた東京タワーと浅草に今年も夜桜撮影に行ってきました。買ったばかりのソニー α7Ⅲを片手に。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

WEB制作

WEB制作

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

カメラ

カメラ

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

美味しいもの

美味しいもの

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

Amazonプライム動画

Amazonプライム動画

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

旅LOG

旅LOG

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

プロフィール

プロフィール

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

日記

日記

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

thanks

thanks

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

記事内で紹介している商品

初心者からちゃんとしたプロになる PHP基礎入門〈PHP8対応〉

2,750
(税込)