Web（ウェブ）とは
World Wide Webの略で、インターネット上で提供されるさまざまな情報（文字、画像、動画…）を公開する仕組みのこと。ハイパーテキスト。1989年にティム・バーナーズ＝リーによって発明されました。
インターネットとは
地球規模の情報通信網のこと。1995年頃、Windows 95の登場とともに、一般に普及。
インターネットとWWWによって、誰もが世界中に情報発信できる環境が整いました。
世界最初のWebサイト
1991年、CERN（欧州原子核研究機構）のWebサーバ上で世界最初のウェブサイトが公開。再現されたものが現在も閲覧できます。自分のウェブページをつくるための技術的な詳細などが書かれています。
日本最初のホームページは、1992年発表。高エネルギー加速器研究機構 計算科学センターの森田洋平博士によって発信されました。
Webデザインとは
- 狭義では…Webサイト（ページ）のデザイン
- 広義では…Web上でやりとりされるあらゆる情報をデザイン
- Webデザインには、グラフィックデザイン、情報デザイン、工業デザイン（プロダクト）の要素も含まれる
印刷メディアとWebメディア
印刷メディアと比較した場合、Webメディアには一般的に次のような特徴があります。
▼印刷
- 作成されたものと同じサイズ、同じ状態で流通する
- 基本、一度印刷されたら、同じ情報のまま
▼Web
- サイズが変わる、可変である
- 同じ端末でもブラウザ（閲覧用ソフトウェア）によって表示が異なる
- 色…ディスプレイによる
- 画質…ディスプレイによる
- 書体…端末（コンピュータ、スマホ）に入っている書体で読み込まれる（Webフォントを指定しない場合）
- 定期的に更新し、新しい情報を追加できる
Webでの情報公開
授業では、HTML・CSS・Javascriptといった基本技術で作るWeb制作に触れていきますが、情報発信をするという目的であれば、アカウント取得のみでWebでの情報発信ができるサービスも多々あります。
…など
※wordpressは、サーバーインストール型もありますが、上記はアカウント取得のみで使えるサービスです
WebサイトとWebページ
Webサイト（ページ）のデータ
Webページは、コンピュータ、サーバー上では、htmlファイルとして存在。拡張子は、html（例：○○○.html）
※拡張子：ファイルの末尾にある文字列。ファイルの種類を区別するためのもの。.psd、.docx、.txtなど。
Webサイトは、htmlファイル、cssファイル、画像ファイルなど一連のファイルがひとまとめになったもの。コンピュータ上では、フォルダにまとめる。
HTML（Hyper Text Markup Language）
- Webページを作成するために開発された言語
- 「タグ」を使ってWebページの構造を定義する
CSS（Cascading Style Sheets）
- ウェブページのスタイルを指定するための言語
- 色、線、背景、配置、書体…などの指定
JavaScript
- Webブラウザ上で動くプログラミング言語の一つ
- HTML、CSSで作成したWebページに動的な処理を加えることができる
- 動的…閲覧者の操作入力などによって変化させる効果
フォルダ名やファイル名について
▼名前の付け方
半角英数字、記号はハイフン（-）とアンダーバー（アンダースコア）（_）を使います。
ファイル名は原則小文字。単語の区切りに記号を用いて、image_01.jpg のように表記します。
index.htmlという名前は特別で、フォルダ内にindex.htmlというファイルが存在している場合、最も優先的に読み込まれることから、通常トップページ（ホーム）用のファイルはindex.htmlと命名します。
▼ファイルの保存
エディタでは、初期設定では、ファイルの種類が自動的に設定されないか、あるいは、テキストファイル（.txt）になります。
※Visual Studio Codeでは、新規作成時にファイルの種類を選びます
HTMLファイルとして保存するには、自分で拡張子を .html と記述します。
（例：index.html）
文字
コンピュータ上では、文字はデータとして扱われるが、1文字ずつ固有の番号があり区別されるようになっている（=文字コード）
文字コードは、UTF-8 を使うことが一般的です。
フォントについては、基本的に、閲覧者の環境に依存しますが、Webフォントという仕組みを使うことで、指定したフォントで表示することができます。
単位
webは、画面上で閲覧するメディアのため、画面上のサイズを表す単位が使われます。
- px（ピクセル） 画面上の点を表す単位。例：100px × 100px
- % 割合で指定する。親要素に対する比率。
- em（エム） 文字の高さで指定する（初期設定では、16px=1em）親要素に対する比率。
- rem（レム） root+emのこと ルート（HTML要素）の大きさを基準にする
※HTMLにおける親子関係については、後の授業で補足します
色
Webサイトの文字や背景の色には、RGB値を16進数で表す方法と、redやgreenといった名称で指定する方法があります。
※RGB…光の三原色。Red 赤、Green 緑、Blue 青。
▼16進数による指定
RGB値を2桁ずつ、00〜FF（0〜255）で指定する
※16進数…0〜9, A〜Fで表す。16になると次の位になる。
例：
#FFFFFF（255,255,255）…白
#000000（0,0,0）…黒
#FF0000（255,0,0）…赤
▼色名による指定
redや、blueといった一般的な色のほか、使用できる色名が決められています。
※10進数による指定もあります。透明度も設定できるので、半透明の表現をしたいときに使います
rgba(0, 0, 0, .5)
a…アルファチャンネル（=透明度）
画像
スマートフォンやデジカメで撮影したそのままの画像を使うのではなく、使用する大きさに合わせて、適切に調整した上で掲載します。
Webに使う画像には次のようなものがあります
- JPEG（.jpg）通常、写真に用いる（圧縮率が高くフルカラーを扱える）
- PNG（.png）256色以下またはフルカラー。半透明（アルファチャンネル）も扱える。アニメーションも可能（APNG）
- SVG（.svg）Illustratorのパスのようなベクター画像。拡大しても劣化しない。
- GIF（.gif）色数の少ない画像に向いている（256色以下）、色の透過やアニメーションが可能
- WebP（.webp）Googleが開発した軽量な画像データフォーマット。現在は主要ブラウザが対応。https://caniuse.com/?search=webp
※Illustrator形式（.ai）や、Photoshop形式（.psd）など、ソフトに依存する形式の画像や、iPhoneで撮影した写真フォーマット（.heic）は、そのままでは掲載できないため、上記のようなWeb用データに変換して使います
参考：https://rs.sakura.ad.jp/column/rs/image-format/
その他のメディア
- 音声
- 動画