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