ボーダーを設定する。
背景色を設定する。
リンク文字の下線を非表示にする。
リストマークを非表示にする。
マウスオーバーで色を変える。
ボタン全域をリンク領域にする。
【XHTML】
<div id="navi">
<ul>
<li><a href="indexall.html"> 総 索 引</a></li>
<li><a href="webwritingpg.html"> ウェブライティング</a></li>
<li><a href="index-life.htm"> くらし・仕事</a></li>
<li><a href="index_country.htm"> 地域(日・世)</a></li>
<li><a href="kumaten.html"> くまっ典</a></li>
<li><a href="pctermpg.html"> IT辞事典</a></li>
<li><a href="wspg.htm"> 桑原政則</a></li>
<li><a href="kohowtuousepg.html"> ヘルプ・使い方</a></li>
</ul>
</div>
【CSS】
#navi {
float: left;
width: 235px;
margin-top: 77px;
}
#navi a {
text-decoration: none;
background: #f6f6f6;
border-top: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
border-left: 5px solid #d0d0d0;
display: block;
width: 95%;
}
#navi li {
padding-top: 1px;
padding-bottom: 1px;
font-size: 16px;
line-height: 150%;
font-weight: bold;
margin-bottom: 1px;
}
#navi a:hover {
background: #C8C8FF;
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-left: 5px solid #ff0000;
}
#navi ul {
margin-left: 0px;
padding-left: 0px;
list-style: none;
}
2009年6月16日火曜日
定義リストdlの応用例
定義リストdl(definition list)は応用範囲が広く、テーブルの使用を避けるためにも使われます。
dt(definition term)やdd(definition description)は重複仕様できます。
dl定義リストの応用例
・ナビゲーションメニュー
・サイトマップ
・Q&A
・お問い合わせフォーム
・商品リスト(dtに画像を配置する)
・新着情報
・対談(dtに発言者を配置する)
・タイムテーブル
・会社沿革(年表)
・会社案内
・役員紹介
dt(definition term)やdd(definition description)は重複仕様できます。
dl定義リストの応用例
・ナビゲーションメニュー
・サイトマップ
・Q&A
・お問い合わせフォーム
・商品リスト(dtに画像を配置する)
・新着情報
・対談(dtに発言者を配置する)
・タイムテーブル
・会社沿革(年表)
・会社案内
・役員紹介
中央揃え
[XHTML]
<div class="box1">
<div class="box2">
あああ
</div>
</div>
[CSS]
.box1 {
text-align: center;
}
.box2 {
width: 500px;
text-align: left;
}
ボックスの中央揃えです。ここでは left: 15% で中央に配置されます。
【XHTML】
<div class="column1">
<p> </p>
</div>
【CSS】
.column1 {
padding: 8px;
width: 500px;
line-height: 150%;
margin-right: auto;
margin-left: auto;
position: absolute;
left: 15%;
}
<div class="box1">
<div class="box2">
あああ
</div>
</div>
[CSS]
.box1 {
text-align: center;
}
.box2 {
width: 500px;
text-align: left;
}
ボックスの中央揃えです。ここでは left: 15% で中央に配置されます。
【XHTML】
<div class="column1">
<p> </p>
</div>
【CSS】
.column1 {
padding: 8px;
width: 500px;
line-height: 150%;
margin-right: auto;
margin-left: auto;
position: absolute;
left: 15%;
}
正しいマークアップ
正しいマークアップには複数解が存在することがある。というのはCSSはデザインの問題であり、主観が入り、1意に決めることができない場合が多いからである。
たとえばリストに見出しをつける方法などがそうである。したがってチーム内でのコンフリクトを未然に防止するためにも、マークアップルールを決めておいたほうがよい。
企業や自治体が標準のアクセシビリティ基準をもとに、独自のガイドラインを策定するのは、このためである。
・富士通ウェブ・アクセシビリティ指針
・情報バリアフリーガイドライン 神奈川県
・アクセシブルなホームページを目指して 島根県
たとえばリストに見出しをつける方法などがそうである。したがってチーム内でのコンフリクトを未然に防止するためにも、マークアップルールを決めておいたほうがよい。
企業や自治体が標準のアクセシビリティ基準をもとに、独自のガイドラインを策定するのは、このためである。
・富士通ウェブ・アクセシビリティ指針
・情報バリアフリーガイドライン 神奈川県
・アクセシブルなホームページを目指して 島根県
ブログはSEO効果が高い
ブログが検索サイトの上位を占めるようになってきています。
社長の近況報告などのプライベートブログ、販促などのプローモーションブログ、キャンペーンブログなどのビジネスブログが増殖中です。
ブログのSEO上のメリットは、次のようです。
・1ページ1トピックで更新頻度が高い。
・コメント、トラックバック機能でキーワードの出現率が高くなり、被リンク数が多くなり、その結果リンクポピュラリティが高くなる。
社長の近況報告などのプライベートブログ、販促などのプローモーションブログ、キャンペーンブログなどのビジネスブログが増殖中です。
ブログのSEO上のメリットは、次のようです。
・1ページ1トピックで更新頻度が高い。
・コメント、トラックバック機能でキーワードの出現率が高くなり、被リンク数が多くなり、その結果リンクポピュラリティが高くなる。
フレームは使わない
フレームは、アクセシビリティやSEOの観点からも望ましくないです。
将来的には使えなくなります。「フレームは百害あって一利なし」といわれており、次のような欠点があります。
・ ナビゲーションを失ったページが表示されてしまう。
・URLでフレームの中身を指定できない。
・キーワード対策がしにくい。
・フレームセットのページに情報がない。
将来的には使えなくなります。「フレームは百害あって一利なし」といわれており、次のような欠点があります。
・ ナビゲーションを失ったページが表示されてしまう。
・URLでフレームの中身を指定できない。
・キーワード対策がしにくい。
・フレームセットのページに情報がない。
ブラウザの種類とCSSの解釈
ブラウザにはレンダリングエンジンが搭載されています。
レンダリングとはデータを可視化することです。
IE系、SleipnirにはMSHTMLエンジンが、Firefox、Mozilla、Netsacape系にはGeckoエンジンが、またOperaにはPrestoエンジンが搭載されています。
その他のブラウザもあります。現状ではIE系とGecko系への対策を主として講ずればよしとします。
HTMLレンダリングエンジンウィキペディア
レンダリングとはデータを可視化することです。
IE系、SleipnirにはMSHTMLエンジンが、Firefox、Mozilla、Netsacape系にはGeckoエンジンが、またOperaにはPrestoエンジンが搭載されています。
その他のブラウザもあります。現状ではIE系とGecko系への対策を主として講ずればよしとします。
HTMLレンダリングエンジンウィキペディア
パンくずリスト=パンくずナビ=トピックパス
パンくずリストは訪問者の道しるべで、迷子から救うことにもなります。
また内部リンクの数がふえるので、検索ランキングアップのもとにもなります。
【例】現在位置:桑原政則オンラインのトップ > ウェブ ライティングのページ
また内部リンクの数がふえるので、検索ランキングアップのもとにもなります。
【例】現在位置:桑原政則オンラインのトップ > ウェブ ライティングのページ
ソースの検証でSEOの向上を
ソースの検証は、これまであまり重視されてきませんでした。発注者側も制作者側も見栄えをを重視してきたからです。
しかし、XHTMLでは、ソースにミスがあると意図通りに表示されないことが多く、この問題をさけるためにはソースの検証が必要となっています。
XHTMLの検証には、W3Cの「Markup Validator」を利用します。
「This Page Is Valid XHTML 1.0 Strict!」と表示されれば合格です。CSSの検証はW3Cの「CSS Validation Service」を利用します。
「検索キーワードチェックツール」も効果的です。
「ウェブライティング」をサーチすると、「桑原政則オンライン」内の「ウェブライティング」はGoogleで11位、MSNで3位となっています。しかしYahoo!には見あたりません。何らかの対策を立てるべきことがわかります。
「岩手県コラム」では「桑原政則オンライン」の「岩手県を歩く」はGoogleで110万件中トップ10に入っています。注力していないページが脚光を浴びているというような思わぬ発見もあります。
しかし、XHTMLでは、ソースにミスがあると意図通りに表示されないことが多く、この問題をさけるためにはソースの検証が必要となっています。
XHTMLの検証には、W3Cの「Markup Validator」を利用します。
「This Page Is Valid XHTML 1.0 Strict!」と表示されれば合格です。CSSの検証はW3Cの「CSS Validation Service」を利用します。
「検索キーワードチェックツール」も効果的です。
「ウェブライティング」をサーチすると、「桑原政則オンライン」内の「ウェブライティング」はGoogleで11位、MSNで3位となっています。しかしYahoo!には見あたりません。何らかの対策を立てるべきことがわかります。
「岩手県コラム」では「桑原政則オンライン」の「岩手県を歩く」はGoogleで110万件中トップ10に入っています。注力していないページが脚光を浴びているというような思わぬ発見もあります。
センタリング(中央寄せ)
ページ全体のセンタリングをする機能はCSSにはなく、混乱を招いています。
当座はセンタリングは左右マージンの値を「auto」にし、幅を指定します。
「margin: auto 」にした場合は、「上右下左」がautoになり、左右、垂直が中央寄せになります。
div#container {
width: 760px;
margin-left: auto;
margin-right: auto;
}
上はブロックレベルの場合ですが、インライン要素(ボックスの中のテキスト文)の場合には、以下のように指定します。
text-align: center;
当座はセンタリングは左右マージンの値を「auto」にし、幅を指定します。
「margin: auto 」にした場合は、「上右下左」がautoになり、左右、垂直が中央寄せになります。
div#container {
width: 760px;
margin-left: auto;
margin-right: auto;
}
上はブロックレベルの場合ですが、インライン要素(ボックスの中のテキスト文)の場合には、以下のように指定します。
text-align: center;
セレクタとプロパティ
セレクタとは、div#footer などのようにスタイルを適用する「場所」をいい、pやh1などの要素名のセレクタ、idセレクタ、クラスセレクタなどがあります。
idセレクタは、 XHTMLに「 <div id=”footer”> 」と記述した場合、CSS側には次のように記します。「#」でidセレクタであることを示します。
ウェブ標準では、XHTMLとCSSの両ファイルに記述をおこなうので混同しないようにします。
div#footer {
font-size: 75%;
}
上で、font-sizeのように文字サイズ、色、余白など要素(div#footer)がもつ表現の特性をプロパティといいます。
プロパティはCSS2で130個ほどあります。75%の部分を「値」といいます。
@@ここに画像
なお前述のごとく、「*#footer」のように「*」(ユニバーサルセレクタ)で要素を限定しない場合は、「#footer」というふうに「*」が省略可能となります。
クラスセレクタにおいては、XHTMLに「 <div class=”nav”> 」と記述した場合、CSSには次のように指定します。「.」でクラスセレクタであることを示します。
div.nav {
font-size: 75%;
}
なお、「*.aaa」のように「*」(ユニバーサルセレクタ)で要素を限定しない場合は、「.aaa」というふうに「*」が省略可能です。
子孫セレクタは、「Aセレクタの中のBセレクタ」を指定するときに使います。
セレクタは半角スペースで区切り、「#p .nav ul li」などといくつでも指定できます。
ここでは半角スペースが「の中の」を示します。従って上は、「p」の中の「.nav」の中の「ul」の中の「li」ということになります。
子孫セレクタを使いこなすことが、idセレクタやクラスセレクタを無意味に増やさないこつです。
idセレクタは、 XHTMLに「 <div id=”footer”> 」と記述した場合、CSS側には次のように記します。「#」でidセレクタであることを示します。
ウェブ標準では、XHTMLとCSSの両ファイルに記述をおこなうので混同しないようにします。
div#footer {
font-size: 75%;
}
上で、font-sizeのように文字サイズ、色、余白など要素(div#footer)がもつ表現の特性をプロパティといいます。
プロパティはCSS2で130個ほどあります。75%の部分を「値」といいます。
@@ここに画像
なお前述のごとく、「*#footer」のように「*」(ユニバーサルセレクタ)で要素を限定しない場合は、「#footer」というふうに「*」が省略可能となります。
クラスセレクタにおいては、XHTMLに「 <div class=”nav”> 」と記述した場合、CSSには次のように指定します。「.」でクラスセレクタであることを示します。
div.nav {
font-size: 75%;
}
なお、「*.aaa」のように「*」(ユニバーサルセレクタ)で要素を限定しない場合は、「.aaa」というふうに「*」が省略可能です。
子孫セレクタは、「Aセレクタの中のBセレクタ」を指定するときに使います。
セレクタは半角スペースで区切り、「#p .nav ul li」などといくつでも指定できます。
ここでは半角スペースが「の中の」を示します。従って上は、「p」の中の「.nav」の中の「ul」の中の「li」ということになります。
子孫セレクタを使いこなすことが、idセレクタやクラスセレクタを無意味に増やさないこつです。
セレクタ(selector)の書式
セレクタ(selector)とは「選別するもの」という意味です。
セレクタは、下のように書き方を統一しておきます。
たとえプロパティが1個の場合でもあとでふえることを考えて、複数行で記述しておきます。
セレクタ{
プロパティ: 値;
}
dd {
line-height: 130%;
}
プロパティが2個以上にわたる場合は、以下のように記述します。
body {
background: #ffffff;
margin-top: 0;
margin-bottom: 0;
letter-spacing: 0.2em;
line-height: 150%;
}
以下のルールを作っておけば、見やすくなり、ミスする確率も少なくなります
1. 宣言部分(プロパティ、値)にはインデントをいれる。
2. 最後の宣言のうしろにもセミコロンを付ける。
3. 閉じかっこはインデントしない。
セレクタは、下のように書き方を統一しておきます。
たとえプロパティが1個の場合でもあとでふえることを考えて、複数行で記述しておきます。
セレクタ{
プロパティ: 値;
}
dd {
line-height: 130%;
}
プロパティが2個以上にわたる場合は、以下のように記述します。
body {
background: #ffffff;
margin-top: 0;
margin-bottom: 0;
letter-spacing: 0.2em;
line-height: 150%;
}
以下のルールを作っておけば、見やすくなり、ミスする確率も少なくなります
1. 宣言部分(プロパティ、値)にはインデントをいれる。
2. 最後の宣言のうしろにもセミコロンを付ける。
3. 閉じかっこはインデントしない。
絶対配置によるレイアウト、positionプロパティ
positionプロパティを使えば、XHTML文書の順序に関係なく、最下段の要素を最上段にもってくるといったように、どこにでも特定のdiv要素を配置できます。
div#notice {
position: absolute;
width: 90px;
height: 20px;
left: 770px;
top: 10px;
}
注意すべきは、絶対配置は他のボックスとは、いわば別のレイヤー(階層)に属し、後続のボックスには影響を与えないので、絶対配置のボックスのテキスト量が肥大化した場合、後続のボックスと重なってしまうことがあることです。
このような場合にはheightプロパティの値を変更するになります。
position プロパティの値は、abosolute(絶対配置)の他に、relative(相対配置)、fixed(固定配置)、static(通常配置)があります。
fixed(固定配置)はボックスに適用すると、ページをスクロールした場合でも移動することなくウィンドウに固定したままとなります。
ナビゲーションや画像を固定したい場合に有効です。static(通常配置)はデフォルト設定で元に戻したいときに指定します。
div#notice {
position: absolute;
width: 90px;
height: 20px;
left: 770px;
top: 10px;
}
注意すべきは、絶対配置は他のボックスとは、いわば別のレイヤー(階層)に属し、後続のボックスには影響を与えないので、絶対配置のボックスのテキスト量が肥大化した場合、後続のボックスと重なってしまうことがあることです。
このような場合にはheightプロパティの値を変更するになります。
position プロパティの値は、abosolute(絶対配置)の他に、relative(相対配置)、fixed(固定配置)、static(通常配置)があります。
fixed(固定配置)はボックスに適用すると、ページをスクロールした場合でも移動することなくウィンドウに固定したままとなります。
ナビゲーションや画像を固定したい場合に有効です。static(通常配置)はデフォルト設定で元に戻したいときに指定します。
スタイルの指定
文字を含むボックスへのスタイル指定は、主としてp要素に対しておこなうのがCSSデザインの基本的な考え方です。
あるいは他の利用方法がない場合にp要素を利用します。CSSではフォントサイズ、行間、字間はもちろんマージン、パディングも変更できます。
div#contents p{
line-height: 150%;
letter-spacing: 0.2em;
margin: 0.2em;
padding: 0.3em
}
特定のdivの票素にではなく、全体のp要素に指定をおこなう場合は次のように指定します。
p{
line-height: 150%;
letter-spacing: 0.2em;
margin: 0.2em;
padding: 0.3em
}
あるいは他の利用方法がない場合にp要素を利用します。CSSではフォントサイズ、行間、字間はもちろんマージン、パディングも変更できます。
div#contents p{
line-height: 150%;
letter-spacing: 0.2em;
margin: 0.2em;
padding: 0.3em
}
特定のdivの票素にではなく、全体のp要素に指定をおこなう場合は次のように指定します。
p{
line-height: 150%;
letter-spacing: 0.2em;
margin: 0.2em;
padding: 0.3em
}
使用禁止文字
機種依存文字を使うとマッキントッシュなどの他の機種では、文字化けになってしまいます。
以下は使用禁止文字です。
半角カタカナ。
Ⅰ、Ⅱなどのローマ数字。
①、②などのマルつき数字。
㌔、㎞などの単位文字。
以下は使用禁止文字です。
半角カタカナ。
Ⅰ、Ⅱなどのローマ数字。
①、②などのマルつき数字。
㌔、㎞などの単位文字。
子孫セレクタの活用
XHTMLを最適化するには、無駄なid要素やclass要素を少なくします。
そのためにはこれらのセレクタの代わりに子孫セレクタでの代替を考えます。
たとえば、下のようにdiv要素でul要素をラップする必要はありません。
li要素にスタイルを適用する場合、classセレクタを利用すると下のように li要素ひとつひとつにclass属性をつけることになり面倒です。
li.items { display: inline; ... }
:
:
<ul id=”nav”>
<li class=”items”><a href=”...”>項目1</a></li>
<li class=”items”><a href=”...”>項目2</a></li>
<li class=”items”><a href=”...”>項目3</a></li>
</ul>
しかし子孫セレクタを使えばXHTML側での追加作業は必要ありません。そのためには、主要パーツの方にidづけしておきます。
ul#nav li { display: inline; ... }
:
:
<ul id=”nav”>
<li><a href=”...”>項目1</a></li>
<li><a href=”...”>項目2</a></li>
<li><a href=”...”>項目3</a></li>
</ul>
そのためにはこれらのセレクタの代わりに子孫セレクタでの代替を考えます。
たとえば、下のようにdiv要素でul要素をラップする必要はありません。
li要素にスタイルを適用する場合、classセレクタを利用すると下のように li要素ひとつひとつにclass属性をつけることになり面倒です。
li.items { display: inline; ... }
:
:
<ul id=”nav”>
<li class=”items”><a href=”...”>項目1</a></li>
<li class=”items”><a href=”...”>項目2</a></li>
<li class=”items”><a href=”...”>項目3</a></li>
</ul>
しかし子孫セレクタを使えばXHTML側での追加作業は必要ありません。そのためには、主要パーツの方にidづけしておきます。
ul#nav li { display: inline; ... }
:
:
<ul id=”nav”>
<li><a href=”...”>項目1</a></li>
<li><a href=”...”>項目2</a></li>
<li><a href=”...”>項目3</a></li>
</ul>
視覚表現に関する要素は使わない
たとえ、XHTML 1.0 Strictで認められていても視覚表現に関する要素、属性は使わない方がよろしいです。
XHTML 2.0草案(2005年)では、下の要素、属性はすべて廃止されています。
<b>、<i>、<big>、<small>、<tt>
table要素の<width>、<border>、<frame>、<rules>、<cellspacing>、 <cellpadding>の各属性
th、td要素の<align>、<valign>の各属性
XHTML 2.0草案(2005年)では、下の要素、属性はすべて廃止されています。
<b>、<i>、<big>、<small>、<tt>
table要素の<width>、<border>、<frame>、<rules>、<cellspacing>、 <cellpadding>の各属性
th、td要素の<align>、<valign>の各属性
サイト製作のワークフロー
1 設計:ページのイメージ図。画面(リキッドかフローズンか。サイズは800pxかその他か)。コンテンツは2列か3列か。
2 構造化:HTMLのバージョン、種類。マークアップ。
3 デザイン:CSSによるレイアウト
4 追加修正:テキスト文。ロゴ。ヘッダー、フッターの中身。グローバルナビ(主要メニュー)。サイトカラー。タイトル
5 更新。更新。更新:自分のサイトは生鮮三品のようなものです。会社経営と同じでもぐらたたきを継続する必要があります。田んぼと同じで雑草取りを欠かしてはなりません。常時手を加えて新鮮に保つ。
2 構造化:HTMLのバージョン、種類。マークアップ。
3 デザイン:CSSによるレイアウト
4 追加修正:テキスト文。ロゴ。ヘッダー、フッターの中身。グローバルナビ(主要メニュー)。サイトカラー。タイトル
5 更新。更新。更新:自分のサイトは生鮮三品のようなものです。会社経営と同じでもぐらたたきを継続する必要があります。田んぼと同じで雑草取りを欠かしてはなりません。常時手を加えて新鮮に保つ。
文字コード
文字コードはCSSファイルの第1行に記述しておきます。この文字コードセットは、XHTMLファイルには影響をおよぼしません。
@charset “Shift_JIS”;
「utf-8」の場合は 「@charset “utf-8”;」となります。
@charset “Shift_JIS”;
「utf-8」の場合は 「@charset “utf-8”;」となります。
回り込み
HTMLでは、画像をテキストの左側に回り込ませたい場合、「align=”left”」を使ったり、画像とテキストの間隔はhspace(左右の余白)、vspace(上下の余白)で指定したりしました。
しかしXHTMLではこれらはすべて非推奨属性であるので、「float」「margin」を使いCSSのimg要素に対して定義をおこないます。
img{
float: left;
margin-right: 30px;
margin-bottom: 20px;
}
floatプロパティを使ったあとで回り込みを解除するには、clearプロパティを用います。
XHTML側で、次のように記述します。「あいうえお」行から回り込みが解除されます。
<p class=”clearfloat”>あいうえお</p>
対して、CSS側では次のように指定します。
p.clearfloat {
clear: left;
}
なお、画像ではなくテキストを回り込みの対象とするとclearプロパティでは解除できません。
HTML要素のalign属性、hspace属性、vspace属性は、凝ったデザインになるほどファイルサイズが肥大化していきます。
CSSを用いれば、デザインはすべてCSSで管理できるので、XHTMLソースはシンプルになります。
このようにCSSのデザインの作業は、情報の表示順序を決めるリニアライズ(線形化)から始まり、情報をfloatプロパティで並べ替えたりして段組みをおこない、そのあと見栄えを整えていくことになります。
段組みプロパティは、現行のCSS2には用意されておらず、CSS3に含まれることになっています。
しかしXHTMLではこれらはすべて非推奨属性であるので、「float」「margin」を使いCSSのimg要素に対して定義をおこないます。
img{
float: left;
margin-right: 30px;
margin-bottom: 20px;
}
floatプロパティを使ったあとで回り込みを解除するには、clearプロパティを用います。
XHTML側で、次のように記述します。「あいうえお」行から回り込みが解除されます。
<p class=”clearfloat”>あいうえお</p>
対して、CSS側では次のように指定します。
p.clearfloat {
clear: left;
}
なお、画像ではなくテキストを回り込みの対象とするとclearプロパティでは解除できません。
HTML要素のalign属性、hspace属性、vspace属性は、凝ったデザインになるほどファイルサイズが肥大化していきます。
CSSを用いれば、デザインはすべてCSSで管理できるので、XHTMLソースはシンプルになります。
このようにCSSのデザインの作業は、情報の表示順序を決めるリニアライズ(線形化)から始まり、情報をfloatプロパティで並べ替えたりして段組みをおこない、そのあと見栄えを整えていくことになります。
段組みプロパティは、現行のCSS2には用意されておらず、CSS3に含まれることになっています。
マルチカラムレイアウト multi-column layout
マルティカラムレイアウトは、段組みレイアウト、多段組みともよばれます。
CSS特有の技法floatプロパティを使っておこないます。
この作業の際には div要素でつくったボックスに背景色と文字色を指定しておくと、ボックスが視覚化できるので混乱を招くことがありません。
暫定的に指定した背景色は完成後に削除します。
Dreamweaver 8のようなオーサーリングツールにはこのような機能(ビジュアルエイド)がそなえられています。段組みは2段組み、3段組みが主流です。
段組み以上の場合は、ボックスに下位ボックスを組み込んでおこないます。
CSS特有の技法floatプロパティを使っておこないます。
この作業の際には div要素でつくったボックスに背景色と文字色を指定しておくと、ボックスが視覚化できるので混乱を招くことがありません。
暫定的に指定した背景色は完成後に削除します。
Dreamweaver 8のようなオーサーリングツールにはこのような機能(ビジュアルエイド)がそなえられています。段組みは2段組み、3段組みが主流です。
段組み以上の場合は、ボックスに下位ボックスを組み込んでおこないます。
更新履歴
追加や更新がおこなわれたのがどこかわかるように更新履歴をトップページの目立つ場所に表示します。
RSSを配信することもおこなわれています。RSSはブログでよく利用されているもので、更新履歴を公開するための専用データです。
(「桑原政則オンライン」では、毎日更新ですので、下段に「履歴」をおいています。重要なことがらは「★お知らせ」で上段に通知しています。)
RSSを配信することもおこなわれています。RSSはブログでよく利用されているもので、更新履歴を公開するための専用データです。
(「桑原政則オンライン」では、毎日更新ですので、下段に「履歴」をおいています。重要なことがらは「★お知らせ」で上段に通知しています。)
「くまっ典」(トップページ)のXHTML+CSS
見出し部分に背景色をつけました。右上を角丸(かどまる)にし、キャッチーでやわらかいイメージにしました。
本文の部分は見出し部と同一の色で二重線で囲む。
/* kumatten
------------------------------------------------*/
#frame1{
background-color: #FFCC00;
background-image: url(../image/frame-top-right.jpg);
background-repeat: no-repeat;
background-position: right top;
padding: 20px;
}
#frame2 {
border: 4px double #FFCC00;
line-height: 150%;
padding: 10px;
}
#frame0 {
width: 100%;
}
#frame1 p {
margin: 0px;
本文の部分は見出し部と同一の色で二重線で囲む。
/* kumatten
------------------------------------------------*/
#frame1{
background-color: #FFCC00;
background-image: url(../image/frame-top-right.jpg);
background-repeat: no-repeat;
background-position: right top;
padding: 20px;
}
#frame2 {
border: 4px double #FFCC00;
line-height: 150%;
padding: 10px;
}
#frame0 {
width: 100%;
}
#frame1 p {
margin: 0px;
空要素
空要素でも「br /」(ビー、アール、スペース、スラッシュ)というふうにタグを「/」でマークアップする。
おもな空要素には次のようなものがある。
br, col, hr, img, input, link, meta, param
おもな空要素には次のようなものがある。
br, col, hr, img, input, link, meta, param
画像 枠をはみ出す:The Holly Hack
/* 親ボックスからはみ出すバグを回避 */
.boxin:after {
content:".";
display: block;
clear: both;
height: 0px;
visibility: hidden;
}
.boxin {
display: inline-table;
}
/* Mac版 IEではこの設定は無視されるのでWin版 IEのみ適用 \*/
* html .boxin {height: 1%;}
.boxin {display:block}
/* ここまで */
.boxin:after {
content:".";
display: block;
clear: both;
height: 0px;
visibility: hidden;
}
.boxin {
display: inline-table;
}
/* Mac版 IEではこの設定は無視されるのでWin版 IEのみ適用 \*/
* html .boxin {height: 1%;}
.boxin {display:block}
/* ここまで */
ロボット検索回避
<meta name="robots" content="noindex,nofollow">
* noindex - 検索データベースへの登録を禁止
* nofollow - このページに含まれるリンクをたどることを禁止
* noindex - 検索データベースへの登録を禁止
* nofollow - このページに含まれるリンクをたどることを禁止
「ウェブライティング」(トップページのボックス欄)のXHTML+CSS
見出しに濃い色を、段落に同系の薄い色を設定して、一体感を出しました。
【XHTML】
<div id="webwriting">
<h2 class="columntitle">▼<a href="webwritingpg.html">ウェブ
ライティング</a>: <a href="emailpg.htm">電子メール編</a></h2>
<dl class="column2">
<dt>定義語 </dt>
<dd>定義の説明</dd>
</dl></div>
【CSS】
/* webwriting
------------------------------------------*/
h2.columntitle {
background: #006600;
color: #DFDFDF;
margin: 0px;
padding: 10px;
}
h2.columntitle a:link{
color: #ffffff;
}
h2.columntitle a:visited{
color: #ffffff;
}
h2.columntitle a:hover{
color: #ff6600;
}
h2.columntitle a:active{
color: #ff6600;
}
dl.column2 {
background: #AAFFAA;
margin: 0px;
padding: 10px;
}
p.column2 {
background-color:#99ff66;
margin:0px;
padding: 10px;
font-weight: normal;
}
【XHTML】
<div id="webwriting">
<h2 class="columntitle">▼<a href="webwritingpg.html">ウェブ
ライティング</a>: <a href="emailpg.htm">電子メール編</a></h2>
<dl class="column2">
<dt>定義語 </dt>
<dd>定義の説明</dd>
</dl></div>
【CSS】
/* webwriting
------------------------------------------*/
h2.columntitle {
background: #006600;
color: #DFDFDF;
margin: 0px;
padding: 10px;
}
h2.columntitle a:link{
color: #ffffff;
}
h2.columntitle a:visited{
color: #ffffff;
}
h2.columntitle a:hover{
color: #ff6600;
}
h2.columntitle a:active{
color: #ff6600;
}
dl.column2 {
background: #AAFFAA;
margin: 0px;
padding: 10px;
}
p.column2 {
background-color:#99ff66;
margin:0px;
padding: 10px;
font-weight: normal;
}
ウェブ標準
ウェブスタンダードって何?どうして使うべきなんだろう?
"What are web standards and why should I use them?"The Web Standards Projectの和訳
"What are web standards and why should I use them?"The Web Standards Projectの和訳
ウェブ標準の作業の流れ
従来のHTMLの編集はホームページビルダーなどのオーサリングツールだけで事足れりでしたが、ウェブ標準ではXHTML文書とCSSに対する2種の対策が必要となります。
XHTML側においては次のような作業の流れになります。
1. テキスト原稿を、<h1>、<p>や<img>などの要素でマークアップし、リンク指定もおこなう。
2. <div>要素などで内容を区画整理し、グループ化する。また<id>属性や<class>による下位区分の作業をおこなう。このマークアップ作業はCSS作成時にも、さらに並行しておこなうことになる。
3. XHTML文書が完成したら構文チェックをおこなう。
XHTMLソースで構文ミスがあると、正しいCSSを指定しても正常表示されないケースが多いので、XHTMLソースを適切に記述、構造化することが、シンプルなCSS制作への道です。 このあと、CSS側では、次のような作業をおこないます。
1. 構造のスタイルを示すマークアップ作業とCSS特有のマークアップ作業をおこなう。
2. 構文チェックをおこなう。
3. 各種ブラウザで表示の確認をする。この作業のためには、「ボックスモデル」「回り込み」「CSSハック」を正しく理解しておく必要がある。
・オーサリングツールウィキペディア
XHTML側においては次のような作業の流れになります。
1. テキスト原稿を、<h1>、<p>や<img>などの要素でマークアップし、リンク指定もおこなう。
2. <div>要素などで内容を区画整理し、グループ化する。また<id>属性や<class>による下位区分の作業をおこなう。このマークアップ作業はCSS作成時にも、さらに並行しておこなうことになる。
3. XHTML文書が完成したら構文チェックをおこなう。
XHTMLソースで構文ミスがあると、正しいCSSを指定しても正常表示されないケースが多いので、XHTMLソースを適切に記述、構造化することが、シンプルなCSS制作への道です。 このあと、CSS側では、次のような作業をおこないます。
1. 構造のスタイルを示すマークアップ作業とCSS特有のマークアップ作業をおこなう。
2. 構文チェックをおこなう。
3. 各種ブラウザで表示の確認をする。この作業のためには、「ボックスモデル」「回り込み」「CSSハック」を正しく理解しておく必要がある。
・オーサリングツールウィキペディア
印刷用の設定
CSSでは、ブラウザスタイルを初期化し、固定幅やフロートを解除し、印刷に不要な内容を非表示化し、モノクロ印刷用の設定をしたりすることが可能です。
「桑原政則オンライン」のかつての例を掲げます。プリントの状態は、プリントプレビューで確認可能です。
@charset “shift_jis”;
body {
margin-left: 1cm;
color: #000000;
background: #ffffff;
line-height: 1.8;
font-size: 10pt;
font-family: “MS明朝”,serif;
}
a {
color: black;
text-decoration: none;
}
.banner {
display: none;
}
h1 {
font-size: 16pt ;
}
h2 {
font-size: 14pt ;
}
h3 {
font-size: 12pt;
}
h4 {
font-size: 11pt;
}
「桑原政則オンライン」のかつての例を掲げます。プリントの状態は、プリントプレビューで確認可能です。
@charset “shift_jis”;
body {
margin-left: 1cm;
color: #000000;
background: #ffffff;
line-height: 1.8;
font-size: 10pt;
font-family: “MS明朝”,serif;
}
a {
color: black;
text-decoration: none;
}
.banner {
display: none;
}
h1 {
font-size: 16pt ;
}
h2 {
font-size: 14pt ;
}
h3 {
font-size: 12pt;
}
h4 {
font-size: 11pt;
}
アクセスアップ
商用サイトでは、アクセスとは来客と同じことで、売り上げと直結しています。個人サイトではやる気と直結しています。
アクセスアップの方法は、初訪問者をふやすこと、リピーター(再訪問者、常連客)をふやすことです。
初訪問者をふやすには、検索エンジンで上位をめざすことと、外部からのリンクをふやすことです。
リピーターをふやすには、内容の質を高め、読みやすくしたりすることです。
アクセスアップの方法は、初訪問者をふやすこと、リピーター(再訪問者、常連客)をふやすことです。
初訪問者をふやすには、検索エンジンで上位をめざすことと、外部からのリンクをふやすことです。
リピーターをふやすには、内容の質を高め、読みやすくしたりすることです。
XHTMLの誕生とメリット
HTMLは、SGML(Standard Generalized Markup Language)を基盤言語として生まれました。
しかしSGMLは一部陳腐化しはじめ、近年にいたりXML(Extensible Markup Language)として生まれ変わりました。
XMLは、自由に新しい言語を規定できるので、ビジネスにおける標準的な文書形式として浸透しつつあります。
このXMLを基盤言語とするのがXHTML(Extensible HyperText Markup Language)です。
XHTML では、データに必要な要素をDTD(文書型定義)として自由に定義することができるなどの多くの利点があります。
XHTMLは、「終了タグが省略不可」、「オーバーラップ不可」といった整形式(well-formed)で記述をするので、処理系の負荷が軽減され、データ処理が高速化され、ブラウザの動作が安定します。
またDOMの利用によるデータベースとの連結や、XSLTによる文書変換が可能となるなどデータの再利用性、情報の共有化が高まるといったメリットがあります。
さらに名前空間の利用により、MathMlやSVGなどのXMLアプ@@文章が途切れてます
しかしSGMLは一部陳腐化しはじめ、近年にいたりXML(Extensible Markup Language)として生まれ変わりました。
XMLは、自由に新しい言語を規定できるので、ビジネスにおける標準的な文書形式として浸透しつつあります。
このXMLを基盤言語とするのがXHTML(Extensible HyperText Markup Language)です。
XHTML では、データに必要な要素をDTD(文書型定義)として自由に定義することができるなどの多くの利点があります。
XHTMLは、「終了タグが省略不可」、「オーバーラップ不可」といった整形式(well-formed)で記述をするので、処理系の負荷が軽減され、データ処理が高速化され、ブラウザの動作が安定します。
またDOMの利用によるデータベースとの連結や、XSLTによる文書変換が可能となるなどデータの再利用性、情報の共有化が高まるといったメリットがあります。
さらに名前空間の利用により、MathMlやSVGなどのXMLアプ@@文章が途切れてます
SEO 検索エンジン最適化 Search Engine Optimization
「アクセスアップ術」。検索ランキングで上位を目指すテクニックのことですが、結局は内容の高いバリアフリーのホームページが上位に来るようになっています。バリアフリーとは、まずはウェブ標準(XHTMLとCSS) 仕様のことです。 SEOの基本は「いかに訪問者にためになりわかりやすいウェブをつくるか」ということです。
検索キーワードチェックツール検索キーワードの順位チェックや、検索エンジンの一括検索
SEMリサーチSESとはSearch Enigine Strategiesのこと
検索キーワードチェックツール検索キーワードの順位チェックや、検索エンジンの一括検索
SEMリサーチSESとはSearch Enigine Strategiesのこと
metaname keywords (「電子メール編」のページの場合)
半角カンマを使用
<meta name="Keywords" content="ウェブライティング,文章術,電子メール,作文,ウェブ標準(XHTML+CSS),桑原政則,Masanori Kuwabara" />
<meta name="Keywords" content="ウェブライティング,文章術,電子メール,作文,ウェブ標準(XHTML+CSS),桑原政則,Masanori Kuwabara" />
metaname description
半角カン マを使用
<meta name="Description" content="ウェブライティング,日本の地域,東南アジア,辞事典,総合情報についての桑原政則の空中図書館です。" />
<meta name="Description" content="ウェブライティング,日本の地域,東南アジア,辞事典,総合情報についての桑原政則の空中図書館です。" />
idセレクタ、classセレクタ
CSSでは原則としてidを使い、他のものと役割が共通する場合にだけ、例外的にclassを使うという発想が大切です。
idを個人とするならば、classは集団といえます。基本的にid、classには、「form#request」というふうにformなどの要素タイプを前接し、「#request」のようにオープンにしないのが原則です。
idやclassのネーミングは、「header」「contents」「subcontents」「footer」のように意味を基準にするのがよろしいです。
「red」「left」といった見た目を基準にすると、あとで「red」部をグリーンに、「left」部を中央に変更したりすることが生じた場合混乱を招きます。
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 | フッター |
em要素 <CSS
em要素は、斜体で表示されてしまいます。斜体は日本語では読みにくいです。
斜体を避け、赤の太字で表示したい場合は次のように指定します。
なおstrong要素は「より強調」で通常は太字で表示されます。
emphasis=強調
em { color: #ff0000; font-weight: bold; font-style: normal; }
斜体を避け、赤の太字で表示したい場合は次のように指定します。
なお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">
<?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>
<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のためです。
このような問題を回避するために、次のような対策を講じておきます。
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ハック
登録:
投稿 (Atom)