「よくわかるXHTMLとCSSによるWebサイト作成 (よくわかるトレーニングテキスト)」
を読んだので以下にいつものように、要約というかまとめというかを集約しておく。
本書は初心者でも学びやすくとっつきやすく、なにより「薄い」のでオススメである。
Webサイト作成の流れ
基本的なWebサイト作成の流れは以下のようになる。
１設計
２基本デザインの検討
３題材を準備
４作成
５転送
それぞれの工程について説明していく。
１設計
１目的
Webサイトの目的はアピール、価値の向上、情報の提供である。
２ターゲットの想定
年代、使い慣れてるか（情報量）、興味など、サイトのターゲットを具体化する
３WebサイトのWebページ構成
どのように組み立てるのかを前もって決める
４ファイル名の規則
ファイル名のつけかたも前もって決めておく
５画面サイズ
画面サイズを意識する（PCなら800×600や1024×768など）
基本デザインとしては以下を意識する。
・統一感
・アクセシビリティ（多くの人が使えるように設計すること）
・ユーザビリティ（ユーザーの使いやすさを上げる）
例：パンくずリスト、サイトマップ
２XHTMLの基本
XML宣言<? ?>
version = "XMLのバージョンを指定"
encording = "文字コードの指定"
文書型指定
W3Cによって公開されたXHTML1.0 Transitional DTDの仕様に基づいて記述されています
<!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">
言語の指定
<html xml: dir="ltr" lang="ja">
文字コードの指定
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
タイトル<tilte>
本文<body>
段落<p>
改行<br>
見出し<h1> ~ <h6>
強調<em>
より強い強調<strong>
署名<address>
Cマーク © 文字参照という。ほかの記号も文字参照で表す
画像 <img src="ファイルのパス" alt="代替テキスト"/>
サイズ指定 width="幅" height="高さ"
３CSSの基本
セレクタ スタイルを適用する対象
宣言 スタイルの属性を表すプロパティとその値を表す。{}
CSSファイルの関連付け
<meta http-equiv="Content-Style-Type" content="text/css">
<link />
スタイルの指定
文字の色 color:色
継承 親要素のスタイルは子要素に継承される
背景画像 background-image：url(背景画像)
background-repeat : 並べ方 repeat縦横、repeat-x横、repeat-y縦、no-repeatひとつだけ表示
font-size:サイズ
font-weight:太さ
行揃え text-align:
行間 line-height:高さ
ボックス
内容を囲む枠線 border
枠線の外側の余白 margin
内側の余白 padding
Webページ全体の余白 bodyにmargin,paddingを指定する
各要素間の余白は互いのマージンの大きいほうが採用される
全体の背景の色 background-color
文字の色 color
クラス名を用いて適用箇所を限定する
CSSでは .クラス名 HTMLでは class="クラス名"
グループ化してスタイルを指定 <div class=""> </div>
特定の文字列の指定 <span class="">
４リストと回りこみ
リスト
順不同リスト
<ul>リストを表す
<li>リスト項目
番号付きリスト<ol>
回り込み
float:位置
解除 clear:位置
行頭文字の種類
list-style-type:種類
list-style-image:画像
５表の利用
表を表す<table>
表の行<tr>
表のセル<td>
項目名のセル<tr>
枠線の太さ border="太さ"
表のタイトル<caption>
表の要約 summary="要約"
スタイル
表全体のスタイル border-collapse:表示形式
６リンクの利用
リンク リンク先とリンク元はアンカーと呼ぶ
アンカー <a>
リンク先 href="リンク先"
