XHTML/CSS

今回は勉強類の記事

自分が勉強してきたうちの一つについて紹介＆説明していきます。

興味があればご覧ください_(_^_)_

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

XHTML/CSS

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 　コーナー　---------------------------

機種依存文字について

機種依存文字について
www.hayashikaku.co.jp
機種依存文字とは、ある特定の環境上でしか正しく表示されない文字のです。

お使いのPCの製作会社や、OSの種類（ウィンドウズやマッキントッシュ、他）やバージョンなど、それぞれの環境によって異なります。

お使いのPCとは違う環境のPCやサーバーでは、 文字化けやプログラムの不具合の原因となるので、使用を避けてください。

詳しくは上のリンクでご覧ください。

------------------------------------------------------------------------------------

ユーザビリティ

ユーザビリティとは、使いやすさのことです。

普段からパソコンを使ってる人とめったにパソコンを使わない人とは大きく使い勝手が違いますね。

ユーザビリティの高いWebサイトを作成するには、利用状況を想定しその利用状況に最適なデザインを考える必要があります。

Webサイトの題材
構想を練ったらWebサイトに掲載する原稿や画像を作成したりして素材を集めます。

素材は市販の素材集やインターネット上で探しても構いませんが　著作権や肖像権　等　他人の権利に注意する必要があります。

Webページを作成
Webページを作成する方法は主に2通りがあります。

直接XHTMLやCSSテキストファイルを使う。
（ちなみにJavaScriptを使うと動きが付けられます。）

メモ帳やTeraPadなどのテキストエディタを使い、自分でXHTMLやCSSを記述します。

XHTMLやCSSの知識が必要ですがそこまで難しい物ではありません( ´艸｀)

XHTMLやCSSの知識があれば高度な編集が行えます。

ホームページ作成ソフト
この方法もありますが個人的にはお勧めしません。

知識がなくてもホームページが作成できるみたいですが、個人的には0から組んで自分オリジナルのホームページを作りたいと思いますねｗｗｗ

話がそれてしまいましたね・・・・

代表的なホームページ作成ソフト

https://www.justsystems.com/jp/download/trial/hpb/

まあ、興味があれば試してみては‥‥？

Webページを転送
Webページを転送？

自分のコンピュータ上で作成したWebページは、そのままではほかの人に閲覧してもらうことができません。

作成したWebページをwwwサーバに転送することによりはじめてWebサイトとして閲覧してもらうことができます。

転送する方法
FTPソフトを利用する
FTPソフトを利用してWebページを転送できます。

代表的なものは　

FFFTP　https://forest.watch.impress.co.jp/library/software/ffftp/

NextFTP　　https://www.toxsoft.com/nextftp/

ですね。

Web発行ウィザードを利用する
Web発行ウィザードは、Webページを転送するためのプログラムです。

表示されるダイアログボックスに必要な情報を入力するだけで、Webサイトを転送できます。

----------------------　POINT 　コーナー　---------------------------

FTP(File Transfer Protocol)

ネットワーク上でファイルを転送すること。

またその仕組みを　FTP(File Transfer Protocol)といいます。

--------------------------------------------------------------------------------------

次回からXHTMLの基本に入ります。

ここまでご覧いただきありがとうございました。

BY　おこ助　( ^)o(^ )