画像展示サイト“Fragments” 『閲覧しやすさ』と『デザイン性』を両立させた Webデザイン 北海道情報大学 情報メディア学部 情報メディア学科 新井山ゼミ 0321003 芦原 建
前回までの成果 ページのタグ構造の推敲 HTML Checkerを使用 減点部分の洗い出し 一つずつ修正 一部を除き80点近くまで推敲
今回までの進捗状況 作品の追加 リンクページの“target”記述の誤りを修正 × target=“blank”
今回の内容 HTML-Checkerで減点された箇所を一部解説 ①HEAD部分でタグの挿入位置の間違い ②スタイルシートに関するMETAタグを未記入 ③CSSの同じIDを１ページ内に複数使用 ④<img>タグにALT属性を不使用 ⑤<body>タグ直下に記述してはいけないタグが存在 ⑥<BR>タグの連続した使用 ⑦ALTやTITLEで<・>を使用せずに<>を直接使用
減点① タグの挿入位置 <META>タグ 記述することでHTMLファイルに機能を付加 <HEAD>タグ内に挿入 文字コード指定 自動ジャンプ ページの再描写 …Etc <HEAD>タグ内に挿入 ▼ <head>タグの外に挿入されていたため減点された ←<head>タグ
減点① タグの挿入位置 (2) <LINK>タグ 記述したHTMLファイルに外部文書を読み込む CSSファイル JavaScriptファイル …Etc <META>同様<HEAD>タグ内に挿入 ▼ <head>タグの外に挿入されていたため減点された
減点② スタイルシートに関するMETAタグ スタイルシートの基準言語を指定するタグ <meta http-equiv="Content-Style-Type" content="text/css"> スタイルシートを使用する際は記述が推奨 ▼記述していなかったため減点された (別に入れなくても問題はないらしい)
減点③ CSSの記述 “ID”と“class” ▼IDの場合 <HEAD>タグ内にCSSを記述する際に使用 <body>以下の目的のタグに “id（又はclass）=“（名前）”” と記述してCSSを適用 ▼IDの場合 ▼IDの場合、名前の手前に“#”を入れる (Classの時は“ . ”) ←名前 ▲ CSSの中身を適用するタグ (書かなければどのタグにも 適用可能)
減点③ CSSの記述 “ID”と“Class”の違い ID Class そのページ内で一つの部分だけに指定する際に使用 何度も繰り返し使う場合に使用 ←メニュー部分のリンクのCSS 各項目に使用するのにIDで記述 ▲結果、このように項目全てに １つの“ID”を使い回したため減点
減点④ ALT属性の不使用 ALT属性 <img>タグ内に使用 画像が表示されない場合に 替わりに表示する文章を指定 例：<img src=“xxx.jpg” ALT=“画像です”> <img>タグを使用する際は必要とされている <img src=“xxx.jpg”> ▲こういう場合は減点される
減点⑤ <!DOCTYPE>宣言によるレイアウトの規定 HTMLの“仕様”を宣言し、ブラウザに通知 HTML4.01 Strict HTML4.01 Transitional …Etc
減点⑤ <!DOCTYPE>宣言によるレイアウトの規定 今回は“HTML4.01 Strict”を適用 ブラウザ間でのCSSの解釈の違いによる 表示の崩れを予防 レイアウト面で厳しい規定が適用 “ブロックレベル要素(<p>など)”と “インライン要素(<br>や<img>)” <body>直下にインライン要素の記述は減点 必ず全文をブロックレベル要素で区切る
減点⑤ <!DOCTYPE>宣言によるレイアウトの規定 index.html (入口) このページでのみ 減点が行われた 修正前のページは、 <body>直下に 直接インライン要素を 記入していた <body>タグ内全文を <p>で囲むことで解決
減点⑥ <BR>タグの連続使用 文章の改行に使用 行間にスペースが出来るため、 文章の整形目的に使われる事があるが、 これは減点対象 一部のブラウザが連続した<BR>を １つに纏めてしまうため 重要度が低いので、無視
減点⑦ 文章としての“<,>”の記述 文章内での“<,>” 直接“<,>”と入れると、 本物のタグと誤読される可能性がある 文章内では別の文字列で記述 “<”＝“<” “>”＝“>” 作品ページの解説文内で、 “<title></title>”と直接記述したため、減点
開発成果 HTMLの文章推敲がほぼ終了 記述面でのクオリティアップ
評価 HTML記述面での死角を大きく払拭 ブラウザ間での表示の安定 記述の正確さの向上
考察 記述における初歩的なミスの重要性と危険性 Internet Explorer タグの挿入位置の間違い 記述方法の間違い 記述忘れ 誤字脱字 …Etc Internet Explorer 多少の記述ミスを自己解釈でカバー
今後の課題 WDC提出用の ブログ・掲示板の張りぼての制作 ブログ・CGI掲示板のデザインをHTML・CSSのみで実践 夏休み中を利用して制作
夏休み明けまでの成果誓約 現在レンタルしているブログ・掲示板の 張りぼて版制作