初心者必見! Webサイトとプログラミングの関係性を解説してみた

こんにちは。侍エンジニア塾ブログ編集部のダイキです。ふだん何気なく見ているWebサイト、どのようにできているのかご存知ですか?

Webサイトの裏側には多くのプログラムが組まれており、プログラミングによって全てのサイトが作成されています。しかし、Webサイトがプログラミングでできていると言われても、


プログラムで作られてるなんてイメージできない!

具体的にどんな技術を使ってできてるの?


という方が多いですよね。

そこでこの記事ではWebサイトとプログラミングの関係性を分かりやすく紹介します。この記事を読めばWebサイトの仕組みがさくっと理解できますよ。

合わせてWebサイトを簡単に作成する方法もご紹介するので、Webサイトを作りたいという方はぜひご活用下さい。

Webサイトの仕組み

画像:Shutterstock

Webサイトとプログラミングの関係性

Webサイトは基本的にテキストと画像で構成されています。でもそれが並んでるだけでは、ただのメモ書きと同じですよね。

その文章に意味をもたせるためには「HTML」「CSS」「JavaScript」などのプログラムが必要です。これらのプログラムを組み合わせた結果、あなたが普段見ているようなWebサイトができています。

それぞれのプログラム言語の役割

先程ご紹介したHTML・CSS・JavaScriptはそれぞれ別の役割を持っています。HTMLはWebページの見出しやタイトル・リンクなどを形成しており、CSSはWebサイトのデザインを整えることができます。

しかしHTML/CSSだけではWebサイトに動きがありません。そこで必要なのがJavaScriptです。JavaScriptを使うことで画像に動きを加えたり、サイドバナーを追従させることなどができます。

Webページを人の顔に例えると、

このような役割になります。なんとなくイメージができたのではないでしょうか?それでは実際のところ、Webサイトがどのように構成されているのかを詳しく見てみましょう。

Webサイトの裏側

Webサイトの裏側を見るには、あなたが見たいWebサイトを表示して「右クリック」を押してみましょう。すると「ページのソースを表示」と出てきますよね。(ここではMacを例として説明しています。)

このページのソースと呼ばれているものが、Webサイトの裏側──つまりコーディングされたWebページ(ソースコード)となります。さっそくページのソースを表示してみましょう。すると、こんな画面が出てきます。

一見すると英語だらけでさっぱり分からないですよね。ですがこれらの文字列によって、普段見慣れたWebサイトが構成されているのです。とはいえ、このままではどの文字が何を指しているのかわかりません。

そこで次は右クリックして出てくる「検証」というボタンをクリックしてみましょう。

すると、ページの場所に応じたソースコードが見れるようになります。具体的にWebサイトのどの部分にどんなコードが使われているか見たい時に確認しましょう。

Webサイトに使われるプログラミング言語

ここまでに紹介した言語はWebサイトの表面的な部分を扱う言語で総称として「フロントエンド言語」と呼ばれています。ここからは、Webサイトのシステム的な部分を扱う「サーバーサイド言語」も交えてWebサイトに使われるプログラミング言語を紹介します。

HTML

HTMLは先程もご紹介したとおり、Webサイトの骨組みとも言えるもっとも基本的な言語です。厳密に言えば「マークアップ言語」と呼ばれており、実はプログラミング言語ではありません。HTMLが扱えるからといって、プログラミングができると思っていると恥をかくので要注意!

Webサイト上のタイトルや見出し・リンクなどはすべてHTMLで作られています。しかしHTMLは文字に役割を与えるだけで見た目を整えることができません。

そのためHTMLのみで構成されていると下の画像のように非常に簡素な仕上がりになってしまいます。

HTMLファイルのサンプル

 

これはHTMLファイルのサンプルです。

 


より詳しくHTMLについて知りたい方はこちらの記事も合わせてご覧ください。

CSS

CSSは「Cascating Style Sheets」の略称でWebページの装飾を行うために使用されます。使いこなすことで、簡素な表現しかできないHTMLを綺麗に整えることができます。実際にCSSを適用したHTMLと何もしていないHTMLを比べてみましょう!

