タグ(html,css)辞典

2009年6月16日火曜日

Internet Explorer

Internet Explorer 6 における CSS の拡張Microsoft

CSSでは原則としてidを使い、他のものと役割が共通する場合にだけ、例外的にclassを使うという発想が大切です。
idを個人とするならば、classは集団といえます。基本的にid、classには、「form#request」というふうにformなどの要素タイプを前接し、「#request」のようにオープンにしないのが原則です。

idやclassのネーミングは、「header」「contents」「subcontents」「footer」のように意味を基準にするのがよろしいです。
「red」「left」といった見た目を基準にすると、あとで「red」部をグリーンに、「left」部を中央に変更したりすることが生じた場合混乱を招きます。

見本
id	意味
div#container	全体を囲むdiv要素
div#header	ヘッダー
div#globalnav	メニュー
div#search	検索部分
div#visual	画像部分
div#wrapper	マルチカラムのデザイン調整用空ボックス
div#main	主要部分
div#sub	サイドバー
div#footer	フッター

hover

→リンク部分の色

HTML仕様書

HTML 4.01 Specification(英語)
HTML4.01仕様書(和訳)

height

height:1% とするとIEでは直ることが多い。

<h1>

hはheading（見出し）のことです、header（ヘッダ）ではありません。
<h1><h2><hn>は文字サイズ調整のタグではありません。

footer

イタリックで表示されてしまう場合は、normalに直します。

font-style: normal

em要素　＜CSS

em要素は、斜体で表示されてしまいます。斜体は日本語では読みにくいです。
斜体を避け、赤の太字で表示したい場合は次のように指定します。
なおstrong要素は「より強調」で通常は太字で表示されます。

emphasis＝強調
em { color: #ff0000; font-weight: bold; font-style: normal; }

DOCTYPE宣言

XML宣言の文字コード指定はすべてUTF-8です。必要に応じて差し替えます。
<?xml version="1.0" encoding="Shift_JIS"?>
<?xml version="1.0" encoding="EUC-JP" ?>
<?xml version="1.0" encoding="ISO-2022-JP" ?>

HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML Basic
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

XHTML 1.0 Transitional
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Strict
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.1
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

div要素を少なく

XHTMLの最適化のためにはdiv要素やspan要素をなるべく少なくします。たとえば、次の場合div要素でul要素をラップする必要はありません。

<div id="nav">
<ul>
<li><a href="...">項目1</a></li>
<li><a href="...">項目2</a></li>
<li><a href="...">項目3</a></li>
</ul>
</div>

上の場合、div要素を省き、ul要素に直接idをつけたほうがシンプルです。

<ul id="nav">
<li><a href="...">項目1</a></li>
<li><a href="...">項目2</a></li>
<li><a href="...">項目3</a></li>
</ul>

CSSハック

XHTMLソースのh1要素などのフォントサイズ、マージン、パディングの初期設定は、ブラウザによって異なります。
回り込みによる段組の設定が段落ちしてしまったりするのは、ブラウザのデフォルトCSSのためです。
このような問題を回避するために、次のような対策を講じておきます。

1）最初にすべてのデフォルトCSSの設定を無効にしておきます。

* {
margin: 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6, p, address {
font-size: 100%;
font-weight: normal;
font-style: normal;
}

このようにブラウザのもつバグや特有の解釈を利用して、特定のブラウザのトラブルを回避するための対応策をCSSハックといいます。
CSSハックは他に回避手段がない暫定措置、最終手段として用います。

2）バージョン4世代のブラウザはCSSハックでは解決できない問題が多く、アプリケーションを強制終了してしまうこともあるので、外部CSSを読み込ませないようにします。
IE4とNN4に外部CSSを読み込ませないようにするには次のように記述します。

@import “styles.css”

しかしこれでもNN4の初期バージョンではブラウザがフリーズすることもあるので、回避策としてmedia属性の値を「all」あるいは「screen, tv」としておきます。

3）バージョン5世代のブラウザ対策としては、IE5.0、IE5.5、MacIE5.X用のバグ修正専用CSSを用意しておきます。

4）バージョン6世代対策としては、IE用とそれ以外に分けられます。次のように指定すると、IE6.0、 IE5.0、MacIE5.xだけにCSSが適用される。「*html」を使うので、スターハックとよばれる。スターハックの他に、「アンダースコアハック」「ボックスモデルハック」があります。

#contents p {
font-size: 1em;
}

*html #contents p {
font-size: 90%;
}

