Yasushi Noguchi Class
class resume organized by Y.Noguchi
a要素のhref属性の属性値を mailto:メールアドレス で指定すると、メールソフトが起動する。
<a href="mailto:abc@def.jp">メールを送る</a>
ウェブサーバの多くで使われているUNIXというシステムでは、WindowsやMacにおけるフォルダのことをディレクトリと呼ぶ。
まず始めに、以下のようなディレクトリのxhtmlページを作るとする。ここでは実際にページを作りながら考えていく。
images.zip
imagesフォルダの中
pagesフォルダの中
同じディレクトリの画像とのリンク
図のように、index.htmlと同じフォルダに、画像ファイル「google.gif」があり、これをindex.htmlに配置するときは、次のようにhtmlを書く。
<img src="google.gif"/>
別のディレクトリの画像とのリンク
次に、top.htmlと同じフォルダに「images」というフォルダがあり、この中に入っている画像ファイル「icon1.gif」をtop.htmlに配置することを考える。ここでは、フォルダを表す「/」という記号を使ってURL を記述する。
<img src="images/icon1.gif"/>
ひとつ上のディレクトリのファイルを指定する
次に、フォルダ「pages」にある「page1.html」から、ひとつ上の階層にあたるフォルダにある「google.gif」を読み込むことを考える。この場合は、一つ上の階層を表す特殊な記号「..」を使って
<img src="../google.gif"/>
と記述する。
ひとつ上のディレクトリの「images」フォルダの中のファイルを指定する
次に、フォルダ「pages」にある「page1.html」から、ひとつ上のディレクトリの「images」フォルダにある「art1.jpg」を読み込むことを考える。この場合は、以下のように記述する。
<img src="../images/art1.jpg" />
ディレクトリでファイル構成を整理する
このようにフォルダ（サーバ上ではディレクトリ）をまたいだファイルの読み込みやリンクが可能なので、複雑な構成を持つサイトを作る際には、内容のまとまりごとやファイルの種類などによってフォルダに整理しておくと、制作やメンテナンスの際にやりやすくなる。
以下がそのディレクトリ構造を図式化したもの。
サイトマップは、特に決まったフォーマットはないが、一般的には以下のようなツリー構造で作る。
一番気をつけなければいけない点は、「リンクの関係が分かりやすい」ということ。
通常、マップの見やすさを優先させるため、無意味に装飾的にはしない。書体もゴシック体などの一般的なものを使おう。
また、Adobe Illustratorなどを使用する場合には、グリッド機能を利用して、より効率的にマップを描くこと。
テンプレート
学生参考作品
以下のサンプルは、あくまで参考程度にとどめること。同じことをやらないように。極力、自己紹介をする際の自分の独自性を考えてサイトマップを作るように。
xhtmlでのコメントは以下の通り。
コードが長くなると煩雑になるので、まめにコメントをつけておく癖をつけよう。
<!– この部分がコメントです –>
グラフィックや写真などの画像はウェブにおいて重要な要素の一つである。ただし文字に比べるとデータ量が格段に多いので、webの場合は圧縮方法をうまく使い分けてできるだけデータ量を少なくする必要がある。Illustrator, Photoshopをベースに、さまざまな画像の圧縮方法と、画面構成イメージからの素材画像切り出しについてを中心に説明する。
ウェブで用いられる画像形式
ウェブでは、広く使われている形式としてGIFとJPEG、これから本格的な普及が見込まれる形式として PNG や SVG 形式がある。それぞれの形式は異なる圧縮方式を用いており、画像の種類によって向き不向きがある。
GIF
拡張子は .gif。扱える色数は 256色までで、透明色を1色指定することができる。ほとんどのブラウザがサポートしている。ベタ面の再現に向いているので、ロゴやボタン、アイコンなどのインタフェイスを構成するパーツによく使われている。
JPEG
拡張子は .jpgあるいは .jpeg。色数は約1677万色で、ほとんどのブラウザがサポートしている。写真などのように色数が多くグラデーションが多い画像に向いている。
PNG
拡張子は .png。GIFに変わる画像形式として開発されたもので、約280兆色まで再現でき、同じ画質でもGIFより小さいサイズまで圧縮できる。αチャンネルを持ち、半透明の画像をつくることができる。比較的新しいバージョンのブラウザでサポートされている。
DOCTYPE宣言とは、このxhtml文章がどのような形式で書かれているかを定義する部分。大きく分けてxhtmlとhtmlがあるが、今回はxhtmlを使用する。
XHTMLの場合
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
過渡的な規格で、「非推奨タグ」と言われるタグも利用できる。実際にはこのdoctype宣言が現時点では一番よく使われているので、今回は、このタグを使用する。
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
厳格に規格に沿ったxhtml。
XHTML 1.0 Frameset
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
フレームが使える。
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
より厳格なxhtmlの規格。<font> や <center> など、HTML4.01 で deprecated と指定されていた要素や属性が完全に廃止されている。現在はまださほど普及していない。
XHTML Basic 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML …
