京都市 ホームページ制作 会社 / アクセシビリティ・ユーザビリティ配慮
メルマガバックナンバー11
CSSでデザインを制御したホームページ制作 vol.11
【2006.10.24 vol.11】毎月第2・4火曜日発行
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
障害者や高齢者をはじめ、誰もがアクセス可能なホームページについて
考えるwebアクセシビリティは、検索エンジン（SEO）対策に最も効果的です。
顧客拡大、売上増のための「アクセシビリティとSEOの融合」やホームページ
作成について出来るだけ簡単に解説いたします。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
こんにちは、レボネット株式会社の坂井です。
当メルマガの第11号をお読みいただき、ありがとうございます。
レボネットのサービス案内サイトREVOplusと、ビジネスパートナー
募集サイトをリニューアルしました。
ビジネスパートナー募集サイトでは、ホームページ制作のご紹介を
いただいた方に制作費の10%以上を還元するキャッシュバックについて
記載しておりますので、お近くにホームページ制作をお考えの方が
いらっしゃいましたらお声がけください。
サービス案内サイトREVOplusはこちら →http://plus.revonet.co.jp
ビジネスパートナー募集サイトはこちら →http://www.revonet.co.jp/bp
リニューアルに伴い、私、坂井のスタッフブログをスタートいたしました。
アクセシビリティ、SEO対策、ホームページ制作等について日常の業務や
出来事と絡めて書いております。
レボネットのスタッフブログはこちら
→http://blog.livedoor.jp/revonet_sakai
このメルマガではこれからのインターネット環境やウェブサイトにとって
必要不可欠なアクセシビリティ対策を中心に、検索エンジンで上位表示を
実現するSEO(検索エンジン最適化)対策と絡めてご説明します。
SEO効果の高いアクセシビリティ対策を施したホームページ制作に
ついてのご相談はお気軽にどうぞ。
■■ レボネット株式会社 電話番号 075-344-3348 ■■
□アクセシビリティとSEOの関連について□
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
目次 ・CSSでデザインを制御したホームページ制作
・初歩からのアクセシビリティ・SEO対策実践講座（CSS編）
・編集後記
発行元・レボネット株式会社
坂井 和広
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第1号のメルマガでは、簡単にSEOとアクセシビリティの用語説明をしました。
まだ、アクセシビリティという言葉を聞いたこともないという方は
当メルマガのバックナンバーをご覧ください。
バックナンバーはこちら→http://plus.revonet.co.jp/backnumber_1.html
■CSSでデザインを制御したホームページ制作
本日は、テキスト内容とデザインを分離する、スタイルシートの機能を
実現する言語の一つであるCSSについてお話します。
まず、CSSとはCascading Style Sheetsの略で、主にHTML文書に対する
表示(デザイン)等を指示するための言語のことを指します。
もともと、HTMLは文書の論理構造（テキスト）を記述することを目的と
している為、その見ためなどのデザインをスタイルシートで制御することで、
文書の論理構造（テキスト）とその見ため（デザイン）を分離することが
可能になります。
スタイルシートについて、JIS X8341-3ウェブコンテンツJISに
記載されていますので、今回もそちらを参照します。
----------------ここから引用----------------------------------
ウェブコンテンツの表示スタイルは、文書の構造と分離して、書体、
サイズ、色、行間、背景色などをスタイルシートを用いて記述する
ことが望ましい。ただし、利用者がスタイルシートを使用できない
場合、又は意図的に使用しないときにおいても、ウェブコンテンツの
閲覧及び理解に支障が生じてはならない。
参考 利用者が自分の特性に合ったスタイルシートを適用することに
よって、ウェブコンテンツがより操作・利用しやすくなる。
参考 印刷、音声、点字などに応じたスタイルシートを用意することで、
ユーザーエージェントがそのメディア用のスタイルシートに対応して
いれば、それぞれのメディアに適した表現が可能になる。
----------------ここまで引用----------------------------------
以上でも述べられているように、ホームページのコンテンツは
文書構造を示すHTMLで記述し、文書とは分離し、デザインは
スタイルシートで記述することが望ましいとされています。
CSSでのデザイン制御のメリットを以下に挙げます。
・一つのCSSファイルを変更するだけで全てのページの共通する
デザインを簡単に変更できる
・複数のページの見栄え（デザイン）を統一することができる
・HTML文書からレイアウト情報などを分離し、文書の構造だけを
HTML文書本体に記述することが可能になる
・HTML文書の論理的な構造が把握しやすくなる
・デザインに関するデータを全部のHTMLページに記述する必要が
なくなり手間が省ける
以上のようなメリットがありますが、スタイルシートは、全ての環境で
常に適用されるわけではありませんので、スタイルシートを使用できない
場合や、設定でスタイルシートが適用されないように意図的に使用しない
場合、テキストブラウザや音声ブラウザ利用者の方などであっても、
コンテンツの閲覧に支障がないように配慮しなければなりません。
フォント、フォントサイズ、太字、斜体、下線、文字間隔、行間、文字色、
背景色などをCSSで設定し、CSSを使用することでホームページを操作・
閲覧しやすくすることができ、さらに、文字サイズの指定には相対的な
単位を使ったり、適切な見出し要素をつけて、情報把握の手がかりを
増やすことで、CSSを使って制作するだけでなく、様々な環境の方に配慮し、
ウェブコンテンツの閲覧及び理解に支障が生じないように取り組むことが
重要です。
そのようにCSSを使用することにより、文書構造ありきでの正確な
HTML文書と、見た目（デザイン）を分離して、正確にコントロール
することが可能になります。
多くのブラウザはCSSに対応していますが、文書作成者である
ホームページ制作者側についてはまだ、HTMLの文書構造とCSSの
デザイン要素とを混ぜて使っている状況が多く見受けられますので、
HTMLの表示上の要素に代えてテーブルはレイアウトのためには
使用しないなど、デザイン要素はCSSを使った文書にし、文書構造の
アクセシビリティを高める必要があります。
自治体レベルでは既にアクセシビリティを意識し、CSSの導入や
テーブルレイアウトの廃止など、先ほど引用したJIS X8341-3を
意識した取り組みが進んでおります。
ですが、ただ、デザインはCSSにすれば良いという訳ではなく、
HTMLで適切な文書構造を作り、様々な閲覧者環境の方に配慮した
柔軟性のなるデザインとなるCSSの活用が望まれています。
適切な文書構造となったHTMLはデザイン指定のための余計なタグが
少なく検索エンジンにとってもよみやすいため、最適なSEO対策の
土台となりますので、SEO対策もふまえた総合的な内容を勘案し、
ホームページについて考え直してみてはいかがでしょうか？？
■初歩からのアクセシビリティ・SEO対策実践講座（CSS編）--------------
ここからは初歩的なことからアクセシビリティ対策・SEO対策の実践方法に
ついて、ご説明していきます。本日はCSSについてです。
これまでお伝えしてきましたソースのbody部分を以下に表示します。
<body>
<div class="content">
<h1>一番重要な見出し1(大見出し)</h1>
<p>見出し1の<strong>内容</strong></p>
</div>
</body>
HTMLは文書構造のみ、CSSでデザインを指定しますが、HTML内には
以上のように記載することで、大見出しと大見出しの内容は
CSS内のcontentで指定することができるようになります。
CSSファイルについては次回お伝えいたします。
本日お伝えしたHTMLをソースで見てみると、デザイン指定の余計な
タグがHTML上に少なく、検索エンジンも読みやすいということが
おわかりになったことと思います。
本日のメルマガはここまで。
次回からも"SEOとアクセシビリティの融合"について、なぜ”検索エンジン
対策に最も効果的”なのか基本的事項から順に詳しくお伝えします。
さらに、初歩からわかるようにアクセシビリティ・SEO対策の基本的な
対策方法を"初歩からのアクセシビリティ・SEO対策実践講座"と題して
具体的に掲載していきます。
当メルマガではできるだけ専門用語なども簡単にご説明しておりますが、
もし、わからない用語がありましたら、こちらのヤフーコンピュータ
用語辞典で検索して調べてみてください。わからないことがあったら
なんでもインターネットで調べられるのでとても便利ですよね。
その他、当社へのご質問という形でも受け付けていますのでお気軽に
ご質問下さい。
→ http://computers.yahoo.co.jp/dict/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
情報格差をなくすための障害者や高齢者に配慮したアクセシビリティ対策や
長期的な検索エンジン対策に最も有効なXHTML・CSSコーディング、顧客拡大・
売上増のための検索キーワードを意識したSEO対策など、「アクセシビリティ
とSEOの融合」を図り、web標準に準拠した最も新しいホームページを制作
いたします。
【レボネット株式会社サービス案内サイトREVOplus】
→ http://plus.revonet.co.jp
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■SEO・アクセシビリティ対策済 ホームページ制作をご依頼の場合
20ページまで 207,900円（税込）
※企画・構成等が含まれております。
こちらは特別モニター価格となっておりますので、実績、ご感想などを
ホームページ上で公開させていただきます。
★ご紹介者にキャッシュバック
ホームページ制作をご紹介いただいた方に制作費の10%を還元いたします。
詳しくはこちらをご覧ください。 →http://www.revonet.co.jp/bp
ご依頼・お見積もり・お問い合わせ・ご紹介はsakai@revonet.co.jpまで
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【編集後記】
---------------------------------------------------------------------
ただいまプロ野球は日本シリーズの真っ最中で、札幌では盛り上がって
いるようです。北海道の大自然に、大きな札幌ドーム、北海道の自然に
親しみ、ついでに一度、行ってみたいなと思っている今日このごろです。
このメルマガで何度もお伝えしておりますアクセシブルかつ
クリエイティブなサイトを表彰するアックゼロヨン・アワード2006
ですが、2006年10月31日(火) に表彰式が行われます。
次回のメルマガでもその結果についてお伝えしていきたいと思いますので
楽しみにお待ち下さい。
----------------------------------------------------------------------
これからアクセシビリティを広めるため、皆さんのSEO対策のため、
皆さんのさらなる顧客拡大、しいては売り上げアップのための情報源
となり、インターネットの利用環境がより充実したものとなるように
当メルマガがお役に立てるよう願っております。
毎月第2・4火曜日に当メルマガを発行しております。
----------------------------------------------------------------------
☆このメルマガへのご意見・ご質問やホームページ制作・オンラインショップ
構築のご依頼・ご紹介などございましたらご遠慮なくメールください。
あなたもお気軽にこのメルマガへのご意見・ご希望をお送りください。
必ずお返事させていただきます。
メルマガ【 誰でもわかる！SEO効果の高いアクセシビリティ対策 】では、
もっとお役にたてる情報を配信したいと考えておりますので、あなたの
アクセシビリティやSEOについてのご意見・ご感想などもお待ちしております。
..... sakai@revonet.co.jp
最後までお読みいただき、ありがとうございました。
レボネット株式会社
坂井 和広
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
「誰でもわかる！SEO効果の高いアクセシビリティ対策」
───────────────────────────────────
□ 発行元 ..... "アクセシビリティ・SEO対策ホームページ制作会社"
レボネット株式会社 http://www.revonet.co.jp/
REVOplus http://plus.revonet.co.jp
ビジネスパートナー募集 http://www.revonet.co.jp/bp
スタッフブログ http://blog.livedoor.jp/revonet_sakai
京都府京都市下京区朱雀正会町24番地
TEL:075-344-3348 FAX:075-344-3343
□ E-mail ..... sakai@revonet.co.jp
このメールマガジンの転送は自由です。よろしければ転送してください。
----------------------------------------------------------------------
□ 発行周期 ..... 毎月第2・4火曜日
□ バックナンバー.. http://plus.revonet.co.jp/backnumber.html
■ メルマガ配信登録・アドレス変更・配信停止はこちらからお願いいたします。
まぐまぐ .... http://plus.revonet.co.jp/magazine.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━