きょうは HTML について学びます。
HTML とは、文書の表示に仕方を指示する言語のことです。記号みたいなものですね。Webサイトを作るには、２つの方法があります。
- ページを置くサーバーを用意する。専用のフォルダを作るという準備が必要。
- CMSを利用。
CMS の WordPress でも基本は HTML で動いているので、やっぱり知っていた方が何かと便利です。
きょうはあなたと、その HTML について学習します。（レベル１～２）
私はパソコン歴15年で、ブログを過去1000記事以上書いてきました。Web サイトをゼロから作り上げたことも何度かあります。今はそんなゼロから作らなくても CMS（後述） を利用する方がほとんどです。そのつくり方を解説します。三重県在住のそこそこ年取った男性です。
１. Web サイト作成の準備から HTML の基本を学ぶ
私は現在、自由にパソコンをいじっています。
私のような新物食いは、新しい技術がどんどん出てくる Web の世界では、面白さと焦りが半々ですが、これからWeb 業界に一歩を踏み入れる方にとっては、何から始めて良いのか迷ってしまうかも知れませんね。
１．CMS
CMS（Content Management System）は、コンテンツ管理システムの略称です。これは、ウェブサイトやブログ、オンラインストアなどのデジタルコンテンツを作成、編集、管理するためのソフトウェアやツールのことを指します。
CMSを使用すると、ウェブサイトのコンテンツを容易に作成したり編集したりすることができます。一般的なCMSには、テキスト、画像、ビデオなどのコンテンツを追加し、編集するためのインターフェースが提供されています。また、デザインのカスタマイズやウェブページの構造の管理など、ウェブサイトの全体的な管理も行うことができます。
CMSは、ウェブサイトの非技術者にも使いやすいインターフェースを提供し、コンテンツの更新や変更を簡単に行えるようにします。また、複数のユーザーが同時にコンテンツを管理できるため、チームでの作業やコラボレーションも容易になります。
代表的なCMSとしては、WordPress、Drupal、Joomlaなどがあります。これらのCMSは、多くのウェブサイトやブログで使用されており、拡張性やカスタマイズ性に優れています。ただし、CMSの選択は使用目的や要件によって異なる場合があります。
２．Web の世界では、面白さと焦りが半々
SNS とかで若い世代からお年寄りまでさまざまな方と接していますが、まったくの新人として Web の世界に挑戦する方もたくさんいます。
このブログは、そうした方々が、はじめの一歩として習得すべきことを意識して書いています。初めてWeb サイトの作り方の流れがわかるようになることを目指しています。HTML でコードが書ける、CSS でデザインできる、JavaScript でサイトに動きを加えるなどの内容になっています。
これまでパソコンをいじってきた中で、間違えやすいところは特にページをさきました。また、更なる段階への複雑な Web サイト制作のためのきっかけになるようにも配慮しています。ぜひ本ブログを利用してはじめの一歩を踏み出してください。
CMSはスペースを借る方法です。簡単だから現在はほとんどがこちらです。WordPress、Blogger、Jimdo、はてな、etc・・・などたくさんあります。
ブログや HP のデータは、企業や大学、プロバイダが所有する「サーバー」と呼ばれる大型コンピュータに保存されています。それらのサーバーは相互に結ばれており、そのサーバーを通して世界中のブログや HP が自由に見られるのです。
ブログ・HP を作成するときに記述する言語の１つでサーバーサイドの処理をしない、システムを必要としないページが HTML です。
Web サイトを作りたい方には必須なのが HTML です。
２．Web サイトの仕組みと作成の流れ
最初に書く文字は・・・
１．<!DOCTYPE html>
ただし、これも後述のタグもみな CMS には最初から記述されています。なので書く必要はないのですが、「仕組み・骨組み」として理解しておいてください。
DOCTYPE は大文字にします。このページは右クリックして「ソースを表示」をクリックします。このページには「script」タグがたくさんありますが、これは「JavaScript」ですから、最初はあまりこのタグは使いません。
HTML5 のバージョンを使っていることを意味し、タグは、基本的に入れ子構造です。タグのなかに別のタグを入れ、さらにその中に別のタグを入れ・・・といった具合に書き込んでいきます。
例えば、<p>私のニックネームは<strong>nakayan</strong>です。</p>外側の<p></p>を親要素、内側の<strong></strong>を子要素と呼びます。
HTML
例えば、Google のサイト《https://google.co.jp/index.html》というURL を指定します。これはブラウザから「index.html」というファイルを下さいという意味です。その結果「index.html」というファイルが返されて表示したという状態です。
「.html」と《拡張子》で書かれたファイルは HTML で書かれています。さまざまなタグを用いて、文字にリンクを貼ったり、画像を挿入したり、表やリストの作成、リンクの設定などができます。URL はいくつかの部分に分けられます。
「https://」はスキーム名といってファイルの受け渡し方法を指定します。「s」がついているので「安全に渡しますよ」という意味です。現在では「https://」が一般的です。
次の「www.googl.co.jp」という部分はホスト名といってサーバーの名前を指定する箇所です。サーバーとは HTML が置かれている場所です。最後の「index.html」はファイル（書類）の名前です。
HTML は、Hyper Text Markup Language で、Web 上のドキュメントを記述するためのマークアップ言語のひとつです。拡張子は「.html」です。マークアップ言語とは、文章の構造や見栄えなどに対して指定を行う言語のことで、マークアップ言語として記述される「<」～「>」で囲まれた文字列を「タグ」と呼びます。
開始タグ「<タグ>」で始まり、装飾対象のテキストを記述し、最後に終了タグ「<タグ>」で閉じて使用します。検索エンジンがページの構造を把んだり、ブラウザがページのタグを解析して閲覧しやすく表示する場合などに参照されます。
これらは自分で書く必要がなく、最初から記述されています。
２．HTML5 の登場
以下の要素も最初から組み込まれています。
API とは「何か」と「何か」をつなぐ役割のことです。Web ページは、ほとんどがこの言語を用いてあなたのブラウザに表示されています。高度な処理に対応した API を利用できるようになりました。
HTML 形式のファイルは、２つの要素から構成されます。要素とはドキュメントを構成することで、要素を組み合わせてページを構成していきます。
- HTML ファイルに関する情報が記述された head 要素で、ページのタイトルや概要説明、キーワードに関する情報を記述する部分です。
- ユーザーに閲覧してもらうテキストを記述する body 要素で、ページの内容や装飾方法を記述します。これらファイル全体の要素を合わせて html 要素と言います。それらをどこに書くのか？
テキストエディタ
テキストエディタにはこのパソコンの「アクセサリ」に入っている「メモ帳」「ワードプレス」でも構いませんが、専用のもの（エディタ）があります。そこに書きます。
いろいろありますが「SublimeText3」「Visual Studio Code」どちらでもいいでしょう。もちろん無料です。ダウンロードするときは自分のパソコンが64bit か32bit どちらかを確かめてからしてください。
[スタート] ボタンをクリックして、[Windows システムツール]→[コントロールパネル] をクリック→[システムとセキュリティ] をクリック→[システム]をクリック→コンピュータの基本的な表示[システムの種類] のところに書いてあります。（Windows10）
インストールの方法です。特に「SublimeLineter」というプラグインが便利ですから必ず入れておきましょう。VSCode はそのまま.exe をクリックすればできます。
head 要素を理解する
文字コードの設定は昔はいろいろあったのですが現在では以下に統一されています。
<meta charset=”utf-8″>
<head>要素は、HTML文書のメタデータや外部リソースの参照など、ウェブページの情報を提供するためのコンテナです。ブラウザは<head>要素内の情報を解釈し、ページの表示には直接関与しません。
以下に、<head>要素のいくつかの重要な要素と属性を説明します。
要素
- <title>: ウェブページのタイトルを指定します。ブラウザのタブや検索結果などに表示されます。<title>要素は<head>要素内に1つだけ存在する必要があります。
- <meta>: メタデータ（情報の情報）を指定するための要素です。主に文字エンコーディング、ページの説明、キーワード、著者などの情報を指定するために使用されます。
- <link>: 外部のCSSファイルやファビコン（ブラウザのタブに表示される小さなアイコン）などの外部リソースを参照するための要素です。
- <script>: JavaScriptコードや外部のJavaScriptファイルを指定するための要素です。通常は<body>要素の終了タグの前にスクリプトが実行されます。
属性
- charset: 文字エンコーディングを指定します。一般的な値は「UTF-8」です。
- viewport: ページのビューポート（表示領域）の設定を行います。モバイルフレンドリーなレスポンシブデザインを実現するために使用されます。
以下に、<head>要素の例を示します。
上記の例では、<head>要素内に<meta>要素、<title>要素、<link>要素、<script>要素が含まれています。<meta>要素は文字エンコーディングとページの説明・キーワードを指定し、<link>要素は外部のスタイルシートとファビコンを参照しています。
<head>要素は、ウェブページのメタデータや外部リソースの管理に使用され、ページの表示には直接関与しません。ただし、SEO（検索エンジン最適化）やウェブページのパフォーマンスなどに重要な役割を果たしています。
body 要素を理解する
HTMLの<body>要素は、ウェブページの実際のコンテンツを含むコンテナです。ブラウザは<body>要素内のコンテンツを表示します。
<body>要素には、テキスト、画像、ビデオ、リンク、表、フォームなど、さまざまな種類のコンテンツを含めることができます。通常、<body>要素はHTML文書のルート要素(<html>要素)の中にあります。
以下に、<body>要素のいくつかの重要な属性と使用例を示します。
属性：
- bgcolor: <body>要素の背景色を指定します。たとえば、<body bgcolor=”#ffffff”>とすると、背景色を白に設定できます。
- text: <body>要素内のテキストのデフォルトの色を指定します。たとえば、<body text=”#000000″>とすると、テキストの色を黒に設定できます。
- link: リンクが未訪問の場合のデフォルトの色を指定します。
- vlink: リンクが訪問済みの場合のデフォルトの色を指定します。
- alink: リンクがアクティブ（クリックした瞬間）の場合のデフォルトの色を指定します。
使用例：
上記の例では、<body>要素内に<h1>要素、<p>要素、<a>要素、<img>要素、<table>要素などのコンテンツが含まれています。bgcolor属性は背景色を白に設定し、text属性はテキストの色を黒に設定しています。
<body>要素は、ブラウザ上で表示される実際のページコンテンツを定義するため、HTMLの基本的な要素であり、ウェブページの構造やデザインにおいて重要な役割を果たしています。
記述した内容はコンテンツに反映されます。
３．ここから書くのがページに表示されます
内容に凝るより、１行でもいいから作って見るのが大事です。HTML で書くにはテキストエディタが必要です。とりあえずの方は【アクセサリー】→【メモ帳】で書いてみてください。インストールできた方は VSCode で書いてみてください。
必ず半角で入力してください。
これらは、１の方法、２の方法（CMS)でも同じです。しかし CMS の方ではこれらの記号は使いません。文字をそのまま入力するだけです。
字下げする場合は、全体を範囲選択し Tab キーを押します。戻す場合は「shift+Tab」です。
コメントで目印をつける
コメントを使うとコード内にメモを書くことができます。その部分はブラウザの表示に影響しません。HTML のコメントは、<!– ではじめて –> で終わります。（Mac は、<command>+</>のショートカットでできます）
<!–○○–> は「ページのソースを表示」にすると見えてしますので、読まれて困る文字は入力しないように！
コメントを切り換えるには、「Ctrl+/」（Windows）、「Comand＋/」（mac）です。
後々忘れないようにメモとして「<!-」つけておくのね。
３．Web ページの骨組みを作成する
１．Web ページの大枠を作る
ヘッダーを作成する
ヘッダーは一番上の部分です。ロゴやナビを配置します。<head>タグは文書全体のことで、<header>タグは、ヘッダーの要素を入れるものです。このページを右クリックして「ページのソースを表示」をご覧ください。
<id>と<class>が見えますね？
<id>は、Web ページに１つしかないもの、<class>は複数あるもに付けます。例えば、学級クラスでいえば、先生は<id>、生徒はそれぞれ<class>を付けるようなものですね。それによって色分けとかができるようになるのです。
ナビゲーション
nav 要素を配置し、その中に ul 要素でリストを指定、li 要素でリスト項目を作成して、a 要素でリンクを指定しています。入れ子構造になっていますが、よく使う形です。li 要素にすると「・」が前につきます。
メインエリア
メインコンテンツが入る部分です。見出しや段落などが入ります。
２．HTML5から、新たに多くの要素が追加されました
わかりにくいのが「article」「section」の要素です。これまでは<h1><h2><h3>などの見出しによって階層をもたせていましたが、「article」「section」を使って明確にすることが推奨されています。
<header class=”article-header entry-header”>が見えますね？
独立したページとして成り立つだけの内容であれば「article」を使用し、それ以外は「section」を使います。
HTML（HyperText Markup Language）とHTML5は、ウェブページの構造やコンテンツを表現するためのマークアップ言語です。
5の主な違い
新しい要素
HTML5では、多くの新しい要素が導入されました。これにより、よりセマンティックな構造を持つウェブページを作成することができます。例えば、<header>、<nav>、<article>、<footer>などの要素が追加され、コンテンツの意味をより具体的に示すことができます。
マルチメディアのサポート
HTML5は、ビデオやオーディオの再生を直接サポートしています。新たに導入された<video>と<audio>要素により、独自のコーデックやプラグインを使用せずに、ウェブページ上でビデオやオーディオを再生することができます。
グラフィックスとキャンバス
HTML5では、グラフィックスを描画するための新しい要素やAPIが追加されました。<canvas>要素を使用すると、JavaScriptを使って動的なグラフィックスやアニメーションを描画できます。
フォーム機能の強化
HTML5では、フォーム関連の要素や属性が拡張され、ユーザビリティが向上しました。新たな入力タイプ（例：date、email、range）、入力制約（例：required、pattern）、自動入力（例：autocomplete）などが導入されました。
オフライン対応
HTML5では、オフラインでの利用に特化した機能が追加されました。<appcache>要素を使用することで、ウェブアプリケーションをオフラインでも利用可能にすることができます。
レスポンシブデザインのサポート
HTML5では、ウェブページのレスポンシブデザインをサポートするための機能が強化されました。新たなセマンティック要素やメディアクエリ、柔軟な画像の対応などが追加され、異なるデバイスや画面サイズに対応したウェブページを作成することが容易になりました。
HTML5は、旧来のHTMLの機能を継承しながら、新たな要素や機能を追加しています。これにより、よりパワフルになりました。
<h1></h1>は見出し
<h1></h1>はページに1個だけです。<h2></h2>から<h6></h6>まであります。これらは何個使っても差しさわりありませんが、上位にいくにつれ少なくなるのが普通です。<h1><h2><h3>などの見出しレベルによって階層をもたせていました。
しかし、これではどこまでが一つのセクションであるのか、明確ではありません。ここで新要素「article」「section」です。これらを使うことによって階層を明確に示すことができるようになります。範囲を明確にするための要素です。
article 要素
この記事は独立したコンテンツなので、「article」で表現することができます。ブログ記事一覧ページなど複数の記事を表示している場合、その一つ一つの記事は独立したコンテンツであるため、これも「article」で表現できます。それだけで完結していることを示します。
section 要素
section を使うと、アウトラインの判別に見出しレベルが関係なくなります。これが入れ子関係を示しているので、見出しレベルがどうであってもアウトライン（セクションの構造）は変わらないのです。その範囲が章・節・項などであることを示します。
フッターを作成
Web ページの下部に作成します。
footer を作成しました。表示されました。
尚、「@2020 PC KATADA」の「＠」は「＆copy;」で表します。HTML5では「小さく書かれることが多い免責、警告、著作権などの補足的な内容を表す」ということから、small 要素にします。
<small>©2020 PC KATADA </small>
最後にもう一度ブラウザで確認してみます。
リンクを貼る
リンク先には「href」を使います。<a>タグで囲ってあげれば OK です。<a
href=”○○”>△△</a>となります。「target=”_blank”」を入れれば別のページで表示されます。MDN web docs には最新の情報が揃っています。
HTML の骨組みを学習しました。骨組みはボタンをクリックするだけで自動的に入力されます。ムダな労力を省くためですね。
あとがき
Web ページのデータはプロバイダ等が保有するサーバーというコンピュータに保存されています。世界中のサーバーは相互に結ばれており、世界中の Web ページが自由に閲覧できます。個人が Webページを開設したいばあいサーバー内に自分の領域を作成してもらいます。
Web ページを作成するときに記述する言語のひとつが HTML です。文字サイズや背景色など Web ページのデザインを設定するのが CSS です。
画像を挿入するには「.jpeg」「.ping」です。表を挿入するには「Table要素」を記述します。リンクには「リンク元」と「リンク先」があります。
CSS は文字サイズや背景など Web ページのデザインを設定するときに記述する言語のひとつです。CSS を記述すると、Web サイト内の Web ページのデザインをまとめて管理できます。
HTML のページにはさまざまなタグがあるので最初はまごつきますし、どんどん新しくなるのでこんがらがりますが基本はシンプルです。さああなたも Web サイトづくりに挑戦しましょう。
HTML/CSS について、悩みや疑問がありましたらご自由にコメント欄に投稿してください。（コメント欄はこの記事の最下部です）。いただいたコメントはすべて拝見し、真剣に回答させていただきます。
コメント