WEBデザイン授業9日目 - WEBデザインの学習法

今日から応用コースに入りました。初めての授業に比べてマークアップがスラスラと入力できるようになったと思います。CSSも同じようになるともっと楽しくなるんだろうなと思います。次回のCSSの授業もとても楽しみです。今日勉強した事をまとめました。

XML宣言を入力する

<?xml version="1.0" encoding="UTF-8"?>・・・・XML言語
IE6でレイアウトが崩れるのでいまの段階では削除しておきます。今後IE7以降は必須。

html要素には名前空間とlang属性を指定する

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
日本語は「ja」が規定されている。

文字コードとMIMEタイプを指定する

基準となるCSSとJavaScriptをあらかじめ指定する

キーワードを入力する

説明文を入力する

（例）
<?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="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5" />
<meta name="description" content="キーワード1〜サイトの説明文(検索結果に表示される)" />
<title>キーワード1｜Human Cafe</title>
<link href="css/import.css" rel="stylesheet" type="text/css" media="all" />
<script src="URL" type="text/javascript"></script>
</head>

検索ロボット対策

「robots.txt」というファイルによって検索エンジンロボットの巡回を制御します。制限をかけてダウンロードしないようにします。パーミションは 604 か 644 にします。

User-Agent: *

Disallow: /cgi-bin/・・・・フォルダーを指定する

Disallow: /password.html

スタイルシートのコンポーネント化

旧ブラウザにCSSを読み込ませない（IE4以前）

index.html

import.css

@charset "UTF-8";
@import "reset.css";（初期化）
@import "base.css";（視覚効果）
@import "ie7.css";（微調整のため）
@import "ie6.css";（微調整のため）

CSSをリセット

/* リセットスタイル */

　html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,

　address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {

　　　margin: 0;

　　　padding: 0;

　　　line-height: 1.0;

　　　font-family:

　　　　"ヒラギノ角ゴ Pro W3",

　　　　"Hiragino Kaku Gothic Pro",

　　　　"Hiragino Kaku Gothic Pro W3",

　　　　"メイリオ",

　　　　Meiryo,

　　　　Osaka,

　　　　"ＭＳ Ｐゴシック",

　　　　"MS P Gothic",

　　　　sans-serif;

　}

　table {

　　　border-collapse: collapse;

　　　border-spacing: 0;

　}

　ul li, ol li {

　　　list-style-type: none; /* マーカーを消す */

　}

　a {

　　　text-decoration: none; /* 下線を消す */

　}

　img {

　　　border: 0;

　}

　img, input {

　　　vertical-align: middle;

　}