5）また、IE6.0の配置に関する問題を解決するには、次のように問題のあるボックスごとに「width:100%」あるいは「height: 1%」を適用します。
幅に「100%」、高さに「1%」を指定しても、実際の内容の高さに合わせて表示するので実害はありません。。

*htmlセレクタ {
height：1%；
}

6） IE6.0以外のブラウザにだけ適用するには次のような要素をセレクタの先頭に指定する。

CSS-only Filters SummaryさまざまなCSSハック

CSS仕様書

* CSS1(英) CSS1(日)
* CSS2(英) CSS2(日)

br

任意の改行。

address

→footer

border

""は非推奨。

a href

a＝anchor。碇　href＝船名。hyper reference

CSS

CSS（Cascading Style Sheets）は、HTMLの表示方法を指定するスタイルシート言語の代表です。cascadeとは、階段状の岩に水が流れ落ちている滝のことです。

2009年4月25日土曜日

表の改行の禁止

表組みにおいて文字の折り返しを禁止する場合は、nowrapを指定します。
wrapとは「包む」ことです。

th,td {
　　　　white-space: nowrap;
}

チェックツール validator

チェッカー、バリデータ（validator）とも。

Another HTML-lint gateway
HTML文書の文法をチェックし、採点します。最も多くのウェブデザイナーが利用しています。（『Web Designing』2006年10月）
Another HTML-lint gateway

Web Developer Toolbar
Mozilla Firefox用です。デスクトップに保存したダウンロード済みのファイルをFirefoxのウィンドウ内にドラッグしてください。
Web Developerのダウンロードと説明
 Web Developer アップデート時の不具合への対処方法

W3C Markup Validation Service　（XHTML）
W3C Markup Validation Service(英)

W3C CSS 検証サービス
CSSチェックツール
W3C CSS 検証サービス要ダウンロード

WebInspector（ウェブインスペクター）
WebInspector（ウェブインスペクター）：無償ダウンロード
作成したWebサイトが高齢者、障害者にとっても読みやすいかを診断するツール。富士通

間隔

文章量が多い場合には行間を変えるだけで、可読性を高めることができます。
125%、150%、場合によっては200%にします。
標準（デフォルト）は「line-height: 100%」です。

また文字間隔を広げると、ゆとりのある印象をあたえることができます。
0.2em、0.3em、場合によっては0.5emにします。
標準（デフォルト）は「letter-spacing: 0em;」です。
このように行間、文字間を自在に変更できるところにもCSSの大きな魅力があります。

テキストのプロパティ

line-height 行間　【注】「line-height」とは行間のこと
text-align 行揃え
vertical-align 縦位置
text-decoration 下線、上線、取消線
white-space 空白、改行、タブ
letter-spacing 文字間隔
text-indent 1行目のインデント

検証

XHTML、CSSともに完成段階で、うっかりミスなどの確認のためにも構文の検証をおこないます。
XHTMLソースで構文のミスがあると、正しいCSS を指定しても正常表示されないケースが多いです。
XHTMLソースを適切に記述することが、シンプルなCSS制作への道です。

CSSの検証サービスは、 W3Cでも提供しています。
チェックのあとで、さらに各種ブラウザで表示の確認をします。

Another HTML-Lint gateway HTML文書の文法をチェック、採点
XHTML Markup Validator XHTML文書の検証。W3C
CSS Validation Service CSSの検証。W3C

色、背景色

ウェブ標準では色はCSS側が担当します。
色の指定の仕方は各種ありますが、RGB各色の値を2桁ずつの16進数で示すのが一般的です。
16進数では、 256×256×256＝1677万色のカラーを表示することができます。
ウェブセーフカラーでは、RGBの各色は「00」「33」「66」「99」「cc」「ff」のいずれかとなり、216色で構成されます。
XHTMLでは16進数のローマ字は小文字で表記することになっています。

#contents {
  background: #ffffff;
  color: #333333;
}

ディスプレイ上で背景を白で文字色を黒にした場合、明度差が極端になり目にも悪影響をおよぼすので、文字色は黒に近いグレー「#333333」などがよろしいようです。

