アドバンド株式会社

Webの壁[担当者に必要な基礎知識/その②]基本構造

15.11.18
Webの壁[担当者に必要な基礎知識/その②]基本構造

HTMLで構成しCSSで見映えを指定。テキストとプログラム言語で画面を制御。

まず、Webの基本技術についておさらいしておきたい。

近年ではWebと呼ばれることの多い「www(World Wide Web)」は、世界中のサーバで公開されている情報をインターネット上で閲覧することができる仕組みのこと。クモの巣状に張り巡らされた地球規模のネットワークだ。

それぞれのWebサーバには住所があり、例えば当社であれば「http://adband.jp/」となる。インターネット利用者はそれぞれのブラウザにこのアドレス(住所)を入力し、Webサーバにアクセス。するとHTTPという共通の環境を通じて、サーバから送信されるテキストや画像、動画などのデータがウインドウに表示される仕組みとなっている。


Webサイトのページを記述するための言語をHTMLといい、これはテキストとタグで構成される。

開始タグと終了タグは目印となり、囲まれた要素に意味や役割が与えられる。

このHTMLだけでもWebサイトを作ることは可能だが、ここ数年はHTMLに加えCSSという手法を活用するのが一般的だ。

HTMLでWebサイトの基本構造を構築し、CSSで見た目や装飾などを指定するという流れで制作する。

例えば文字の大きさや行間の設定、色の指定、背景画像や囲み罫などデザイン装飾をルール化。同一のCSSを複数のWebページに読み込ませることで、統一感のあるデザインを効率的に制作できる。

また、HTML文書の各要素を、どんな幅・高さでどこに配置するかを指定することで、レイアウトを整えることも可能だ。

つまり、HTMLだけなら複雑な文書となり制作工程が非効率となってしまうが、CSSを併用すれば文書の構造を簡素化でき、しかも整ったデザインのWebサイトを容易に制作できる。もちろん修正にも楽に対応することが可能だ。


Webサイトで使われる画像の形式についても、簡単に述べておきたい。

画像には3つの形式がある。

ベタ面が多く色数の少ないロゴなどは「gif」形式、写真など色数の多いものは「jpg」形式
背景画像の上に、画像の一部を半透明にして配置する場合には「png」形式が使われる。

また、印刷物とは異なりWebサイトでは低解像度の画像(72dpi)で十分だ。
画像を軽くすることで、Webサーバへのアクセス時間を短縮できるからだ。

PointPoint

●記述言語はHTML、CSSで見た目や装飾を指定
●画像の形式はgif(ジフ)、jpg(ジェイペグ)、png(ピング)
●画像データを軽くすればWebサーバの負担が軽減

このエントリーをはてなブックマークに追加