読者です 読者をやめる 読者になる 読者になる

自由人たぬきちのブログ

地方×都会のデュアルライフとシンプルライフを実践する、兼業投資家のたぬきちだよ

XHTMLとCSSによるWebサイト作成要約まとめ! - コーディングによるサイト作成の初心者第一歩!

IT 書評

 

 「よくわかるXHTMLとCSSによるWebサイト作成 (よくわかるトレーニングテキスト)」

を読んだので以下にいつものように、要約というかまとめというかを集約しておく。

本書は初心者でも学びやすくとっつきやすく、なにより「薄い」のでオススメである。

 

Webサイト作成の流れ

基本的なWebサイト作成の流れは以下のようになる。

1設計

2基本デザインの検討

3題材を準備

4作成

5転送

 それぞれの工程について説明していく。


1設計

 1目的

  Webサイトの目的はアピール、価値の向上、情報の提供である。

 2ターゲットの想定      

  年代、使い慣れてるか(情報量)、興味など、サイトのターゲットを具体化する
 3WebサイトのWebページ構成 

  どのように組み立てるのかを前もって決める
 4ファイル名の規則

  ファイル名のつけかたも前もって決めておく
 5画面サイズ 

  画面サイズを意識する(PCなら800×600や1024×768など)

 基本デザインとしては以下を意識する。
 ・統一感
 ・アクセシビリティ(多くの人が使えるように設計すること)
 ・ユーザビリティ(ユーザーの使いやすさを上げる)
  例:パンくずリスト、サイトマップ


2XHTMLの基本

 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マーク &copy; 文字参照という。ほかの記号も文字参照で表す
 画像 <img src="ファイルのパス" alt="代替テキスト"/>
 サイズ指定 width="幅" height="高さ"

3CSSの基本

 セレクタ スタイルを適用する対象
 宣言   スタイルの属性を表すプロパティとその値を表す。{}

 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="">


4リストと回りこみ

 リスト
  順不同リスト
   <ul>リストを表す
   <li>リスト項目
  番号付きリスト<ol>
 回り込み 
  float:位置
  解除 clear:位置
 行頭文字の種類
  list-style-type:種類
  list-style-image:画像


5表の利用

 表を表す<table>
 表の行<tr>
 表のセル<td>
 項目名のセル<tr>
 枠線の太さ border="太さ"
 表のタイトル<caption>
 表の要約 summary="要約"
 スタイル
 表全体のスタイル border-collapse:表示形式


6リンクの利用

 リンク リンク先とリンク元はアンカーと呼ぶ
 アンカー <a>
 リンク先 href="リンク先"