【WEBコースコラム】HTMLとCSSとは？
はてブ
送る
もくじ
HTML+CSS解説
ミライクチセのWEBコースで学べるHTMLとCSSについて、本日はなるべくわかりやすく解説していきます。
まず、前提として普段からみなさんが見ているAmazonやTwitter、そして今見ていただいているチセのサイトもインターネット上に公開されている文章にしかすぎません。
どれだけ便利なサービスをしてくれたりオシャレな見た目をしていたり動画が一杯公開されていようと、うちのサイトで例えるなら"ミライクチセ"というタイトルのノートを見ているのと同じです。
ただ、日本語でとりあえず書きなぐったところでWEBサイトはできません。
コンピュータにどんなサイトにしたいのか理解してもらうために、コンピュータがわかる言葉で教えてあげる必要があります。
その為に使用するのが上記のHTML(ハイパー・テキスト・マークアップ・ランゲージ)なのです！
「ここはタイトルだよ」「ここに画像を入れてね」「ここは地図を表示するように」と、文章に注釈(マークアップ)をつけて丁寧に説明してあげることで、コンピュータが理解してくれることでWEBサイトは完成するわけです。
文章構造や装飾に関する指定などを行う言語のことをマークアップ言語と呼び、HTMLはそれの一種です。
テキストエディターと呼ばれるメモ帳のようなソフトで文章を書いていくのですが……まずは実際にどんなものなのか見てみましょう！
HTMLとは？
これが実際のテキストエディターの画面の画像です。
Webサイトはこういった文章によって構成されており、<〇〇></〇〇>といった形式で書かれているタグの中に文章を入れていくことで、各要素を成り立たせているのです。
これらのタグや配置にもきちんと意味があり、その文章構造のルールを覚えていくことが学習のカギとなることでしょう。
では、もう少しだけ踏み込んでこの文章について解説させていただきますと、Webサイトには定型文のようにこれは書いておこうというお約束があります。
次は実際にHTMLのひな形となるテンプレートを見てみましょう。
上の<!DOCTYPE html>というタグが「これから書いていくものはHTMLですよ～」とパソコンに宣言するのに必要なもので、DOCYPE宣言と呼ばれます。
HTMLであることを説明する要素でありますので、どのタグよりも先に書く必要があります。
次に、<html>ですが、これもHTML文書であることを示すもので、最初にお見せしたテキストエディターの画像のように<html lang="ja">と書くことで「日本語で書いていきますよ～」とパソコンに教えてあげられるわけです。
そして<head>はひらたくいうとこのHTML文書で作っていくWebサイトの設定をしてあげる要素で、主にサイト上では目にすることのない部分です。
<meta charset="utf-8">は文字エンコーディングと呼ばれる、データを文字として処理する方法の形式を指定する為に記述するのですが、これを指定しておかないと文字化けを起こしてしまいきちんとPCに表示できません。
これはPCに指示を送るからこういう文章になっていくわけですが……。
僕たち人間の言葉に訳していくのならば<meta charset="utf-8">は——
「これからメタデータ(表面上は見えない情報)の文字エンコード(データから文字に変換する方法)の設定をしていくよ、形式はutf-8ね」という内容になります。
他にも、<head>内には<title>タグでサイトの名前を設定してあげたり、<link rel>タグで他のファイルを読み込んでプログラムを実装するなど、目に見えないけど大切な設定を施していくことができます。
CSSについて
さて、ここまで色々とお話しさせていただきましたが、何となくどんなことをするのか見えてきましたでしょうか？
ちょっとばかりボリュームのある内容だったので、一息つけるつもりで一旦一枚目の画像でサイトを作ったらどんな風に映るのか確認していきましょう。
なんだか見栄えが悪いですね！
もっと真ん中に寄せて、画像も見やすく並び替えてほしいところなのですが、そういった装飾をほどこしていくのはHTMLではなくCSS(カスケーディング・スタイル・シート)で行っていきます。
テキストエディターでCSSのファイルを作り、<head>内でリンクする記述をしてHTMLと結びつけてあげることで、HTMLで作ったサイトの見た目を整えてあげることができます。
CSSで出来ることは様々あり、HTMLでもできるよ、という部分もあるのですが……。
かみ砕いてご説明させていただくと、CSSでは文字や画像のサイズや位置の調整に、指定した要素(タグ)に罫線をつけたり色をつけたりと、主に見た目を整えていくことが可能となります。
では、実際にCSSをリンクさせたバージョンのサイトも見ていきましょう！
これでグッとサイトの見た目が整いましたね！
先ほどご説明させていただいた通り、CSSを適用することで僕たちが普段見ているサイトのようなデザインに仕上げていくことができるわけなのです。
今回、説明用の画像として使わせていただいているサイトはちょっと色気のないもので申し訳ないのですが……。
これはWEBコースである程度勉強したあとに、課題としてこのサイトを作ってみようというサンプルサイトで、自分の力でこれを再現することがまず最初の関門となります。
画像や文章の内容を差し替えるだけでグッと印象は変わってくるはずです。
そう考えたら、Web制作って意外と簡単そうに思えてきませんか？
それでは少し、HTMLの解説に話しを戻していきましょう。
<body>について
さて、<head>などについては先ほどご説明させていただきましたので、最後に<body>について少しお話しさせてください。
<body>にはサイトのコンテンツとなる情報や、<header>や<footer>といった主にサイトのメニューとなる領域を記述していくことになります。
<h1>~<h6>といった見出しをつけていき、<p>というタグで文字を書いて段落を作ることでサイトの内容を充実させていく。
例えるなら、一冊の本を作り上げていくのに近い行為かもしれません。
<body>という紙に<h1>という見出しをつけてあげることで各章のタイトルを構成していき、<p>で文章を連ねていき、<img>というタグで挿絵(画像)をつけてあげる。
そんなイメージをしていただけるとグッと身近なものに感じられることでしょう。
では、先ほど少し触れた<header>や<footer>がどのようなものなのかというと、これも画像で実際にモノをみていただきましょう。
ひらたくいうと上にあるメニューの部分がヘッダー(header)で、下のメニューがフッター(footer)であり、サンプルサイトでは"Manu"という風に表現しておりますが、だいたいここには"About"や"Contact"などといったページタイトルが入ってきます。
そして、作り上げた別ページへリンクさせることで、ユーザーがそちらのページに行きやすくすることが目的となります。本にしてみれば目次の役割ですね。
普段みなさんがお使いいただいているAmazonの一番上と、一番下のほうを見ていただくとよりわかりやすいかと思われます。
さて、HTMLとCSSとは何なのか、Web制作でどんなことをやっていくのかイメージはわいてきたでしょうか？
「Web制作のことは気になるけど何をするのかさっぱりわからない」
そんな声を聞くことが稀にあり、そんな方々のお役に立てればと思い今回記事にさせていただきましたので、もしこれで少しでもWebへ好奇心を持っていただけたら幸いです！
WEBページの構成などについて、そしてCSSの書き方などについてまだまだお話しさせていただきたいことは沢山あるのですが、また次の機会によろしくお願いします。
▶ミライクチセのWEBコースについてはこちら！
※画像をクリックするとWEBコースの紹介記事へ移動します。
見学・体験のお申し込みはこちら！
就労支援B型「ミライクチセ」ではいつでも見学・体験を受け付けております。まずはあなたの目で実際に確かめに来てください！スタッフ一同心よりお待ちしております！