逆に文字色が黒である場合には、背景は少し暗くします。
CSSの仕様では、前景色を指定したときは背景色も指定することになっています。
なお文字色は「color」であって、「font-color」ではありません。
背景色はマージン（ボーダーの外側余白）には適用されないことにも注意してください。

背景のプロパティ
背景の要素	意味	備考
background	一括指定
background-color	背景色
background-image	背景画像
background-repeat	背景画像の並び方	repeat no-repeat repeat-x repeat-y
background-position	背景画像の表示意位置
background-attachment	背景画像の固定位置

font-family

font-family： Verdana Arial "ヒラギノ角ゴ Pro W3" "Osaka" "ＭＳＰゴシック " "san-serif" 。"ＭＳＰゴシック"　　ＭＳＰは全角で

CSSの歴史

CSS（Cascading Style Sheets）は、XHTMLの表示方法を指定するスタイルシート言語の代表です。
cascadeとは、階段状の岩に水が流れ落ちている滝のことです。
CSSの歴史は意外に古く、草案はすでに1994年には公開されています。

1996年にはCSS1が、1998年にはCSS2が公開されています。
しかしインターネットの爆発的な普及にともなうブラウザ間の競争で、ブラウザ各社は市場占有率を求めて、CSSを無視してHTMLの視覚表現を独自拡張していきました。

CSSを実用的に使うことのできるブラウザが登場したのは、2000年頃になってからでした。
これに伴いウェブ標準（XHTMLとCSS）を前提とするSEOやウェブアクセシビリティが浸透し始めました。
こうして2003年頃からCSSは広く普及するようになりました。
現今ではブログが CSSの浸透に拍車をかけています。

CSS関連仕様史
西暦	CSSのできごと
1994年	CSS草案が公開される
1996年	CSS1がW3C勧告として公開される
1998年	CSS2がW3C勧告として公開される
2000年	CSS3の草案が公開される

CSSのメリットとデメリット　

CSSを使う利点には次のようなものがあります。

すべてのページデザインを一挙に変更でき、メンテナンス作業が激減する。（筆者桑原は数百ページの背景色を定期的に一括変更するのに活用している。）
ウェブアクセシビリティが高くなる。
SEO効果があがる。
画像の座標指定、行間、字間の調節などデザイン自由度が高い。（「CSS Zen Garden」で具体例が発表されている。
携帯電話や印刷用に字体、サイズを変えるなどさまざまなメディアタイプに対して、XHTMLファイルが1つで済み、一元対応ができる。

利点ずくしのCSSであるが、現時点では次のような問題点があり、慣れるまでは努力と時間が必要です。

XHTMLとCSSの2元管理が必要となる。
HTMLをウェブ標準（XHTMLとCSS）に全面移行するには、時間がかかる。
古いブラウザへのバグ対策が必要である。
ブラウザごとに発生する問題があり、対策が必要である。
特殊な裏技を使う必要がある。

特にHTMLをウェブ標準（XHTMLとCSS）に全面移行するには、時間がかかります。
筆者の「桑原政則オンライン」でも数百タイトルのページを、フォント要素、色要素をCSSに移行したりするなどの1ページずつの作業があるので、全面改定までは2，3年は要することになります。
ただ一度対策を講じると問題が発生しにくいコードを書くようになるので、問題が発生してもすぐ対処できるようになります。

また数百頁の背景などを一挙に変更できるのは大きな魅力です。
将来的にCSSはスタンダードになるので、移行の準備は早いほどよろしいようです。
無料のCSS作成ツールは　Vectorなどで紹介されています。

@charset 　キャラセット

キャラセットは　abc.css の第1行に記述する。文字化け回避のためです。
@charset "shift_jis";

登録: 投稿 (Atom)

タグ(html,css)辞典

2009年6月16日火曜日

Internet Explorer

idセレクタ、classセレクタ

hover

HTML仕様書

height

<h1>

footer

em要素　＜CSS

DOCTYPE宣言

div要素を少なく

CSSハック

CSS仕様書

br

address

border

a href

CSS

2009年4月25日土曜日

表の改行の禁止

チェックツール validator

間隔

検証

色、背景色

font-family

CSSの歴史

CSSのメリットとデメリット

@charset 　キャラセット

リンク

ブログアーカイブ

このブログを検索

2009年6月16日火曜日

2009年4月25日土曜日

リンク

ブログ アーカイブ

このブログを検索

ブログアーカイブ