こちらがHTMLで作られたボタンです。

ボタンであることは分かりますが、あまりパッとしないデザインですよね。

ではこちらのボタンにCSSをあてて整えてみましょう。

どうですか? 先程とは一目瞭然ですよね。このようにCSSをあてることで自由にデザインを整えることができるんです。

HTML/CSSはWebサイト制作の基本なので興味のある方はぜひ覚えて下さいね。

JavaScript

JavaScriptはWebサイトに動きを与える役割を持ちます。例えば、弊社の公式ページを見てみましょう。

こちらの画像のように「無料体験レッスンを予約」にカーソルを合わせると画像が動きますよね。この動きはJavaScriptを用いて行われています。

また、WebサイトだけでなくWebアプリやスマホアプリなども作れる非常に多様性の高い言語としても有名です。JavaScriptについて詳しく知りたい方はこちらの記事も合わせてご覧ください。

PHP

PHPはWEBで動いている様々なサービスやページ作りが得意なプログラミング言語です。初心者から上級者まで色々なレベルのエンジニアが使用しています。

WEBサイトにお問い合わせフォームをつけたり、システム的な機能を少し付けたくなった時に使用します。人気がある言語なので、困った時やつまずいた時に質問できる人や情報サイトが多いという点も初心者には安心できるポイントです。

PHPについて詳しく知りたい方はこちらの記事も合わせてご覧ください。

Webサイトを簡単に作るならCMS

Webサイトを作るにはプログラミング言語が必要になります。しかしこれらのスキルを一から身に付けるとなると少しハードルが高く感じますよね。

そこで活用したいのがCMSです。ここからはWebサイトを簡単に作成できるCMSについてご紹介致します。

そもそもCMSとは?

CMSとは、Contents Management System(コンテンツ・マネジメント・システム)の略称です。プログラミング言語などの知識が無くても、Webサイトやコンテンツを構築・管理・更新できるシステムを指します。

このCMSを活用すればプログラミング未経験者でも、簡単にWebサイトを制作することができます。

代表的なCMS

この記事ではCMSの中でも世界的に有名でシェア率の高い2つのCMSをご紹介致します。

WordPress


引用元:WordPress https://ja.wordpress.org/

WordPress(ワードプレス)は、ブログやサイトを簡単に作成できるソフトです。そのシェア率は世界中のサイトの約3分の1と言われています。

日本国内でも、個人ブログだけでなく企業や公共機関のサイトなどに幅広く利用されており、いま読んでいただいているこのブログもWordPressで作成されています。

WordPressの最大の特徴はプラグインやテーマを変更することで簡単に見た目や機能をカスタマイズできる点です。これらを用いることでプログラミングの知識がなくても簡単にWebサイトを作成できます。

WIX


引用元:Wix https://ja.wix.com/

「Wix」は海外製のクラウド型CMSで、デザインのテンプレートは500種類以上・機能は250種類以上あります。ドラッグとドロップだけで直感的に編集できるのも魅力的ですね。

プログラミングの知識がなくてもデザイン性のあるWebサイトを作ることができます。なんと世界で1憶人以上が利用している超有名CMSなんです。ただ、選んだテンプレートを変更できない仕様なので慎重にテンプレートを選ばなければなりません。

まとめ

いかがでしたか?

Webサイトには多くのプログラミング言語が用いられており、これらの言語を組み合わせることでWebサイトは作られています。Webサイト制作に興味のある方は、最後に紹介したCMSなどを活用してぜひWebサイト制作の一歩目を踏み出してください。

この記事があなたの役に立つことができれば幸いです。

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナカガワダイキ

ナカガワダイキ

侍エンジニア塾ブログ編集部のナカガワです。ホテル業界に9年間従事し、未経験からIT業界へ転身。
初心者目線で、誰が読んでも分かりやすく読みやすい記事の執筆を心がけています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説