久しぶりの更新です。徐々に更新頻度が落ちてきてしまいました。
近況を言いますと、いくつかのHP更新案件を担当者としてやっていくことが決まりました。
とはいえ、完全に一人でやるわけではなく、もう一人一緒に作業を行う同僚がいるので、実作業は二人で行い、さらに僕達のその作業を統括ディレクターの方がサポートして頂けるので、担当者としてやっていけると思います。
色んな方に支えてもらいながらですが、少しずつ仕事としてできる事が増えてきたのはうれしいですね。
いままでに、ＨＰの一部であったりですが変更や作成などやらせて頂けるようになり、一人で作りきったものではないにしろ、インターネット環境であれば誰でも閲覧できる『作品』として自分が関われているというのは、楽しく、やりがいも感じられるものです。
学生時代から、「図画工作」や「美術」「技術」の授業は好きで成績もそれなりによかったので、「やっぱり、何かを（作る）というのは好きなんだな」と改めて実感できました。
では、つづきを進めていきたいと思います。
●画像とテキストをひとつのa要素に含め、クリッカブルエリアを大きく
左側に画像、右側にテキストという見た目の部分で、画像とテキストを別々のp要素としてマークアップする、両方をdl要素に含めて（画像をdl要素、テキストをdd要素で）マークアップするなど、さまざまな方法が思い浮かぶ。
ひとつのp要素に両方を含め、a要素でマークアップ
<p>
<a href="sample.html">
<span class="visual"><img src="img/container/service-seminar/mail-magazine01.gif"
alt="" width="90" height="45" class="btn" /></span>
<span class="description">クールスポーツのメールマガジンサービス。 <br />
毎週COOLなスポーツ情報をお届けします。</span>
</a>
</p>
まとめてa要素でマークアップすることで、画像とテキストのどちらでカーソルオンしてもクリックでき、両方の関係性もユーザーにとって理解しやすくなる。
●バナー画像のインタラクション効果
バナー画像にカーソルオンすると、ハイライトされたような効果を与えるのに、CSSやjavascriptで画像を直接切り替えること（ロールオーバー）もできるが、CSSだけでこのような視覚効果を実現。
FirefoxなどのCSSサポートのよいブラウザに対しては、CSSで追加予定のopacityプロパティを、IEには独自実装のフィルター機能を適用して実現。
#banner li a:hover img {
opacity: 0.6; /* CSSで追加予定のプロパティ */
filter: alpha(opacity=60); /* IEの独自実装機能 */
}
これらは不透明度の指定で、カーソルオン時には６０％の不透明度（つまり４０％の透明度）にすることで、カーソルオンしていることをユーザーにはっきりと伝えるために指定している。
このようにCSS3のプロパティやIEの独自実装機能を指定すると、CSS2.1には正式に準拠しないことに（「invalid」に）なるが、ここではページの読込み速度やメンテナンス性を優先している。
●連番を使ったクラス名
カテゴリー数やページ数が増えてくると、「同じ意味合いのクラス名をつかたいが、見た目は変えなければならない」という状況に遭遇することが多くなる。たとえば、ある部分の背景色について、あるカテゴリーでは赤、あるカテゴリーでは青、というように。
body要素にIDやクラスをつけ、カテゴリーやページごとで適用するスタイルを変える「CSSシグネチャ」というテクニックを利用したり、読み込むCSSファイルを変更することでも対応できるが、ここではできるだけクラス名のみで管理しようと判断しクラス名に連番を使っている。
このように、カテゴリーごとやページごとのスタイルを変える方法を何パターンか身につけておくと、制作するWebサイトに合わせた柔軟なスタイリングや作業の効率化が可能となる。
●IDとクラスの同時指定
あらゆる要素でIDとクラスの同時指定が可能。さらにクラスについては半角スペースで区切って複数指定できる。例えば、IDに「id01」、クラスに「class01」「class02」と指定された要素を考えてみると、CSSで指定できるIDセレクタ・クラスセレクタは次の７通りとなる。
・ #id01
・ .class01
・ .class02
・ .class01.class02 （クラスが「class01」と「class02」の要素）
・ #id01.class01 （IDが「id01」で、クラスが「class01」の要素）
・ #id01.class02 （IDが「id01」で、クラスが「class02」の要素）
・ #id01.class01.class02 （IDが「id01」で、クラスが「class01」と「class02」の要素）
さらに、IDとクラスはどちらが先でも構わない（たとえば「.class01#id01」でもよい）ことを考えると、さまざまな記述方法が混在してしますリスクがある。メンテナンス性が低下しないように、制作チーム内でセレクタの記述方法についてルール化し、共有しておくことが大切。
今日はここまで。
2011年11月17日木曜日
2011年11月7日月曜日
三十九日目！（3カラムレイアウト～）
3カラムレイアウトのニュースサイト。情報量が多い作例となっているが、XHTMLを丁寧に構造化することが、効率的なCSS制作につながることを体感する。
●div要素の構造
div#header、div#global-nav、div#search、div#primary-topics
ヘッダー領域のdiv要素。キービジュアル「日本対ブラジル戦」の部分は、そのときにもっと優先度の高いトピックが入ることを想定して、「div#primary-topics」としている。
div#footer、div#footer-nav
フッター領域のdiv要素。「会社案内」から「お問い合わせ」までのナビゲーション部分は、div要素で囲まれなくても（ul要素のままで）見た目を再現することができるが、グローバルナビゲーションなどと同様に、構造的な意味を明確に示すために「div#footer-nav」とマークアップしている。
div#container、div.column01.first-child、div.column01、div.column02
本文内容を含める部分で、とても情報量が多い。3カラムでレイアウトするが、まず各カラムを形成するdiv要素に「.column01」「.column02」というクラスを指定している。さらに「div#container」内で最初に登場するカラム（一番左のカラム）には「.first-child」というクラスをつけ、異なるスタイルを適用できるようにしている。
div.section-lv2#topics/#cool-players/#service-seminar/#special-contents/#banner
1カラムレイアウト、2カラムレイアウトでもおなじみの、h2要素を含めるdiv要素。クラス（.section-lv2）で共通のスタイルを適用しながら、IDセレクタで別のスタイルを適用できるようにしている。
div.section-lv3、div.section-lv3.last-child
h3要素を含めるdiv要素。見出しレベルh1要素、h2要素、h3要素の順で出現するように、「div.section-lv3」は「div.section-lv2」の下位要素としてしか出現しない。それぞれの範囲で最後に出現する「div.section-lv3」には「.last-child」というクラスを指定し、別のスタイルを適用できるようにしている。
●見出し要素の構造
情報量が多くなるにともない、見出しの数も増えていく。h1要素からh6要素までのどれでマークアップすればよいのかも悩むことがある。作例では「情報の固まりごとにdiv要素を設けて見出しを指定する」、「見出しはh1、h2、h3・・・という順番で指定する」とルール決めしてマークアップしている。見出しの順序というと、h1要素のあとにh2要素を飛ばしてh3要素が出現するページを見かけることもあるが、ここでは理想的な見出し構造にしている。
●マルチカラムの高さを背景画像で揃える
「div#container」に含まれる3カラムのうち、左側と真ん中のカラムは白の背景色で上下左右にグレーの境界線が引かれている。両方の背景の高さが常に揃っていることが、デザインカンプから読み取れるが、それぞれの高さは内容量に依存する。heightプロパティで高さを指定することもできるが、内容量にあわせてたびたび値を変更するのは面倒なので、親要素である「div#container」の背景に、グレーの境界線を引いた縦長の画像を指定することで、あたかも常に高さが揃っているように見せることにしている。
文字サイズを大きくしてもグレーの境界線を引いた縦長の画像の”見きれ”が発生しないように、画像の高さは大きめにしておく。
今日はここまで。
●div要素の構造
div#header、div#global-nav、div#search、div#primary-topics
ヘッダー領域のdiv要素。キービジュアル「日本対ブラジル戦」の部分は、そのときにもっと優先度の高いトピックが入ることを想定して、「div#primary-topics」としている。
div#footer、div#footer-nav
フッター領域のdiv要素。「会社案内」から「お問い合わせ」までのナビゲーション部分は、div要素で囲まれなくても（ul要素のままで）見た目を再現することができるが、グローバルナビゲーションなどと同様に、構造的な意味を明確に示すために「div#footer-nav」とマークアップしている。
div#container、div.column01.first-child、div.column01、div.column02
本文内容を含める部分で、とても情報量が多い。3カラムでレイアウトするが、まず各カラムを形成するdiv要素に「.column01」「.column02」というクラスを指定している。さらに「div#container」内で最初に登場するカラム（一番左のカラム）には「.first-child」というクラスをつけ、異なるスタイルを適用できるようにしている。
div.section-lv2#topics/#cool-players/#service-seminar/#special-contents/#banner
1カラムレイアウト、2カラムレイアウトでもおなじみの、h2要素を含めるdiv要素。クラス（.section-lv2）で共通のスタイルを適用しながら、IDセレクタで別のスタイルを適用できるようにしている。
div.section-lv3、div.section-lv3.last-child
h3要素を含めるdiv要素。見出しレベルh1要素、h2要素、h3要素の順で出現するように、「div.section-lv3」は「div.section-lv2」の下位要素としてしか出現しない。それぞれの範囲で最後に出現する「div.section-lv3」には「.last-child」というクラスを指定し、別のスタイルを適用できるようにしている。
●見出し要素の構造
情報量が多くなるにともない、見出しの数も増えていく。h1要素からh6要素までのどれでマークアップすればよいのかも悩むことがある。作例では「情報の固まりごとにdiv要素を設けて見出しを指定する」、「見出しはh1、h2、h3・・・という順番で指定する」とルール決めしてマークアップしている。見出しの順序というと、h1要素のあとにh2要素を飛ばしてh3要素が出現するページを見かけることもあるが、ここでは理想的な見出し構造にしている。
●マルチカラムの高さを背景画像で揃える
「div#container」に含まれる3カラムのうち、左側と真ん中のカラムは白の背景色で上下左右にグレーの境界線が引かれている。両方の背景の高さが常に揃っていることが、デザインカンプから読み取れるが、それぞれの高さは内容量に依存する。heightプロパティで高さを指定することもできるが、内容量にあわせてたびたび値を変更するのは面倒なので、親要素である「div#container」の背景に、グレーの境界線を引いた縦長の画像を指定することで、あたかも常に高さが揃っているように見せることにしている。
今日はここまで。
2011年11月1日火曜日
三十八日目！（２カラム化、段落ち）
●２カラム化のテクニック
「第２章CSSのキホン」で簡単に解説しているとおり、２カラム化のテクニックはそれほど難しくない。かくカラムとなる、div要素にwidthプロパティで幅指定し、floatプロパティで左右どちらかにシフトさせるだけでOK。
#primary-contents {
float: left; /* 左にフロート */
width: 420px;
}
#secondary-contents {
float: right; /* 右にフロート */
width: 290px;
}
「div#primary-contents」と「div#secondary-contents」に指定しているfloatプロパティの値を入れ替えることで、左右の位置を変更することも可能。
ただし、ここで注意しなければならない以下の２点。
後続の要素の回り込み解除
「div#primary-contents」と「div#secondary-contents」にフロートを指定したことで、後続の内容も回りこんでしまう現象が発生する。
これは、「フロートされた要素は、親要素（作例では「div#container」）の高さとは無関係に配置される」というCSS仕様の決まりがあるため。この場合、「div#footer」にclearプロパティを指定して回りこみを解除するか、「clearfix」というテクニックを利用して、後続の要素が出現する前に回りこみを解除する対策が必要。
ここでは「div#container」に背景色をしており、「div#footer」に「clear:both;」と指定して回りこみを解除しても「div#container」の背景色は領域全体に塗られないので、簡易的な「clearfix」（「overflow:hidden;」と指定）で回りこみを解除する。
#container {
overflow: hidden; /* 簡易的な clearfix */
}
/* IE 6 に適用 */
* html #container {
zoom: 1;
}
カラム落ち（段落ち）
マルチカラムレイアウトを習得する際に、必ずといってよいほど遭遇する問題は「カラム落ち」（段落ち）。カラム落ちとは、各カラムを左右に並べようとしても、それぞれのボックスサイズが大きすぎるためにおさまりきらず、どちらかのカラムが下に落ちてしまう状態。
例えば「div#primary-contents」の幅を「420px」ではなく「520px」にした場合「」div#secondary-contents」がおさまりきらず、下に落ちてしまう。したがってwidthプロパティの値を「520px」から「420px」に変更すれば解決することになる。
#primary-contents {
float: left;
width: 420px; /* 520pxを420pxに変更 */
}
他のカラム落ちの発生理由としては、おおよそ次の4つが考えられる。
●widthプロパティとともにpadding、borderプロパティを指定したことでボックスサイズが大きくなってしまっている。widthプロパティはあくまで内容領域の幅指定である点に注意。
●とても長いURLや、１行のセル数がとても多い表、親要素のボックスサイズよりも大きい画像の挿入などのため、IEの古いバージョンでボックスの大きさが拡張されてしまっている。
●IEの古いバージョンで、floatプロパティとともに指定したmarginプロパティの値が大きく解釈されてしまっている。
●IEの古いバージョンで、ほかのブラウザとボックスモデルの解釈が違う。これを「ボックスモデルバグ」という。
どうしても原因がわからない場合には、一部のコンテンツを削除しながら（XHTMLで対応するソースコードを削除しながら）確認していく。あるコンテンツを削除してみたときにカラム落ちが直れば、そのコンテンツが悪さをしている（CSSによる幅指定などに問題がある）と考えることができる。
今日はここまで。
「第２章CSSのキホン」で簡単に解説しているとおり、２カラム化のテクニックはそれほど難しくない。かくカラムとなる、div要素にwidthプロパティで幅指定し、floatプロパティで左右どちらかにシフトさせるだけでOK。
#primary-contents {
float: left; /* 左にフロート */
width: 420px;
}
#secondary-contents {
float: right; /* 右にフロート */
width: 290px;
}
「div#primary-contents」と「div#secondary-contents」に指定しているfloatプロパティの値を入れ替えることで、左右の位置を変更することも可能。
ただし、ここで注意しなければならない以下の２点。
後続の要素の回り込み解除
「div#primary-contents」と「div#secondary-contents」にフロートを指定したことで、後続の内容も回りこんでしまう現象が発生する。
これは、「フロートされた要素は、親要素（作例では「div#container」）の高さとは無関係に配置される」というCSS仕様の決まりがあるため。この場合、「div#footer」にclearプロパティを指定して回りこみを解除するか、「clearfix」というテクニックを利用して、後続の要素が出現する前に回りこみを解除する対策が必要。
ここでは「div#container」に背景色をしており、「div#footer」に「clear:both;」と指定して回りこみを解除しても「div#container」の背景色は領域全体に塗られないので、簡易的な「clearfix」（「overflow:hidden;」と指定）で回りこみを解除する。
#container {
overflow: hidden; /* 簡易的な clearfix */
}
/* IE 6 に適用 */
* html #container {
zoom: 1;
}
カラム落ち（段落ち）
マルチカラムレイアウトを習得する際に、必ずといってよいほど遭遇する問題は「カラム落ち」（段落ち）。カラム落ちとは、各カラムを左右に並べようとしても、それぞれのボックスサイズが大きすぎるためにおさまりきらず、どちらかのカラムが下に落ちてしまう状態。
例えば「div#primary-contents」の幅を「420px」ではなく「520px」にした場合「」div#secondary-contents」がおさまりきらず、下に落ちてしまう。したがってwidthプロパティの値を「520px」から「420px」に変更すれば解決することになる。
#primary-contents {
float: left;
width: 420px; /* 520pxを420pxに変更 */
}
他のカラム落ちの発生理由としては、おおよそ次の4つが考えられる。
●widthプロパティとともにpadding、borderプロパティを指定したことでボックスサイズが大きくなってしまっている。widthプロパティはあくまで内容領域の幅指定である点に注意。
●とても長いURLや、１行のセル数がとても多い表、親要素のボックスサイズよりも大きい画像の挿入などのため、IEの古いバージョンでボックスの大きさが拡張されてしまっている。
●IEの古いバージョンで、floatプロパティとともに指定したmarginプロパティの値が大きく解釈されてしまっている。
●IEの古いバージョンで、ほかのブラウザとボックスモデルの解釈が違う。これを「ボックスモデルバグ」という。
どうしても原因がわからない場合には、一部のコンテンツを削除しながら（XHTMLで対応するソースコードを削除しながら）確認していく。あるコンテンツを削除してみたときにカラム落ちが直れば、そのコンテンツが悪さをしている（CSSによる幅指定などに問題がある）と考えることができる。
今日はここまで。
2011年10月28日金曜日
三十七日目！（コンテンツのセンタリング～）
●コンテンツをセンタリングするテクニック
作例では、ページのコンテンツ全体をセンタリングしている。ほとんどのサイトが、このように全体がセンタリングされるか、左寄せになっている。もしかしたら、右寄せにしたいという需要もあるかもしれない。このように、「コンテンツをどの方向に寄せるか」は、次のようなブロックレベル要素の左寄せ、センタリング、右寄せのしくみに基づいて決定される。
ブロックレベル要素の左寄せ
幅を指定して、「margin-right:auto;」を指定する
ブロックレベル要素のセンタリング
幅を指定して、「margin-right:auto; margin-left:auto;」を指定する
ブロックレベル要素の右寄せ
幅を指定して、「margin-left:auto;」を指定する
このように、寄せたい方向とは逆のマージンに「auto」と指定するのがポイント。センタリングについては、左右両方に「auto」と指定することで、結果的に中央に寄る事になる。
#header {
width: 424px;
margin: 0 auto; /* ボックスのセンタリング */
}
#container {
width: 376px;
margin: 0 auto; /* ボックスのセンタリング */
padding: 24px;
}
#footer {
width: 376px;
margin: 0 auto; /* ボックスのセンタリング */
padding: 0 24px 24px;
}
2カラムレイアウト
左にメイン部分、右にサイド部分を置く２カラムレイアウト。ブログ、コーポレートサイト、ニュースサイトなどあらゆるジャンルで広く利用されているレイアウト。基本的な段組みの方法と、positionプロパティの使いどころを押さえる。
●div要素の構造
div#headeer、div#container、div#footer
1カラムレイアウトと同じように、３つの主要部分による構成。１カラムレイアウトでは書籍にたとえて説明したが、Webサイトの構造にあわせて説明すると次のようになる。
div#header（ヘッダー）
コーポレートサイトロゴやサイトロゴ、キャッチコピーなど、アイデンティティを確立するうえで、重要なコンテンツなど、グローバルナビゲーションやサイト内検索など、Webサイトの機能性や利便性を支えるためのコンテンツを含めるのが一般的。
container（コンテナ）
メイン部分とサイド部分で構成されるのが一般的。
div#footer（フッター）
著作権表記や控えめなコーポレートロゴなどの運営情報や、個人情報保護方針や特定商取引法もとづく表記など、補足的な意味合いの強いコンテンツへのナビゲーションを含めるのが一般的。
div#global-nav、div#search、div#utility-nav
サイト内の回遊性を高めるための主な機能軍。デザインカンプでは上から「div#utility-nav」「div#search」「div#global-nav」という順番になっているが、グローバルナビゲーションはもっとも重要な目次であるため、補完的な意味合いの「サイト内検索」や「お問い合わせ・サイトマップ」よりも先に記述している。
このように、見た目の順序とXHTMLのソースコードの記述順序はいったん切り離して考え、「どのコンテンツが重要なのか、先に記述すべきか」を判断しながらXHTMLを制作することが大切。
div#section-lv1#primary-contents、div#secondary-contents
「div.structure#container」内で各カラムとなるdiv要素。本文を「#primary-contents」、サイドバーを「#secondary-contents」としている。
div.section-lv2、div.section-lv2#classroom
各カラム内での見出しごとの情報の固まり。１カラムレイアウトでも解説したように、「h2要素が出現する情報ブロックであること」を示すために、「.section-lv2」というクラスを指定している。また「div#primary-contents」につけている「.section-lv1」というクラスだが、第二階層以下のページ（カテゴリートップや個別ページ）では、h1要素が登場することを想定して指定している。
「div#secondary-contents」のなかで最初に出現するdiv要素には、「.section-lv2」というクラスと同時に「#classroom」というIDを指定しています。
●見出し要素の構造
１カラムレイアウトの見出し構造と同じ考え方でマークアップ。デザインカンプにはない、グローバルナビゲーションやフッターの見出しなども指定しておく。
●センターリングの一括適用
１カラムレイアウトでは、全体のセンタリングのために、「div#header」「div#container」
「div#footer」それぞれにスタイルの指定。（widthプロパティで幅を指定し、左右マージン「auto」でセンタリング）。
この作例でも同じように実現できますが、今回は「.structure」という共通のクラス指定しているので、センタリングのためのスタイルを一括適用できる。
.structure {
width: 740px;
margin: 0 auto; /* ボックスのセンタリング */
padding: 0 29px;
border-left: 1px solid #999;
background-color: #fff;
}
このように、必要に応じて汎用的なクラスでスタイルを管理することで、作業を効率化することができる。
●positionプロパティを利用した自由度の高いコンテンツ配置
「div#header」に含まれる「div#global-nav」「div#search」「div#utility-nav」は、positionプロパティで配置する。デザインカンプでの見た目を実現するために、「div#global-nav」と「div#utility-nav」の位置を逆転させなければならない。まずこれらを移動させるための基点を「div#header」にするために、ボックスのサイズと「position:relative;」を指定。
#header {
position: relative;
height: 390px;
background-image: url(../img/header/bgo1.jpg);
background-position: center bottom;
background-repeat: no-repeat;
}
つづいて、検索ボックスやユーティリティ、グローバルナビゲーションを移動される。それぞれに「position: absolute;」を指定し、あとは「div#header」の上下左右からの距離をtop、right、bottom、leftプロパティのいずれかで指定すれば、容易に配置できる。
#global-nav ul {
position: absolute;
top: 136px;
left: 53px;
}
#search {
position: absolute;
top: 84px;
left: 536px;
width: 228px;
}
#search li {
position: absolute;
top: 17px;
left: 182px;
}
#utility-nav {
position: absolute;
top: 24px;
right: 30px;
}
このようにpositionプロパティを利用することで自由度の高い。（XHTMLの構造にとらわれない）は位置が可能になる。
今日はここまで。
作例では、ページのコンテンツ全体をセンタリングしている。ほとんどのサイトが、このように全体がセンタリングされるか、左寄せになっている。もしかしたら、右寄せにしたいという需要もあるかもしれない。このように、「コンテンツをどの方向に寄せるか」は、次のようなブロックレベル要素の左寄せ、センタリング、右寄せのしくみに基づいて決定される。
ブロックレベル要素の左寄せ
幅を指定して、「margin-right:auto;」を指定する
ブロックレベル要素のセンタリング
幅を指定して、「margin-right:auto; margin-left:auto;」を指定する
ブロックレベル要素の右寄せ
幅を指定して、「margin-left:auto;」を指定する
このように、寄せたい方向とは逆のマージンに「auto」と指定するのがポイント。センタリングについては、左右両方に「auto」と指定することで、結果的に中央に寄る事になる。
#header {
width: 424px;
margin: 0 auto; /* ボックスのセンタリング */
}
#container {
width: 376px;
margin: 0 auto; /* ボックスのセンタリング */
padding: 24px;
}
#footer {
width: 376px;
margin: 0 auto; /* ボックスのセンタリング */
padding: 0 24px 24px;
}
2カラムレイアウト
左にメイン部分、右にサイド部分を置く２カラムレイアウト。ブログ、コーポレートサイト、ニュースサイトなどあらゆるジャンルで広く利用されているレイアウト。基本的な段組みの方法と、positionプロパティの使いどころを押さえる。
●div要素の構造
div#headeer、div#container、div#footer
1カラムレイアウトと同じように、３つの主要部分による構成。１カラムレイアウトでは書籍にたとえて説明したが、Webサイトの構造にあわせて説明すると次のようになる。
div#header（ヘッダー）
コーポレートサイトロゴやサイトロゴ、キャッチコピーなど、アイデンティティを確立するうえで、重要なコンテンツなど、グローバルナビゲーションやサイト内検索など、Webサイトの機能性や利便性を支えるためのコンテンツを含めるのが一般的。
container（コンテナ）
メイン部分とサイド部分で構成されるのが一般的。
div#footer（フッター）
著作権表記や控えめなコーポレートロゴなどの運営情報や、個人情報保護方針や特定商取引法もとづく表記など、補足的な意味合いの強いコンテンツへのナビゲーションを含めるのが一般的。
div#global-nav、div#search、div#utility-nav
サイト内の回遊性を高めるための主な機能軍。デザインカンプでは上から「div#utility-nav」「div#search」「div#global-nav」という順番になっているが、グローバルナビゲーションはもっとも重要な目次であるため、補完的な意味合いの「サイト内検索」や「お問い合わせ・サイトマップ」よりも先に記述している。
このように、見た目の順序とXHTMLのソースコードの記述順序はいったん切り離して考え、「どのコンテンツが重要なのか、先に記述すべきか」を判断しながらXHTMLを制作することが大切。
div#section-lv1#primary-contents、div#secondary-contents
「div.structure#container」内で各カラムとなるdiv要素。本文を「#primary-contents」、サイドバーを「#secondary-contents」としている。
div.section-lv2、div.section-lv2#classroom
各カラム内での見出しごとの情報の固まり。１カラムレイアウトでも解説したように、「h2要素が出現する情報ブロックであること」を示すために、「.section-lv2」というクラスを指定している。また「div#primary-contents」につけている「.section-lv1」というクラスだが、第二階層以下のページ（カテゴリートップや個別ページ）では、h1要素が登場することを想定して指定している。
「div#secondary-contents」のなかで最初に出現するdiv要素には、「.section-lv2」というクラスと同時に「#classroom」というIDを指定しています。
●見出し要素の構造
１カラムレイアウトの見出し構造と同じ考え方でマークアップ。デザインカンプにはない、グローバルナビゲーションやフッターの見出しなども指定しておく。
●センターリングの一括適用
１カラムレイアウトでは、全体のセンタリングのために、「div#header」「div#container」
「div#footer」それぞれにスタイルの指定。（widthプロパティで幅を指定し、左右マージン「auto」でセンタリング）。
この作例でも同じように実現できますが、今回は「.structure」という共通のクラス指定しているので、センタリングのためのスタイルを一括適用できる。
.structure {
width: 740px;
margin: 0 auto; /* ボックスのセンタリング */
padding: 0 29px;
border-left: 1px solid #999;
background-color: #fff;
}
このように、必要に応じて汎用的なクラスでスタイルを管理することで、作業を効率化することができる。
●positionプロパティを利用した自由度の高いコンテンツ配置
「div#header」に含まれる「div#global-nav」「div#search」「div#utility-nav」は、positionプロパティで配置する。デザインカンプでの見た目を実現するために、「div#global-nav」と「div#utility-nav」の位置を逆転させなければならない。まずこれらを移動させるための基点を「div#header」にするために、ボックスのサイズと「position:relative;」を指定。
#header {
position: relative;
height: 390px;
background-image: url(../img/header/bgo1.jpg);
background-position: center bottom;
background-repeat: no-repeat;
}
つづいて、検索ボックスやユーティリティ、グローバルナビゲーションを移動される。それぞれに「position: absolute;」を指定し、あとは「div#header」の上下左右からの距離をtop、right、bottom、leftプロパティのいずれかで指定すれば、容易に配置できる。
#global-nav ul {
position: absolute;
top: 136px;
left: 53px;
}
#search {
position: absolute;
top: 84px;
left: 536px;
width: 228px;
}
#search li {
position: absolute;
top: 17px;
left: 182px;
}
#utility-nav {
position: absolute;
top: 24px;
right: 30px;
}
このようにpositionプロパティを利用することで自由度の高い。（XHTMLの構造にとらわれない）は位置が可能になる。
今日はここまで。
2011年10月22日土曜日
三十六日目！（～見出し構造、不可視化～）
続きいきます。
●見出し要素の構造
div#header
表紙や目次に相当する「div#header」部分では、まずロゴである「<img alt="BlueDrop-ns´s desing"・・・/>」をh1要素でマークアップ。デザインカンプにはないが、「div#global-nav」には「当サイトの主要コンテンツ」というh2要素を用意。
人が見ればグローバルナビゲーションであることがわかる情報でも、音声ブラウザなどの読み上げソフトを使用している人にも「どのような情報のかたまりなのか」がわかるように、このように見出しをつけておくとよい。通常のブラウザでは見えないように不可視化している。
div#new-entry、div#previous-enty
「div#new-enty」では、エントリー名をh2要素としている。「div#previous-entry」では「Previous entries・・・」をh2要素とし、エントリー名をそれぞれは一段階見出しレベルが低いh3要素でマークアップ。
すべてのエントリー名を同じ見出しレベルにしたいのであれば、「div#new-entry」に「最新のエントリー」というh2要素を追加してもよい。
div#other-contents
「About me・・・」「Archives・・・」「Category・・・」それぞれをh2要素としている。また「div#other-contents」の直下に「その他のコンテンツ」というh2要素を追加し、「About me・・・」「Archives・・・」「Category・・・」をそれぞれh3要素としてもよい。
ここでは「div#other-contents」より前までは、各種エントリーに関する内容であるのに対し、一転して「About me・・・」「Archives・・・」「Category・・・」といった情報が出現しますので、「その他コンテンツ」と見出しを追加するまでもなく、それまでの情報と質が変化しているのが明白と判断し、それぞれをh2要素でマークアップしている。
div#footer
書籍でいう著者・出版社情報などの奥付部分に相当する「div#footer」。デザインカンプでは著作権表記のみとなってるが、ここでは「当サイトの共通情報」というh2要素を追加し、何の情報であるかをしっかりと示している。
●内容を不可視化するテクニック
作例の中には、ＸＨＴＭＬに記述されているものの、ブラウザ上に表示されない内容がいくつかある。
具体的には次の内容。
・ 「div#global-nav」のh2要素
・ 「div.entry-footer dl dt」の一部
・ 「div#step-nav」のh3要素
・ 「div#footer」のh2要素
文書構造として必要な情報ではあるものの、人間の目で見た場合には、表示されていなくても直感的にわかるだろうという情報。CSS側で不可視化する指定をしなければ、当然画面にでてきてしまう。
以下、要素を不可視化するテクニック。状況に応じて使い分けるのが大切。
●一般的な不可視化テクニック
コンテント領域の大きさを「０」にして、はみ出した内容は消してしまうという一般的な方法。手順としては、まずwidth/heightプロパティの値を「０」とする。すると、内容がコンテント領域からはみ出してしまう。コンテント領域からはみ出した部分はoverflowプロパティで制御できるので、「hidden」という値を指定する。
#global-nav h2,
#step-nav h3,
#footer h2 {
width: 0;
height: 0;
overflow: hidden;
}
●positionプロパティを利用した不可視化テクニック
作例では「div.entry-footer dl dt」の一部を不可視化している。ここでは上記の方法ではなくpositionプロパティを利用して不可視化している。理由は、dt/dd要素に「display:inline;」を指定しているため。
インライン要素へのwidth/heightプロパティの値は無効になってしまうため、内容をはみ出させて「overflow:hidden;」で非表示にすることができない。
このような場合、positionプロパティを利用して不可視化する。「position:absolute;visibility:hidden;」と指定する。「visibility:hidden」でボックスを不可視化する。この時点で、ボックスが完全にいなくなったわけではなく、ボックスの範囲は確保される。なお、「position:absolute;」を指定された要素は、他の要素にとっては存在しないものとして配置が行われる（ボックスの範囲がなくなったように見せることができる）。
ただし、「visibility:hidden;」を指定された要素は、一部の音声ブラウザで読み上げられないという問題がある。したがって「visibility:hidden;」の代わりに「left:-9999px;」と指定し、画面外へ追いやる方法（オフレフト）が使われる。
.entry-footer dt.time,
.entry-footer dt.tag {
position: absolute;
left: -9999px;
}
●displayプロパティを利用した不可視化テクニック
不可視化テクニックには上記二つ以外にもある。もっとも簡単なのは「display:none;」を指定すること。難しいことを考えずに、実にあっさりと要素を消すことができる。しかし、一部の音声読み上げブラウザで読み上げられないという問題があるので、「display:none;」は利用しないのが一般的。
このように、一部の要素を不可視化するというひとつの目的を達成するうえでも、見た目だけを追及するのではなく、アクセシビリティなどの観点から考えて、よりよい判断ができるように努めるのが大切。
●定義リストの使いどころ
見た目ではわからないが、「div.entry-footer」のなかで「更新時間」「タグ」「コメント」「トラックバック」には定義リスト（dl要素）を利用し、ていないなマークアップを心がけている。「更新時間」「タグ」は、人が見れば情報の意味がわかるはずだが、文章構造を意識してそれぞれにdt要素を指定している。
このように、「○○は○○」（たとえば「更新時間は11：32」など）という関係が成立するものがいくつか並んでいる場合には、定義リストが利用できる。
今日はここまで。
●見出し要素の構造
div#header
表紙や目次に相当する「div#header」部分では、まずロゴである「<img alt="BlueDrop-ns´s desing"・・・/>」をh1要素でマークアップ。デザインカンプにはないが、「div#global-nav」には「当サイトの主要コンテンツ」というh2要素を用意。
人が見ればグローバルナビゲーションであることがわかる情報でも、音声ブラウザなどの読み上げソフトを使用している人にも「どのような情報のかたまりなのか」がわかるように、このように見出しをつけておくとよい。通常のブラウザでは見えないように不可視化している。
div#new-entry、div#previous-enty
「div#new-enty」では、エントリー名をh2要素としている。「div#previous-entry」では「Previous entries・・・」をh2要素とし、エントリー名をそれぞれは一段階見出しレベルが低いh3要素でマークアップ。
すべてのエントリー名を同じ見出しレベルにしたいのであれば、「div#new-entry」に「最新のエントリー」というh2要素を追加してもよい。
div#other-contents
「About me・・・」「Archives・・・」「Category・・・」それぞれをh2要素としている。また「div#other-contents」の直下に「その他のコンテンツ」というh2要素を追加し、「About me・・・」「Archives・・・」「Category・・・」をそれぞれh3要素としてもよい。
ここでは「div#other-contents」より前までは、各種エントリーに関する内容であるのに対し、一転して「About me・・・」「Archives・・・」「Category・・・」といった情報が出現しますので、「その他コンテンツ」と見出しを追加するまでもなく、それまでの情報と質が変化しているのが明白と判断し、それぞれをh2要素でマークアップしている。
div#footer
書籍でいう著者・出版社情報などの奥付部分に相当する「div#footer」。デザインカンプでは著作権表記のみとなってるが、ここでは「当サイトの共通情報」というh2要素を追加し、何の情報であるかをしっかりと示している。
●内容を不可視化するテクニック
作例の中には、ＸＨＴＭＬに記述されているものの、ブラウザ上に表示されない内容がいくつかある。
具体的には次の内容。
・ 「div#global-nav」のh2要素
・ 「div.entry-footer dl dt」の一部
・ 「div#step-nav」のh3要素
・ 「div#footer」のh2要素
文書構造として必要な情報ではあるものの、人間の目で見た場合には、表示されていなくても直感的にわかるだろうという情報。CSS側で不可視化する指定をしなければ、当然画面にでてきてしまう。
以下、要素を不可視化するテクニック。状況に応じて使い分けるのが大切。
●一般的な不可視化テクニック
コンテント領域の大きさを「０」にして、はみ出した内容は消してしまうという一般的な方法。手順としては、まずwidth/heightプロパティの値を「０」とする。すると、内容がコンテント領域からはみ出してしまう。コンテント領域からはみ出した部分はoverflowプロパティで制御できるので、「hidden」という値を指定する。
#global-nav h2,
#step-nav h3,
#footer h2 {
width: 0;
height: 0;
overflow: hidden;
}
 |
