HOME > arsvi.com の運営と作業 >

ウェブページ作成の注意点

Tweet
last update: 20220225




■ウェブページ作成の前に

このページをご覧になっているほとんどの方が、OSがWindows、ブラウザがIE（Internet Explorer）だと思います。現在、世界におけるシェアを見ても、両者を生産しているマイクロソフト社が圧倒的な勝利を収めています。

「調査結果によると、全世界におけるWindows XPのシェアは87.36％で、2位はWindows 2000の3.99％、3位がWindows Vistaの3.23％となり、Windows VistaのシェアがWindows 2000を下回った。以下、4位はMac OSの2.65％、5位はWindows 98の1.39％、6位はWindows Meの0.64％、7位がLinuxの0.36％となっている」
（出所）http://internet.watch.impress.co.jp/cda/news/2007/07/25/16439.html

ただ、あなたがたとえWindowsを使い、Internet Explorerを使っていようとも、世界中にはそれ以外のOS（Macintosh や Linux など）や他の標準準拠のブラウザ（Firefox、Mozilla、Netscape、Opera、Safari、Konqueror など）を使っている人もいます。

また、視覚障害などにより活字にアクセスしにくい人もいます。そのような人たちのために、読み上げソフトが開発されていたりしますが、環境やホームページによっては読み上げが困難であったりします。

IEが普及することにより、あたかも世界的なスタンダードがIEであると思いこみがちですが、IEの表示こそ、実は特殊な表示なのです（たとえばこちら、「どのブラウザでも見えるページ作り」）。ですから、ホームページ作成の際には、できるだけどのような人にも、また、どのような環境においても見ることができるように、配慮する必要があります。とりわけ、普段IEを使っておられる人も、標準準拠のブラウザをインストールして、作成したホームページが他の環境でも見れるかどうかをチェックすることをお勧めします。お金がかかるのでは、と思う必要はありません。たとえば、Firefoxなどは無料で入手することができます。

ご存知のように、ホームページはHTMLという言語で作成しますが、あなたの作ったHTMLドキュメントが正しいかどうかを判定してくれる便利なサイトがあります。


Another HTML-lint gateway
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

Markup Validation Service
http://validator.w3.org/

さらに、アクセシビリティの視点からは、フレームは使わないほうが無難です。読者が見たいページにリンクしづらいうえに、読み上げソフトに対応しない可能性があります。



>TOP

■外部CSSへの移行とファイル作成上の注意

2015年7月14日にサンプルページの更新を行い、すべてのサンプルファイルを外部CSSに変更しました。

外部CSSとは、これまで各HTMLファイルのヘッダ情報内に記述していたタグ定義を別個のCSSファイルに移し替え、すべてのHTMLファイルの表示を一括規定する方法です。独立して作成した新たなCSSファイルは「default.css」としてarsvi.comサーバー内の「CSS」フォルダに保存されています。

ウェブマスターの皆さまには、これまでどおりサンプルページの各ファイルをダウンロードして編集作業を行っていただきますが、以下の点にご注意ください。


I.　「default.css」を必ずパソコンにダウンロード

  1. パソコンの作業フォルダに「css」フォルダを作成し、そこに「default.css」をダウンロード、保存する。
    1. 「http://www.arsvi.com/css/default.css」をウェブで開く
    2. ポップアップで表示されたcssファイルを保存する（「ファイル」→「名前を付けて保存」）
    3. ファイル名を「default.css」とし、拡張子「.css」を書き加える
    4. ファイルの種類を「すべてのファイル」に変更する
    5. 「保存」ボタンを押す
  2. 同じ作業フォルダの中に、アップロードする先のサーバー上のフォルダ名と同じフォルダ「****」（例：2010年代の全文掲載ファイルであれば「2010」）を作成する。
  3. 作成した「****」フォルダ内に更新／作成するHTMLファイルを保存し、そのファイルをテキストエディタで開いて編集作業を行う。
  4. 編集作業したHTMLファイルをダブルクリックしてブラウザで展開、文字化けや配置の崩れなどなくきちんと表示されていることを確認する。
  5. 編集したHTMLファイルをサーバー上の該当フォルダ「****」にアップする。

以上の方法で、編集作業を行ったファイルが崩れることなく、きちんと表示されます。


II.　以前とは異なるタグ表記に変更

外部CSSファイルを作成した際に、これまでと記述方法を変更したタグがあります。変更箇所は一つのみです。“s”, “sr” などと同じように単純な表記にしました。

以前は<center></center>タグを使用していましたが、HTML4では非推奨、HTML5では廃止されているので、CSSによる表記に変更した経緯があります。同じく、<u></u>タグ（下線）もCSSによる表記に変える必要があります。

その他に、<s>文字に取り消し線</s>も今後は以下のように記載してください。こちらはCSSによる表記ではありません。

表示は同じですが、こちらはより明確に「削除」という意味を持つタグになります。


III.　<div class="○○○"></div> と <span class="○○○"></span> の違い

<div class="○○○"></div> と <span class="○○○"></span> はクラス（class）属性を持つタグです。<div>タグと<span>タグに「class="○○○"」を加えることで「default.css」に記述した定義をそのタグに反映させることができます。

例えば<div class="c"> は、「default.css」に記述した「.c {text-align: center;}」を「class="c"」として指定しています。しかし、<div>タグと<span>タグは性質が異なります。

クラス属性で指定できるのは「default.css」に「.*** {□□□}」 と記述して「***」の前に「.」（ドット）を付したものだけです。なかには「th.*** {□□□}」などのように、「.」（ドット）の前に通常用いるタグが付いているものもあります。その場合は、そのタグにのみクラス属性を指定しています。


IV.　便利な？タグ表記の追加

外部CSSを使用すると「default.css」ファイルを変更するだけで、すべてのHTMLファイルの表示方法を変更することができます。これまでのように各ファイルのヘッダ情報をいちいち変更する必要はありません。なるべくタグを使用して表記するようにしてください。

「default.css」に記述したタグ定義の一覧　→　作成予定


■default.cssの変更履歴について

2022/02/28 スマートフォンへの対応

default.cssを変更し、スマートフォン（以降、SP）のフォントサイズを別途指定した。
変更前のCSSファイルはバックアップを取っている[変更前のcssファイル] 。 メディアクエリを用いて、SP向けに見出しと本文のフォントサイズを指定した。レイアウトが崩れている場合もあると考えられ、その点については順次調整の予定。
作業者は山口和紀、安田智博、中井良平である。

＊作成：野崎泰伸　更新：小川 浩史,山口和紀
UP:20071217　REV: 20150716, 20160717, 20180718, 0721, 0724, 20200309, 20220225(山口)
◇サンプル　 ◇arsvi.com の運営と作業
TOP　HOME (http://www.arsvi.com)◇