こんにちは！
きょうは自分が勉強してきたものの中から1つ、XHTML ＆ CSS について掲載していこうと思います。
まずはXHTMLについて。
WebページはXHTMLやデザインを指定したCSS、画像ファイル、音声ファイル等複数のファイルから構成されています。
今回はそれらの構成についてやっていきます。
Webサイトの構成について
Webサイトを公開する場合通常は複数のページをまとめて公開します。
それぞれのページを Webページ まとまった単位を Webサイトといいます。
Webページの公開と閲覧について
１WWWサーバー
Webページのデータを管理しているコンピュータのことを
wwwサーバ または Webサーバといいます。
ユーザーはこのWWWサーバにアクセスすることで、
Webページを自由に閲覧ができます。
Webページが完成したらWWWサーバにWebページを転送。WWWサーバ内にデータが転送されると世界中からアクセスできる状態になります。
URL（Uniform Resource Locator)
URL（Uniform Resource Locator)は、インターネット上の情報の場所（アドレス）デス。
身近なものに例えると住所にあたりますね。
基本的にURLは半角英数字や記号で表されます。
ここで、URLの例を
http://www.fom.co.jp/goods//index.html
上のURLについて説明していきます
http: プロトコル コンピューター同士が通信するときの転送方法の規則・手順
ｗｗｗ WWWサーバ名 アクセスするWWWサーバの名前
fom. 組織名 会社名や団体など組織名
co. 組織種別 組織の種類
jp 国別コード 国名
⁂米国には国別コードはない
goods//index.html パス ファイルの位置
では、Webサイト作成の流れを確認してみましょう。
1 Webサイトの開設の準備をする。
↓
2 Webサイトを設計する
↓
3 Webサイトの基本デザインを検討する
↓
4 Webサイトの題材を準備する
↓
5 Webページを作成する
↓
6 Webページを転送する
とこんな感じです。
Webサイトの開設の準備をする
ウェブサイトを開設するためには、公開する場所を決めなくてはいけません。
公開する場所は次の3つがあります。
プロバイダー
自社サーバ
プロバイダー
プロバイダーのウェブサイト開設サービスを利用する方法です。
プロバイダーによっては使用する際に制限があったり、WWWサーバへのデータ保存容量が少なかったりアクセス速度が遅かったりします。
独自のドメインを取得できるプロバイダーもあります。
個人ユーザーのウェブサイト公開する場所として主に利用されます。
レンタルサーバ
レンタルサーバ とはWWWサーバの領域を貸し出すサービス。
オンラインショップで使う注文フォームやショッピングカートが利用できます。
また、プロバイダーに比べて大容量のデータを保存できます。
レンタルサーバでは、独自のドメインを取得できる場合が多いので、主に企業や団体などのウェブサイトを公開する場所として利用されます。
自社サーバ
自社サーバとは、企業が自分で構築したwwwサーバのことです。
専門業者に頼らず自分でサーバーや回線を準備するには費用や手間がかかります。
大きな企業では、システム管理者を養成してwwwサーバを構築し運営しています。
自社で管理してるので自社にあった柔軟な対応・設定ができます。
Webサイトを設計
そもそもWebサイトを何のために設計するのかを明確にすることが重要ですね。
例えば
企業のアピール 企業価値の向上
売り上げを伸ばすため
経費削減・業務の効率化 ＜--- ここが一番でかいんじゃないかなぁ？
次に重要なのは 誰に向けてのWebサイトなのかということｗｗｗ
ターゲットですね。
そして最後にWebページトップページだけではないはずです。
Webページのつながりを紙に書き出してみるといいかもしれません。
ファイル名の規則
ファイル名や拡張子の付け方を決めます。
wwwサーバによっては、日本語のファイル名を正しく認識できなかったり、アルファベットの大小を区別したりするので、ファイル名は英数字の組み合わせで小文字にします。
環境によっては8文字を超えたファイル名は正しく認識できない場合があります。
ファイル名は半角8文字以内で設定するとよいでしょう。
ファイル名はファイルの内容に合わせて識別しやすいようにします。
Webサイト内で規則性を持たせて名前の付け方を統一しておくと管理しやすいかも？
拡張子がいくつもあるものはWebサイト内でどちらかに統一しておきましょう。
画面サイズ
Webページの表示はディスプレイの解像度によって異なります。
基本の画面サイズでどんな人が見ても見やすいWebページを作成できるようにできるといいですねｗｗｗ（個人的希望( ´艸｀)）
Webサイトの基本デザインを検討
Webサイトのデザインで重要な点は統一感を持たせることです。
統一感のあるデザインを作成するには、CSSを使います。
統一感のあるデザインで作成したWebサイトの利点。
メニュの位置や配色などを統一すると、ユーザーは短時間でそのWebサイトの操作を学習し、ストレスを感じることなくスムーズに情報を閲覧できるようになる。
企業のロゴを使ってデザインを統一すると、企業の印象を残すことにつながります。
Webサイト管理者にとっては統一感のあるデザインはメンテナンスが容易になります。
アクセシビリティ・ユーザビリティ
誰もが使いやすいWebサイトを作成するにはアクセシビリティとユーザビリティに配慮する必要があります。
アクセシビリティ
高齢者や障害者など含むできる限り多くの人々が使えるかどうかを表す言葉です。
公開したWebサイトは多くのユーザーに閲覧されます。
ユーザーによってパソコンの機種や利用するブラウザ等も違うので、さまざまな利用環境に配慮し誰からも閲覧できるサイトを作るように心がけましょう。
また、次のようなアクセシビリティに配慮しましょう。
文字のサイズは固定しない。
背景と文字の配色に注意する
画面全体が明滅するような表現は避ける
機種依存文字や半角カナを使用しない
音声ブラウザでも情報が伝わるようにする。
---------------------- POINT コーナー ---------------------------
機種依存文字について
機種依存文字とは、ある特定の環境上でしか正しく表示されない文字のです。
お使いのPCの製作会社や、OSの種類（ウィンドウズやマッキントッシュ、他）やバージョンなど、それぞれの環境によって異なります。
お使いのPCとは違う環境のPCやサーバーでは、 文字化けやプログラムの不具合の原因となるので、使用を避けてください。
詳しくは上のリンクでご覧ください。
------------------------------------------------------------------------------------
ユーザビリティ
ユーザビリティとは、使いやすさのことです。
普段からパソコンを使ってる人とめったにパソコンを使わない人とは大きく使い勝手が違いますね。
ユーザビリティの高いWebサイトを作成するには、利用状況を想定しその利用状況に最適なデザインを考える必要があります。
Webサイトの題材
構想を練ったらWebサイトに掲載する原稿や画像を作成したりして素材を集めます。
素材は市販の素材集やインターネット上で探しても構いませんが 著作権や肖像権 等 他人の権利に注意する必要があります。
Webページを作成
Webページを作成する方法は主に2通りがあります。
直接XHTMLやCSSテキストファイルを使う。
（ちなみにJavaScriptを使うと動きが付けられます。）
メモ帳やTeraPadなどのテキストエディタを使い、自分でXHTMLやCSSを記述します。XHTMLやCSSの知識が必要ですがそこまで難しい物ではありません( ´艸｀)
ホームページ作成ソフト
この方法もありますが個人的にはお勧めしません。
知識がなくてもホームページが作成できるみたいですが、個人的には0から組んで自分オリジナルのホームページを作りたいと思いますねｗｗｗ
話がそれてしまいましたね・・・・
代表的なホームページ作成ソフト
まあ、興味があれば試してみては‥‥？
Webページを転送
今回最後に説明するのはWebページを転送？
自分のコンピュータ上で作成したWebページは、そのままではほかの人に閲覧してもらうことができません。
作成したWebページをwwwサーバに転送することによりはじめてWebサイトとして閲覧してもらうことができます。
転送する方法
FTPソフトを利用する
FTPソフトを利用してWebページを転送できます。
Web発行ウィザードを利用する
Web発行ウィザードは、Webページを転送するためのプログラムです。
表示されるダイアログボックスに必要な情報を入力するだけで、Webサイトを転送できます。
---------------------- POINT コーナー ---------------------------
FTP(File Transfer Protocol)
ネットワーク上でファイルを転送すること。
またその仕組みを FTP(File Transfer Protocol)といいます。
XHTMLの基礎知識
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。
XMLは、HTMLとおなじようにWebページを作成するときに記述する言語のひとつ
要素・タグ・属性
段落や表などWebページを構成する単位を要素といいます。
要素は要素名を ＜＞(タグ）で囲み＜/＞（スラッシュタグ）で終わります。
開始位置のタグは 開始タグ 終了位置のタグは 終了タグ といいます。
また、要素に追加できる詳細設定を属性といい属性は値を伴い 属性＝”値”のように記述します。
説明はここまでにしてちょっと作っていきましょう。
開くとこんな感じですねｗｗｗ
TeraPadでやります
XML宣言
verson属性
XMLのバージョンを指定
verson="バージョン"
encoding属性
encoding="文字コード"
次に基本要素を見ていきます
html要素
XHTML記述部分であることを示します
＜html＞内容＜/html＞
head要素
XHTMLファイル自身に関する情報を表します
<head>内容</head>
body要素
XHTMLファイルの本文を表します
＜body>内容</body>
名前の空間の指定
XHTMLファイルでは、行頭でXML宣言を記述するため名前の空間の指定が必要になります。
名前の空間は次のようにします。
<html xmlns="http://www.w3.org/1999/xhtml">
言語の指定
Webページは、世界中で表示されるため、XHTMLファイルがどの言語で記述されているのか指定します。
言語指定の仕方は次のようにします
xml:lang属性
言語を指定します
xml:lang="ja" lang="ja"
全体はこんな感じですね。
文字コードの指定
mata要素
文章の情報を表します
<meta/>
title要素
Webページのタイトルを表します
<title>内容</title>
で、今回は最後にファイルの保存方法について説明をしておしまいにしようと思います。
保存方法は2通りあります。
名前を付けて保存
ファイルをクリックして名前を付けて保存ダイアログボックスが出てくるので
ファイル名にfail.htmlみたいな感じに名前を付けて保存してみましょう。
上書き保存
既存のXHTMLファイルを編集して同じ名前で保存したいときに使います
＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾
じかいはブラウザでの確認辺りからはじめたいと思います。
ここまでご覧いただきありがとうございました。
BY MT
参考書は
よくわかる
発行者 大森 康文
著作/制作 富士通エフオーエム株式会社
協力 富士通株式会社 総合デザインセンター