| 不可視化していない状態 |
●positionプロパティを利用した不可視化テクニック
作例では「div.entry-footer dl dt」の一部を不可視化している。ここでは上記の方法ではなくpositionプロパティを利用して不可視化している。理由は、dt/dd要素に「display:inline;」を指定しているため。
インライン要素へのwidth/heightプロパティの値は無効になってしまうため、内容をはみ出させて「overflow:hidden;」で非表示にすることができない。
このような場合、positionプロパティを利用して不可視化する。「position:absolute;visibility:hidden;」と指定する。「visibility:hidden」でボックスを不可視化する。この時点で、ボックスが完全にいなくなったわけではなく、ボックスの範囲は確保される。なお、「position:absolute;」を指定された要素は、他の要素にとっては存在しないものとして配置が行われる（ボックスの範囲がなくなったように見せることができる）。
ただし、「visibility:hidden;」を指定された要素は、一部の音声ブラウザで読み上げられないという問題がある。したがって「visibility:hidden;」の代わりに「left:-9999px;」と指定し、画面外へ追いやる方法（オフレフト）が使われる。
.entry-footer dt.time,
.entry-footer dt.tag {
position: absolute;
left: -9999px;
}
●displayプロパティを利用した不可視化テクニック
不可視化テクニックには上記二つ以外にもある。もっとも簡単なのは「display:none;」を指定すること。難しいことを考えずに、実にあっさりと要素を消すことができる。しかし、一部の音声読み上げブラウザで読み上げられないという問題があるので、「display:none;」は利用しないのが一般的。
このように、一部の要素を不可視化するというひとつの目的を達成するうえでも、見た目だけを追及するのではなく、アクセシビリティなどの観点から考えて、よりよい判断ができるように努めるのが大切。
●定義リストの使いどころ
見た目ではわからないが、「div.entry-footer」のなかで「更新時間」「タグ」「コメント」「トラックバック」には定義リスト（dl要素）を利用し、ていないなマークアップを心がけている。「更新時間」「タグ」は、人が見れば情報の意味がわかるはずだが、文章構造を意識してそれぞれにdt要素を指定している。
このように、「○○は○○」（たとえば「更新時間は11：32」など）という関係が成立するものがいくつか並んでいる場合には、定義リストが利用できる。
今日はここまで。
2011年10月20日木曜日
三十五日目！（CSSレイアウト）
●レイアウトの種類
Webデザインで一般に利用されるレイアウトパターンにはさまざまな種類があり、カラム（段組）数の違いで考えてみると、１カラムレイアウト、２カラムレイアウト、３カラムレイアウトが代表的。情報量の多いニュース系サイトなどでは、４カラム以上のレイアウトも。
次にコンテンツの幅に注目。ブラウザのウィンドウサイズや文字サイズを変更しても一定の幅を保ったままのソリッド（固定幅）レイアウト、ブラウザのウィンドウサイズにあわせて幅が変わるリキッド（変動幅）レイアウト、文字サイズにあわせて幅や高さが変わるエラスティックレイアウトの３つに大別できす。
また、キャンペーンサイトやディザーサイトなどのプロモーション重視のサイトでは、ブラウザを一枚の紙に見立てたようなDTP色の強いフリーレイアウトを多く採用される。
●１カラムレイアウト
個人ブログを想定した１カラムレイアウト。複雑な段組のテクニックがない。基本となるdiv要素の構造を押さえ、コンテンツのセンタリング手法や、一部の要素の不可視化方法など、あらゆるレイアウトに必須となるテクニックを学ぶ。
●div要素の構造
div#header、div#container、div#footer
body要素の直下に置く３つのdiv要素。書籍でいえば、次のように例えることができる。
・div#header（ヘッダー） ・・・・・・・・・・・ 表紙や目次に相当する部分
・div#container（コンテナ） ・・・・・・・・・ 各章の本文部分
・div#footer（フッター） ・・・・・・・・・・・・ 著作権情報など奥付部分
ID名はサイトごとに異なる場合もあるが、シンプルなWebサイトにもっとも多いパターン。
div#global-nav
サイト内の目次に相当するグローバルナビゲーション。div#headerのなかに、ロゴh1要素とともに含めている。「home」「bbs」「web」「design」「link」などのボタン画像でナビゲーションが構成される。空に雲が浮かんでいるキービジュアルは、情報ではなく、装飾の画像なので、img要素で埋め込まず、CSSでdiv#global-navの背景に設定し、表示させている。
div.article#new-entry
最新記事の表示エリア。「最新記事」であることを示す「id="new-entry"」と「記事」であることを示す「class="articles"」を指定している。トップページだけを見ればIDだけでもよいが、アーカイブページなど他のページで記事を複数表示させる場合がある。またサイト全体で記事には一定のスタイルを指定したい場合もあるので、クラスを指定することでメンテナンス性を高めている。
最新記事だけに必要なスタイルはＩＤセレクタで、サイト全体の記事すべてに必要なスタイルはクラスセレクタで適用することで、効率的なスタイル管理を行うことができる。
div.entry-header、div.entry-body、div.entry-footer
一般的に、ブログ記事は次の３つのエリアに分けられる。
・ エントリーのタイトルや日時など
・ エントリー本文
・ エントリーに対するコメントやトラックバックなど
さらに、記事が該当するカテゴリーや、付与したタグ（キーワード）などの情報も、上記の３つのどこかに入ってくる。シンプルな見た目ゆえに、ここまでdiv要素で構造化しなくてよい場合もある。
このサンプルでは「div.entry-footer」に、padding、background、font-size、text-alignプロパティを指定しているが、この指定を「div.entry-footer」ではなく、直接dl要素に対して行うことも可能。しかし、div要素で丁寧に構造化しておくことで、後々のデザインリニューアル時に、より複雑なデザインをXHTMLを実現することができる、というメリットがある。
div#previous-entry、div.article、div.step-nav
最近の記事4件と、その他の記事に移動するためのステップナビゲーション。「div.article」は「div.article#new-entry」でも出現しているが、「#previoous-entry.article{・・・}」と子孫セレクタを利用して、限定的なスタイルを適用している。
div#other-contents、div.section-lv2#about、div.section-lv2#archives、
div.section-lv2#category
記事内容とは直接関係はないが、各カテゴリーへのリンクなど、ブログとしては必要なコンテンツ群。青の背景色に白抜きの文字というスタイルは「div#about」「div#archives」「div#category」の３箇所に指定しても実現できるが、div要素それぞれに「class="section-lv2"」を指定して、クラスセレクタで一括管理している。ちなみに「class="section-lv2"」というクラス名は、「見出しレベル２（h2要素）が出現する情報ブロックです」という意味合いで指定している。
div#footer
サイトの著作権表記のエリア。内容をp要素でマークアップしている。「div.entry-footer」の部分と同じように、デザインを実現するためだけであればp要素のみでも可能だが、構造を明確にするために「div#footer」でマークアップしている。
今日はここまで。
Webデザインで一般に利用されるレイアウトパターンにはさまざまな種類があり、カラム（段組）数の違いで考えてみると、１カラムレイアウト、２カラムレイアウト、３カラムレイアウトが代表的。情報量の多いニュース系サイトなどでは、４カラム以上のレイアウトも。
次にコンテンツの幅に注目。ブラウザのウィンドウサイズや文字サイズを変更しても一定の幅を保ったままのソリッド（固定幅）レイアウト、ブラウザのウィンドウサイズにあわせて幅が変わるリキッド（変動幅）レイアウト、文字サイズにあわせて幅や高さが変わるエラスティックレイアウトの３つに大別できす。
また、キャンペーンサイトやディザーサイトなどのプロモーション重視のサイトでは、ブラウザを一枚の紙に見立てたようなDTP色の強いフリーレイアウトを多く採用される。
●１カラムレイアウト
個人ブログを想定した１カラムレイアウト。複雑な段組のテクニックがない。基本となるdiv要素の構造を押さえ、コンテンツのセンタリング手法や、一部の要素の不可視化方法など、あらゆるレイアウトに必須となるテクニックを学ぶ。
●div要素の構造
div#header、div#container、div#footer
body要素の直下に置く３つのdiv要素。書籍でいえば、次のように例えることができる。
・div#header（ヘッダー） ・・・・・・・・・・・ 表紙や目次に相当する部分
・div#container（コンテナ） ・・・・・・・・・ 各章の本文部分
・div#footer（フッター） ・・・・・・・・・・・・ 著作権情報など奥付部分
ID名はサイトごとに異なる場合もあるが、シンプルなWebサイトにもっとも多いパターン。
div#global-nav
サイト内の目次に相当するグローバルナビゲーション。div#headerのなかに、ロゴh1要素とともに含めている。「home」「bbs」「web」「design」「link」などのボタン画像でナビゲーションが構成される。空に雲が浮かんでいるキービジュアルは、情報ではなく、装飾の画像なので、img要素で埋め込まず、CSSでdiv#global-navの背景に設定し、表示させている。
div.article#new-entry
最新記事の表示エリア。「最新記事」であることを示す「id="new-entry"」と「記事」であることを示す「class="articles"」を指定している。トップページだけを見ればIDだけでもよいが、アーカイブページなど他のページで記事を複数表示させる場合がある。またサイト全体で記事には一定のスタイルを指定したい場合もあるので、クラスを指定することでメンテナンス性を高めている。
最新記事だけに必要なスタイルはＩＤセレクタで、サイト全体の記事すべてに必要なスタイルはクラスセレクタで適用することで、効率的なスタイル管理を行うことができる。
div.entry-header、div.entry-body、div.entry-footer
一般的に、ブログ記事は次の３つのエリアに分けられる。
・ エントリーのタイトルや日時など
・ エントリー本文
・ エントリーに対するコメントやトラックバックなど
さらに、記事が該当するカテゴリーや、付与したタグ（キーワード）などの情報も、上記の３つのどこかに入ってくる。シンプルな見た目ゆえに、ここまでdiv要素で構造化しなくてよい場合もある。
このサンプルでは「div.entry-footer」に、padding、background、font-size、text-alignプロパティを指定しているが、この指定を「div.entry-footer」ではなく、直接dl要素に対して行うことも可能。しかし、div要素で丁寧に構造化しておくことで、後々のデザインリニューアル時に、より複雑なデザインをXHTMLを実現することができる、というメリットがある。
div#previous-entry、div.article、div.step-nav
最近の記事4件と、その他の記事に移動するためのステップナビゲーション。「div.article」は「div.article#new-entry」でも出現しているが、「#previoous-entry.article{・・・}」と子孫セレクタを利用して、限定的なスタイルを適用している。
div#other-contents、div.section-lv2#about、div.section-lv2#archives、
div.section-lv2#category
記事内容とは直接関係はないが、各カテゴリーへのリンクなど、ブログとしては必要なコンテンツ群。青の背景色に白抜きの文字というスタイルは「div#about」「div#archives」「div#category」の３箇所に指定しても実現できるが、div要素それぞれに「class="section-lv2"」を指定して、クラスセレクタで一括管理している。ちなみに「class="section-lv2"」というクラス名は、「見出しレベル２（h2要素）が出現する情報ブロックです」という意味合いで指定している。
div#footer
サイトの著作権表記のエリア。内容をp要素でマークアップしている。「div.entry-footer」の部分と同じように、デザインを実現するためだけであればp要素のみでも可能だが、構造を明確にするために「div#footer」でマークアップしている。
今日はここまで。
2011年10月18日火曜日
三十四日目！（～フォームのスタイリング）
フォームのスタイリングの続きをやっていきます。
●ブログのコメント投稿フォームのリッチなスタイリング
テキストフィールドやボタン類であれば、背景画像を使ってデザインを忠実に再現できる。XHTMLの制作上注意しなければならない点は、お問い合わせフォームと同様。
XHTML
<h2><img src="comment.png" alt="Please Your Comments!" /></h2>
<p>この記事に関係の無い内容のコメントは削除させていただく場合があります。また、コメントに対するお返事は必ず行われるとは限りませんのでご了承ください。</p>
<form id="comments_form" method="post" action="comment.cgi">
<fieldset>
<legend>コメント投稿フォーム：</legend>
<dl>
<dt><label for="comment-author">お名前
<span class="note">（必須） </span></label></dt>
<dd><input type="text" id=comment-author" class="text" name="author"
size="30" value="" tabindex="1" /></dd>
<dt><label for="comment-email">E-mail
<span class="note">（必須ですが、公開されません） </span></label></dt>
<dd><input type="text" id="comment-email" class="text" name="email"
size="30" value="" tabindex="2" /></dd>
</dl>
・・・・中略・・・・
<div class="submit">
<input type="button" value="確認" name="preview" id="comment-preview"
class="submit" tabindex="6" />
<input type="submit" value="投稿" name="post" id="comment-post"
class="submit" tabindex="7" />
</div>
</fieldset>
</form>
フォームパーツの線をなくし、代わりに背景画像を指定する方法でスタイリングする。ただし、この方法ではCSSオン・画像表示オフのときフォームパーツがどこにあるのかわからなくなってしまう。この問題を最小限にとどめるために、親要素の背景色との差が認識でき、文字色がきちんと判別できる背景色をあわせて指定しておくか、画像のデザイン自体は枠線を含まないものにし、CSSでボーダーを指定するという解決策もある。
CSS
legend {
display: none; /* マークアップ的に必要でも視覚的には不要となるので非表示に */
}
input.text {
border: none; /* テキストボックスの線を消す */
color: #336581;
background: transparent url(textbox.png> no-repeat left top; /* テキストボックス用の背景画像を 指定 */
}
textarea {
border: none; /* テキストエリアの線を消す */
background: transparent url(textarea.png) no-repeat left top; /* テキストエリア用の背景画像を指定 */
}
input.submit {
padding: 4px 8px 0 8px;
height: 19px;
color: #fff;
background: transparent url(button.png) no-repeat left top; /* 送信ボタン用の背景画像を指定 */
}
きりがいいので今日はここまで。
●ブログのコメント投稿フォームのリッチなスタイリング
テキストフィールドやボタン類であれば、背景画像を使ってデザインを忠実に再現できる。XHTMLの制作上注意しなければならない点は、お問い合わせフォームと同様。
XHTML
<h2><img src="comment.png" alt="Please Your Comments!" /></h2>
<p>この記事に関係の無い内容のコメントは削除させていただく場合があります。また、コメントに対するお返事は必ず行われるとは限りませんのでご了承ください。</p>
<form id="comments_form" method="post" action="comment.cgi">
<fieldset>
<legend>コメント投稿フォーム：</legend>
<dl>
<dt><label for="comment-author">お名前
<span class="note">（必須） </span></label></dt>
<dd><input type="text" id=comment-author" class="text" name="author"
size="30" value="" tabindex="1" /></dd>
<dt><label for="comment-email">E-mail
<span class="note">（必須ですが、公開されません） </span></label></dt>
<dd><input type="text" id="comment-email" class="text" name="email"
size="30" value="" tabindex="2" /></dd>
</dl>
・・・・中略・・・・
<div class="submit">
<input type="button" value="確認" name="preview" id="comment-preview"
class="submit" tabindex="6" />
<input type="submit" value="投稿" name="post" id="comment-post"
class="submit" tabindex="7" />
</div>
</fieldset>
</form>
フォームパーツの線をなくし、代わりに背景画像を指定する方法でスタイリングする。ただし、この方法ではCSSオン・画像表示オフのときフォームパーツがどこにあるのかわからなくなってしまう。この問題を最小限にとどめるために、親要素の背景色との差が認識でき、文字色がきちんと判別できる背景色をあわせて指定しておくか、画像のデザイン自体は枠線を含まないものにし、CSSでボーダーを指定するという解決策もある。
CSS
legend {
display: none; /* マークアップ的に必要でも視覚的には不要となるので非表示に */
}
input.text {
border: none; /* テキストボックスの線を消す */
color: #336581;
background: transparent url(textbox.png> no-repeat left top; /* テキストボックス用の背景画像を 指定 */
}
textarea {
border: none; /* テキストエリアの線を消す */
background: transparent url(textarea.png) no-repeat left top; /* テキストエリア用の背景画像を指定 */
}
input.submit {
padding: 4px 8px 0 8px;
height: 19px;
color: #fff;
background: transparent url(button.png) no-repeat left top; /* 送信ボタン用の背景画像を指定 */
}
きりがいいので今日はここまで。
登録:
投稿 (Atom)