INDEX
目次
本章では、これからHTML/CSS入門編の学習をスタートするにあたり、はじめに知っておいて頂きたいこと、事前に準備しておいて頂きたいことを解説していきます。
【0-1】Webページとは
WebページとはHTMLファイルのこと
■ ブラウザで表示したWebページ
■ 中身はこのようなHTMLのコードでつくられている
- 私たちが普段、PCやタブレット、スマートフォンなどで閲覧している、インターネット上の文書のことを Webページと呼びます。
- 一般的には、法人や団体、店舗、個人が運営しているWebサイト内の1ページ1ページのことを、そう呼んでいます。
- このWebページの最も大きな特徴は、紙の書物とは異なり、 ハイパーリンク（単に「リンク」と呼ぶこともあります）という、現在のページから別のページへ遷移できる機能を持っている点にあります。
- また、Webページには、テキストを表示することだけでなく、画像、動画ファイルなどを表示することもできます。
- Webページを作成するために使用する言語を HTML（Hyper Text Markup Language）といいます。
- HTMLを使って記述された文書のことを、 HTMLファイルと呼びます。
- 要するに、WebページとはHTMLファイルのことであると、まずは理解しておいて頂きたいと思います。
Webサイトとは？
- Webページとは、前述したようにインターネット上で公開される1枚のHTMLファイルのことですが、関連する用語にWebサイトという言葉があります。
- Webサイトとは、複数のWebページから構成される1つのまとまりを持った情報の集合体のことです。
- 例えば、企業のWebサイトといえば、トップページ、会社情報ページ、事業内容ページ、採用情報ページ、お問い合わせページなどから構成されており、各ページが連携して機能する情報全体のことを指すと考えます。
Webページは3種類の言語でつくられている
- 一般的なWebサイトはHTMLのみで作られているわけではありません。
- 通常のWebサイトの目に見える部分は、 HTML、CSS、JavaScriptの3種類の言語を使用して作ることが一般的です。
- それぞれの言語の役割は以下のとおりです。
HTML
Hyper Text Markup Languageの略。
- 画像や見出し、段落テキスト、リンクなどのページのベースとなる 情報を構造化するために使用する言語です。
- HTMLファイルはHTMLタグと呼ばれる 「<>（ヤマカッコ）」で囲まれた単語を用いて作成します。
- これがWebページの土台（ベース）となります。
■ HTMLのコード
■ HTMLのみのブラウザ表示
CSS
Cascading Style Sheetsの略。スタイルシートとも呼ばれます。
- 文字のサイズや色、その他の装飾、レイアウトなどの Webページのスタイリングのために使用する言語です。
- デザインやレイアウトなどのWebページの外観は、CSSによって設定します。
■ CSSのコード
■ CSSによってスタイリングされたHTMLのブラウザ表示
JavaScript
アニメーションや、フォームの入力内容に基づいたメッセージの表示など、ユーザーの操作や特定の条件に応じて動的でインタラクティブに反応するコンテンツを作成するために使用する言語です。
- JavaScriptの記述をより簡潔にするためのライブラリも存在します。
- 代表的なものにjQueryがあり、過去に作られた多くのWebサイトで利用されています。
■ jQueryのコード
言語の種類によって上記のような役割の違いがあり、これらを組み合わせて一つのWebサイトを作り上げていきます。
【0-2】ブラウザとは
Webページの制作は、ブラウザで表示確認をしながら進めていきます。
- ブラウザとは、私たちが普段、Webページを表示・操作する際に利用しているソフトウェアのことで、Google Chrome、Firefox、Safari、Microsoft Edge、Operaなど、主要ブラウザと呼ばれるものが数種類あります。
- 各ブラウザにはそれぞれ独自の機能と特徴があり、Web制作者や一般ユーザーのニーズに応じて選ばれます。
ブラウザの役割
Web制作者にとって重要なブラウザの機能
- HTMLの解析
- CSSの適用
- JavaScriptの実行
- Webページの表示・操作をするためのインターフェースを、Web制作者や一般ユーザーに提供することがブラウザの役割です。
- ブラウザは、HTML、CSS、JavaScript を解析し、その結果を描画・実行するソフトです。
- Webページの制作者は、これらの3つの言語をブラウザが解釈できるように記述します。
主要ブラウザの特徴
Web制作においては、前述した主要ブラウザでWebページの表示や動作などの互換性の確認を行いながら制作を行います。
各ブラウザの特徴は以下のとおりです。
各ブラウザの特徴は以下のとおりです。
Google Chrome
Google Chromeの特徴
- もっとも広く使われているブラウザ
- 高速なページ読み込み、シンプルで直感的なインターフェース
- 豊富な拡張機能とプラグイン
- Web開発者向けの強力なデベロッパーツールが組み込まれている
※本教材ではGoogle Chromeを使用しますので、お使いのPCにインストールしておきましょう。
ダウンロードページURL :https://www.google.com/intl/ja_jp/chrome/
ダウンロードページURL :https://www.google.com/intl/ja_jp/chrome/
Safari
Safariの特徴
- Appleユーザーに最適化されたブラウザ
- エネルギー効率が良く、バッテリー消費が少ない
- シンプルでエレガントなデザイン
【0-3】レッスンを始める前に準備するもの
HTMLとCSSの学習を開始するにあたり最低限必要なソフトウェアは、ブラウザとテキストエディタです。自分のPCに事前にインストールしておきましょう。
ブラウザ
本教材では表示確認用のブラウザとして
Google Chromeを使用します。
まだインストールしていない場合は、下記URLからダウンロードしてインストールしておいてください。
ダウンロードページURL : https://www.google.com/intl/ja_jp/chrome/
テキストエディタ（VSCode）
Webページを作成するための言語であるHTML、CSS、JavaScriptのソースコードは、 テキストエディタと呼ばれる文字の入力と編集に特化したソフトウェアを使い記述します。
- MacやWindowsに標準搭載されているテキストエディットやメモ帳などのエディタを使って記述することは不可能ではありませんが、 Web制作に関しては、入力ミスを見つけにくいなどの短所が目立ちますので、あまりおすすめはしません。
- 入力補助機能のほか、さまざまな便利な機能が利用できるWeb開発専用のエディタを使った方が、 はるかに効率良く学習していけますので、こちらもインストールしておきましょう。
- 本教材では、 Visual Studio Code（以降は VS Codeと記載）という現在のWeb開発で世界中のプロフェッショナルに利用されている高機能なテキストエディタ（無料）を使用します。
- HTML、CSS、JavaScriptによるWebページ制作には、大変使いやすいテキストエディタです。
- 下記ダウンロードページからダウンロードして、事前に自分のPCにインストールしておいてください。
ダウンロードページURL : https://code.visualstudio.com/download
【0-4】HTML/CSS 入門編 演習素材のダウンロード
HTML/CSS入門編の学習を開始するにあたり、下記リンクから全章の演習データをまとめてダウンロードしてください。
HTMLやCSS はそれほど難しい言語ではありません。基本的な書式や単語をあらかじめ覚えることで、その後の学習がスムーズに進みます。
まずは「HTML/CSS入門編 1章 HTML文書を作成しよう」で、簡単なHTMLファイルを作成するところから学習をはじめてみましょう！
まずは「HTML/CSS入門編 1章 HTML文書を作成しよう」で、簡単なHTMLファイルを作成するところから学習をはじめてみましょう！
これで「HTML/CSS入門編 はじめに - Webページのことを知ろう」の解説を終わります。
次の章に進みましょう。
次の章に進みましょう。