こんにちは、キノトロープアカデミーです。

「キノトロープアカデミー」は、Web業界のトップランナーである株式会社キノトロープの社員が講師を務めるオンラインアカデミーです。リモートワーク時代に不可欠な「個のスキル」を高め、職人のような「匠」を目指す人を増やしたい。そんな願いを込め、基礎から経営判断、業務フローまで、一生モノのナレッジを惜しみなく公開していきます。

＜入門編 第2回＞
Webサイト制作のフロントエンド
についてお伝えします。

担当は高橋です。

Webサイトの画面を構成する主要言語のうち、HTMLは文書構造やリンクを定義し、CSSは見た目のデザインを制御する役割を持ちます。

人間がテキストを読んで見出しや本文を区別できるように、コンピューターに「タグ」を用いて文書構造を伝える行為をマークアップと呼び、強い見出しを意味する「h1」から「h6」のタグや、本文を示す「p」タグなどを使い分けて構造化します。

こうして定義された文書にCSSを適用することで、情報としての意味とデザインを適切に分離しながら見栄えを整えることが可能になります。

実際の開発現場とは異なり、Windows標準のメモ帳とエッジ（Edge）ブラウザがあれば、設定用の記述を組み合わせるだけで「九九の表」のような単純な表組みの作成から色彩・枠線の装飾までをすぐに体験できます。

”Webサイト制作のフロントエンド”をテーマに、
今日お伝えしたいことは3つあります。

このHTML/CSSの２つで基本、皆さんが普段見ているWebサイトを作ることができます。
Webサイトは、表示されている部分、見えている部分については、
技術的な面で見た場合、大まかにHTML、CSS、JSの3つ言語で成り立っています。

これらは各頭文字の略称で、それぞれの正式名称と役割は

HTML(HyperText Markup Language)（ハイパーテキスト・マークアップ・ランゲージ）：
文章構造やリンクを埋め込むことの出来る言語です。

CSS(Cascading Style Sheets)（カスケーディング・スタイルシート）：見た目を制御する

JS(JavaScript)（ジャバスクリプト）：ブラウザ上の動きやアクションを付けられるもので、ゲームなどを作ったりすることも可能

今回はHTMLとCSSの部分について解説します。

なお、前提として、今回説明する内容は、仕事で行う方法や作り方とは異なっています。入門向けになるべく前提知識がない場合でも説明が出来るように簡素化しているので、実際の実務の場合とは異なるのでご注意ください。

今回実際に試す環境として、パソコンのOSはWindows 10、他には標準で入っているブラウザ（Edge）とメモ帳のみです。

実際に開発や検証する場合、ブラウザはChromeを追加します。シェアもChromeが多いのですが、今回の範囲ではどちらでもかまいませんので、説明としてはEdgeで説明します。

また、通常はプログラミングを作る際のエディターについても、Visual Studio codeやHTML/CSSを扱える環境を用いますが、エディターの説明やインストール・操作方法などを割愛するため、今回はメモ帳のみでサンプル実装のデモをしていきたいと思います。

ですので、すぐにでも試すことの出来る内容になっていますので、この記事で行っているままでも試してもらうことで、おおよその感覚がつかめるかと思います。

HyperText（ハイパーテキスト）とはHyperLink（ハイパーリンク）を埋め込む事が出来る高機能なテキストです。

皆さんが目にする「リンク」がこれに当たります。
ハイパーリンクは自身が作成したページ以外にも繋げる事が出来ます。

こうやって張り巡らせられたリンクの綱が、さながら蜘蛛の巣に見える事から「World Wide Web(ワールド・ワイド・ウェブ)（世界的に広がる蜘蛛の巣）」と呼ばれます。

よく「ウェブサイト」等と呼ばれるものはこのWebが由来になっています。ちなみに同じ意味で用いられる「ホームページ」という単語は和製英語で、ブラウザを立ち上げた時に最初に表示される（ホーム）ページが誤用され広まり使われるようになりました。

次にMarkup Language（マークアップ・ランゲージ）ですが、これは「文章を構造化するための言語」になります。以下を例に説明します。

人間であればテキストの内容を読めば、見出し、本文と理解できますがコンピューターには同じ平のテキストとしか理解されません。コンピューターに認識して貰うため「タグ」と呼ばれるアルファベットの言語で括ります。

このタグで囲むことを「マークを付ける」というため、マークアップ言語と呼ばれます。ちなみにここで登場した<h1>と<p>ですが、以下の略語となっています。

ちなみに、hに数字が付いているかと思いますがこれは見出しの強さを表します。一般的に強い順から使用していき、
<h1> = ページタイトル
<h2> = 章タイトル
<h3> = 段落タイトル
<h4> = 文タイトル
のように区切っていき、最大６<h6>まで使用する事が出来ます。

では実際にメモ帳とブラウザを使ってHTMLを作成してみたいと思います。
今回は小学校でならう掛け算の９９の表をHTMLで作成してみたいと思います。

続きについては下記の動画内で実際に行っていますので是非ご覧ください。
[https://www.youtube.com/watch?v=nP3kC6mWjNg]

CSSは、HTMLで記述されたページの見栄えを定義・表現するためのものです。HTMLで文書の意味が定義されていますが、それをCSSによりきれいに見せるかつ、意味とデザインを分離することが可能となります。

先ほどの99の表も表にはなっていますが、一切デザインされていないため、シンプルすぎで見やすいもの、きれいなものとはなっていません。この見栄えを整えられるものがCSSです。

なお、このデザインの指定方法は大きくは３つあります。
・A．HTMLのタグの中に直接記載する
・B. HTMLのヘッダに記載する
・C. 別ファイルとしてCSSを作成して指定する

通常はCの方法で作成しますが、簡単に試せるというところで、今回はAとBの方法を用いてCSSを定義しています。

先ほどの動画では99の表のHTMLに対して、CSSで見た目を整える演習も行っておりますので是非ご覧ください。
[https://www.youtube.com/watch?v=nP3kC6mWjNg]

パソコンがあればだれでも試すことは出来る内容ですので、まずは手を動かしてみることが理解のすすむ第一歩かと思います。

最後までご覧いただきありがとうございました。

の３点についての内容でした。