LogoMark.png

WebDesign/Basics のバックアップ(No.1)


Webサイト制作の基本


MENU


はじめに

情報公開の様々なかたち

このページの記事は、HTML+CSS+JavaScriptによる一般的なWebサイトの制作に関する入門的な内容になっています。情報発信がしたいというだけであれば、HTML等の知識がなくとも簡単で綺麗なWebサイトを持つ方法は多数あります。まずは、Webサイトを持つにはいろんな方法があるということを確認しておいて下さい(「こういうサービスがあるのであれば、HTMLを学ぶ必要はなかった・・」というケースも多々あります)。

制作に関わる様々なツール

Webサイトは HTML, CSS, JavaScript といった言語で制作するので、基本的にはテキストエディタさえあればいいのですが、Webデザインの全工程を視野に入れると、様々なタイプのツールがあります。




サイト制作に関わる基本概念

WebページとWebサイト

Webページとは、HTML(Hyper Text Markup Language)という言語で書かれたひとつの文書で、拡張子 .html のファイルとして存在するものです。そこには、見出しや文章、また画像などが掲載されるとともに、他のページへのリンクなども設定されています。Hyper Text の文字通り、従来の文書の枠を超えたインタラクティブなページです。

folder.jpg

一方、Webサイトというのは、一般に複数のWebページがセットになった情報の集合体で、PC上では、ひとつのディレクトリ(フォルダ)として存在するものです(右図)。

RepositoryImage03.png

WebサーバーGitHub にアップする場合、このフォルダの中身を位置関係(相対的な関係)を変えずに まるごとアップロードします。右図は、GitHub にWebサイト用のリポジトリを作成して、そこにファイル群をアップロードした場合のイメージです。

Webサイトを制作する場合は、まずはじめにWebサイト用のフォルダを作成して、関係するファイルを一定のルールで整理しましょう。制作の途中で、ファイル名を変えたり、それらの位置関係を変えたりすると「リンク切れ」となってしまいます。ファイル群は、常にひとまとめにして扱うようにして下さい。

フォルダ名やファイル名について

Illustrator や Photoshop での作業とは異なり、Webのデータはインターネット上、すなわり様々なコンピュータを渡り歩くので、フォルダやファイルの管理では、それ特有の注意が必要です。


情報量を表す単位記号について

情報量を表す単位記号は1000倍(0が3つ)単位で大きくなります。
n(ナノ), μ(マイクロ), m(ミリ) ←→ K(キロ), M(メガ), G(ギガ), T(テラ)

ITの分野では 2^10=1024 を基準にしますが、ここではふつうに、1000KB(キロバイト)= 1MB(メガバイト)と考えて問題ありません。

文字について

Webサイトの制作にあたっては、文字コードについての知識と、フォントについての知識が必要です。


色について

Webサイトの文字や背景の色には、RGB値を16進数で表す16進トリプレット、あるいは、red やgreen といった直接的な名称で指定する X11 Colors を利用して指定します。

配色等については右のページをご覧下さい。> WebDesign/Color


サイズの単位について

Webサイト上の大きさを指定するには、画面サイズに対して最も直接的な pxの他に、%、em、rem といった単位が存在します。


画像について

画像を掲載については、サイズと圧縮形式についての基礎知識が必要です。


その他のメディアについて

Webページには、画像のみならず、音声や動画を掲載することもできます。ただ画像とは異なり、以下の点に配慮が必要です。


付記:過去にサイト制作の経験のある方へ

Webの常識は日々変化しています。 以下、ご確認下さい。




試作体験

Webサイトというものがコンピュータ上に、どのような形で存在するのか、実際にフォルダやファイルを作って体験してみましょう。

PCの環境設定

開発系の作業ではファイルの拡張子を理解して扱うことが必要になります。WindowsもMacもデフォルトでは素人モード。初心者がそれを勝手に書き換えてアクセスできなくならないように、あえて表示しない仕様になっていますので、ここからはプロモードへ。すべてのファイルの拡張子を表示して作業をするようにして下さい(当然それなりのリスクは発生します)。


必要なツール(ソフトウエア)の準備

Webサイトの制作には大きく3つのソフトウエア、すなわち
作るソフト、見るソフト、転送するソフトが必要です。

基本的にすべてフリーソフトウエアで事足ります。それぞれ準備して下さい。

Dreamweaver、ホームページビルダーなどのオーサリングソフト(ワープロ感覚で作成したページからHTMLを自動生成するソフト)を利用することで、能率を上げることもできますが、これらは必須というわけではありません。初心者の方がこれらを使うと、かえって混乱することがありますので、まずはテキストエディタで「タグ打ち」することをお勧めします。


Webサイト開発用のフォルダを準備する

トップページを作成・保存する

<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="UTF-8">
       <title>Sample Page</title>
    </head>
    <body>
        <h1>見出し</h1>
        <p>
          本文|適当に文章を書いて下さい。
        </p>
    </body>
</html>

トップページ = index.html というのが、Webの「お約束」です。

動作確認

ページをブラウザで表示。またHTMLを書き換えて動作を確認します。

別のページをつくってリンクする

Webサイトは、トップページ、アバウト(このサイトについて)、ギャラリー、リンク集など、内容の異なる複数のページのセットからなるのが普通で、それらは相互にリンクすることで、サイト内のページを自由に行き来できることが必要です。一般に、雛形となるページを複製してから、必要箇所を書き換える という手順でページを増やします。

ページに画像を掲載する

画像をページに掲載するには、以下のようにします。 詳細はこちら

補足「リンク配置」について
HTML 自体は単なるテキストファイルで、画像そのものを含むことはできません。HTMLは画像データがどこに存在するか、その場所(リンク情報)を覚えているだけです。したがって、常にHTMLから見て同じ位置に配置すべき画像データが存在している必要があります。「HTMLと画像は常にセットで持ち運ぶ必要がある」ということです。

とりあえずここまでで、Webサイトを構成するファイルがこのような形で管理されるのだということが理解できれば、初歩の体験としてはOKです。

サイトの開発とバックアップについて

SiteBackup.png

Webサイトなどのソースコードは、開発の過程で必要の都度バックアップを取るのが普通です。実務では Git / GitHub 等でバージョン管理を行いますが、大学での実習では、とりあえず、フォルダごとバックアップをとることをお勧めします。




よくある質問

本格的な作業では、こちらをご一読下さい。