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