基金訓練webデザイン講座6日目

基金訓練WEBデザイン授業内容

6月6日。
今日からついにスタイルシートに突入。
今日の講義は4時間がスタイルシート。

DTD(Document type Definition):文書型定義

HTML4.01 Transitionalの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>タイトル</title>
</head>
<body>
</body>
</html>
XHTML1.0 Transitionalの場合
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>タイトル</title>
</head>
<body>
</body>
</html>

XHTMLは、一行目にXML宣言を表記することが必須！
　→だけど、、、表記しない場合もある。

  • Win IE6の環境下ではレイアウトが崩れる。
  • 文字コードが「UTF-8」または「UTF-16」の場合はXML宣言自体を省略可。

でも、なるべく表記しましょう。

XHTMLはbodyの中に自分で作ったレイアウトができる→自由度が高い。

meta要素

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="ページの内容については3行程度で説明します" />
<meta name="keywords" content="キーワード１, キーワード2, キーワード3, キーワード4, キーワード5" />
<title>XHTML1.0 Transitionalの場合</title>
</head>
<body>
</body>
</html>
  • "Content-Type"、"Content-Style-Type"、"Content-Script-Type"の3つは表記する。
  • meta name="description"はページの内容について3行程度で説明。
  • meta name="keywords"は2011年時点では、記載無しの方向へ。書いても5つ位まで。

便利なサイト＆ツール

検索エンジンに検索させたくない場所

顧客データ等。
/robots.txt（index.htmlと同じ階層に置くだけ。）
例）http://www.amazon.co.jp/robots.txt

  • # Disallow all crawlers access to certain pages.→見せたくない。

でも、、見せたいページは、、

  • # Sitemap files→見せたい。このルートから入ってくれ。

最後の1時間はイラストレーター。
複合パスとクリッピングパス。

複合パス
  • Ctrl + 8
  • レイヤーが重なっている図形が同じ階層で一筆書きになる→データ軽い。（グルーピングではない！グルーピングをするとデータが重くなる。）
クリッピングパス
  • Ctrl + 7
その他