第1章はじめに - 福井県立科学技術高等学校産業デザイン科 2024 Webデザイン実習

§1-1.はじめに

PCやスマートフォンの普及により、今日、私たちはほとんど毎日といってよいほどWebの世界と接点を持っています。仕事から買物、娯楽、家族友人とのコミュニケーションに至るまで、様々な恩恵を受けています。しかし、普段から馴染みがあっても、その裏側や、どのように制作されているかなど、その過程にふれる機会はあまりありません。
この実習ではそれらのWebの知識や技術にふれ、生徒の皆さん自らコードを記述したり、デザインを制作することでそのWebデザインへの知見とその面白さを学習することを目的としています。

§1-2.Webとは

「Web」すなわちWorld Wide Web（ワールド・ワイド・ウェブ）の起源は1980年代。
イギリス人学者ティム・バーナーズ＝リーが、コンピューター上の膨大な資料や論文から、必要なものを探しやすくしたり、ある資料に関連した別の資料に辿り着きやすくする技術として開発したのがはじまりと言われています。
　後に彼はW3C：World Wide Web Consortium（ワールド・ワイド・ウェブ・コンソーシアム）という非営利団体を立ち上げ、より多くの人々がWebを利用して情報をやり取りができるように技術の規格化・標準化を行なってきました。

ティム・バーナーズ＝リーとW3Cのロゴ
出典：https://en.wikipedia.org/wiki/Tim_Berners-Lee

§1-3.Webを作っているもの

上記（1 - 2.）の通り、Webは論文などの文章を探す技術なので、データ上では文章ファイルとして扱われます。
「コード」と呼ばれる言語を、規則に従って記述することで制作することができます。この作業を「コーディング」と言います。「コード」も目的や用途に応じて多数の言語が存在していますが、代表的ものは下記になります。

HTML：HyperText Markup Language

ハイパーテキスト・マークアップランゲージ

HTMLは、Webサイトを作成する上で、基本となる言語です。
ページのタイトルから、ページ内で掲載する情報やその順番、文字情報や画像情報の読み込み、別ページへの入口の指定など、多岐に渡ります。「タグ」と呼ばれる法則によって記述します。


	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
		<body>

			<h1></h1>
			<h2></h2>
			<p></p>

		</body>
	</html>

CSS：Cascading Style Sheets

カスケーディング・スタイル・シート

HTMLで記述したページに、装飾を加え、見た目やより閲覧・操作をしやすくするための言語です。
文字の大きさや色、要素の高さや幅、余白の広さを調整など。「セレクタ」と「プロパティ」呼ばれる記述法則で指定します。


	<style>
		h1{
		 font-size:30px;
		 color:#f00000;
		}
		div{
		 width:400px;
		 height:300px;
		}
	</style>

§1-4.記述について

記述（入力）は、「コード」は文字列であるため、特別なアプリケーションなどを使わなくても、いわゆる「メモ帳」などのテキストエディタで行うことができます。
実際の制作現場では、より利便性を向上させたコードの記述専用に特化したテキストエディタ使われ、それらにはコードの間違いを表示してくれたり、記述する単語を予測変換する機能があります。