Webサイト用ファイルの準備作業のポイント

Webサイトで扱うファイルの整理の仕方の基本ルール

  • HTML文書のひな形と原稿は別々に用意する
  • ページごとにフォルダ(ディレクトリ)にまとめて管理する
  • 関連ファイルも種類ごとにフォルダで区分けして管理する
  • ファイル名は半角英数でつけ、特殊な記号は使用しない
  • HTMLファイルではなく、フォルダにコンテンツ名をつける(関連ページや画像などを格納できるため)

Webサイトで使われる3つの画像形式

Webサイトで利用される画像形式はJPEG(JPG)、GIFPINGの3つが代表。それぞれは主な特徴は以下のとおり。

画像形式の種類と特徴
形式 JPG GIF PNG-8 PNG-24
色数 約1670万色 256色 256色 約1670万色
透明 扱えない 扱える 扱える 扱える
適しているもの

写真

色数の多いもの

ロゴマーク

色数の少ないイラスト
ロゴマーク

色数の少ないイラスト
複雑な透明・半透明画像

画質を優先するもの

画像の作成や加工にはAdobePhotoshopIllustratorがよく利用される。Photoshopピクセル(pixel)*1ベースの素材を作成するのに適しているとされ、Illustratorベクターvector)形式*2の画像作成に利用される。

*1:picture elementからの合成語で、画素ともいう。コンピュータの画面を映し出す小さな正方形の、およびその集まり。ピクセルで描かれた画像を「ラスター」「ビットマップ」とも呼ぶ。

*2:座標を指定した2点(アンカー)の間を、計算式によって直線や曲線として描いた画像。ピクセルが直接点を描画するのに対して、ベクターは点と点との関係を画像として表示する。

Webサイトの基礎知識まとめ

ごくごく基本的な事項を箇条書きでまとめます。

  • Webサイトは複数のWebページで構成されている
  • WebページはHTML文書というテキストファイルでできている
  • Webページはそれぞれハイパーリンクで文書間を行き来できる
  • HTML(Hyper Text Markup Language)はWebページを作るためのマークアップ言語
  • マークアップとは文章に目印をつける=テキストに目印を付けて意味を与える作業のこと
  • HTMLのバージョンはHTML5が主流になってきている
  • HTML文書の見栄え(装飾やレイアウト制御)はCSS(Cascading Style Sheet)が担う
  • Cascading=階段上の滝のような、連鎖的なといった意味で、「継承」という特性を意味する
  • CSSは一度描画した色や文字のスタイルをあとから書き換えた要素に適用できる
  • CSS2.1とCSS3が積極的に使われている