久しぶりの更新です。徐々に更新頻度が落ちてきてしまいました。
近況を言いますと、いくつかの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; /* 送信ボタン用の背景画像を指定 */
}
きりがいいので今日はここまで。
2011年10月17日月曜日
三十三日目！（フォームのスタイリング）
フォームのスタイリング
●フォームはユーザーが能動的に動く場所なので、気の利いたデザインになっているとサイト全体の印象アップにつながる。一方、項目数が多く、見た目が整理されていないフォームは逆に信頼感を大幅に低下させる。使いやすさはもちろんのこと、ユーザーに心地よく感じてもらえるインターフェイスを目指す。
フォームパーツの外観は、OSやブラウザの種類に依存。CSSを使ってもコントロールできるところとできないところがある。基本的には、フォームパーツはOSやブラウザが提供するユーザーインターフェースのデフォルトをそのまま利用し、幅や高さを調節する程度にするのが現実的。
●お問い合わせフォームのシンプルなスタイリング
XHTML
<h1>お問い合わせフォーム</h1>
<form method="post" action="contact.cgi">
<p>入力が完了したら、「送信する」ボタンを押してください。<span class="required"></span>
印は必須事項です。</p>
<fieldset><!-- 一つ目のフィールド -->
<legend>お客様の情報</legend>
<table>
<tr>
<th><label for="name">お名前<span class="required"></span></label></th>
<td><input type="text" id="name" class="text" tabindex="1" /></td>
</tr>
・・・・中略・・・・
<tr>
<th><label fot="tel">電話番号</label></th>
<td>
<input type="text" id="tel" class="text" tabindex="6" />
</td>
</tr>
</table>
</fieldset>
<fieldset><!-- 二つ目のフィールド -->
<legend>お問い合わせ内容<span class="required"></span></legend>
<textarea id="comment" rows="7" cols="40" tabindex="6" />
</fieldset>
<div class="submit"><!-- 送信ボタン -->
<input type="submit" class="submit" value="送信する" tabindex="8" />
</div>
</form>
※tabindex
キーボードのTabキーを使ってリンクやフォームパーツを選択することがあるが、その選択（フォーカス移動）の順番を指定するために、tabindex属性が利用できる。accesskey属性（ショートカットキーの指定）とあわせて、リンクやフォームのユーザビリティ向上のために利用される。
ただし、tabindex属性によって選択順がユーザーの意思に反してしまったり、accesskey属性で指定した値がブラウザのショートカットキーとバッティングし、有効に機能しないことで混乱が生じる場合もあるため、これらの属性の利用には注意が必要。
内容をfieldset要素で「お客様の情報」と「お問い合わせ内容」のふたつにグループ化する。CSSが適用されなくてもフォームの構造がわかりやすいようなマークアップを心がけるようにする。
このサンプルでは、フォームの内容はtable要素でマークアップしている。ユーザビリティの高いフォームにするため、それぞれのフォームパーツに対応するテキストをlabel要素でマークアップし、関連付けしておく。
CSS
/* フォームのスタイル */
form {
padding: 15px 15px 5px 15px;
border: 2px solid #c8eca6;
background: #e3f7bc url(bg.png) repeat-x top left; /* 背景用グラデーション画像を横方向にリ ピート */
}
fieldset {
margin: 0 0 20px 0;
padding: 0;
border: none; /* デフォルトで線が引かれるため非表示に */
font-size: 90%;
}
legend {
margin: 0;
padding: 0 0 10px 0;
font-weight: bold;
}
* html legend {
margin-left: -6px; /* Win IE6 でlegend要素が右によってしまうのを修正 */
}
*:first-chid+html legend {
margin-left: -6px; /* Win IE7 でlegend要素が右によってしまうのを修正 */
}
input.text,
textarea {
padding: 0.3em;
border: 1px solid #ccc;
width: 270px;
color: #666;
font-size: 100%;
}
textarea {
width: 420px;
}
/* フォームパーツ選択時のスタイル */
input.text:focus,
textarea:focus {
color: #000;
background: #fff8ee;
}
div.submit {
padding: 0.8em 0;
width: 500px;
}
input.submit {
padding: 0.3em 1em 0.3em 1.1em;
color: #fff;
background: #54af17;
letter-spacing: 0.1em;
font-size: 100%;
cursor: pointer; /* ボタンが押せることを認識しやすいように、ポインタ型カーソルを指定 */
}
input要素で指定できるtype属性の種類はテキストフィールド(text)、送信ボタン(submit)、リセットボタン(reset)、チェックボックス(checkbox)、ラジオボタン(radio)、汎用ボタン(button)、画像ボタン(image)、ファイル参照コントロール(file)、隠しフィールド(hidden)の9種類。
同じinput要素でありながら、type属性だけでそれぞれ機能や外観が大きく異なるため、CSSでスタイリングする際にセレクタ「input」とだけ指定すると、すべてのinput要素に同じスタイルが適用されてしまうことに注意。
種類ごとに違うスタイルを適用したい場合、属性セレクタを使って指定するのが理想的だが、IE6が対応していないため、現実的にはclass属性などを併用して指定。
フォームパーツに入力中であることがひと目でわかるように、:focus擬似クラスで通常時とは別の文字色と背景色を指定。通常時は濃いめのグレーの文字に白い背景となっているところを、入力中だけ文字色が黒、背景色が薄いクリーム色になるようにしている。コントラストがはっきりとして見やすいように、また入力の妨げにならない色を指定する。
なお、:focus擬似クラスはIE6/7がサポートしていないので、JavaScriptを併用するとベター。
今日はここまで。
●フォームはユーザーが能動的に動く場所なので、気の利いたデザインになっているとサイト全体の印象アップにつながる。一方、項目数が多く、見た目が整理されていないフォームは逆に信頼感を大幅に低下させる。使いやすさはもちろんのこと、ユーザーに心地よく感じてもらえるインターフェイスを目指す。
フォームパーツの外観は、OSやブラウザの種類に依存。CSSを使ってもコントロールできるところとできないところがある。基本的には、フォームパーツはOSやブラウザが提供するユーザーインターフェースのデフォルトをそのまま利用し、幅や高さを調節する程度にするのが現実的。
●お問い合わせフォームのシンプルなスタイリング
XHTML
<h1>お問い合わせフォーム</h1>
<form method="post" action="contact.cgi">
<p>入力が完了したら、「送信する」ボタンを押してください。<span class="required"></span>
印は必須事項です。</p>
<fieldset><!-- 一つ目のフィールド -->
<legend>お客様の情報</legend>
<table>
<tr>
<th><label for="name">お名前<span class="required"></span></label></th>
<td><input type="text" id="name" class="text" tabindex="1" /></td>
</tr>
・・・・中略・・・・
<tr>
<th><label fot="tel">電話番号</label></th>
<td>
<input type="text" id="tel" class="text" tabindex="6" />
</td>
</tr>
</table>
</fieldset>
<fieldset><!-- 二つ目のフィールド -->
<legend>お問い合わせ内容<span class="required"></span></legend>
<textarea id="comment" rows="7" cols="40" tabindex="6" />
</fieldset>
<div class="submit"><!-- 送信ボタン -->
<input type="submit" class="submit" value="送信する" tabindex="8" />
</div>
</form>
※tabindex
キーボードのTabキーを使ってリンクやフォームパーツを選択することがあるが、その選択（フォーカス移動）の順番を指定するために、tabindex属性が利用できる。accesskey属性（ショートカットキーの指定）とあわせて、リンクやフォームのユーザビリティ向上のために利用される。
ただし、tabindex属性によって選択順がユーザーの意思に反してしまったり、accesskey属性で指定した値がブラウザのショートカットキーとバッティングし、有効に機能しないことで混乱が生じる場合もあるため、これらの属性の利用には注意が必要。
内容をfieldset要素で「お客様の情報」と「お問い合わせ内容」のふたつにグループ化する。CSSが適用されなくてもフォームの構造がわかりやすいようなマークアップを心がけるようにする。
このサンプルでは、フォームの内容はtable要素でマークアップしている。ユーザビリティの高いフォームにするため、それぞれのフォームパーツに対応するテキストをlabel要素でマークアップし、関連付けしておく。
CSS
/* フォームのスタイル */
form {
padding: 15px 15px 5px 15px;
border: 2px solid #c8eca6;
background: #e3f7bc url(bg.png) repeat-x top left; /* 背景用グラデーション画像を横方向にリ ピート */
}
fieldset {
margin: 0 0 20px 0;
padding: 0;
border: none; /* デフォルトで線が引かれるため非表示に */
font-size: 90%;
}
legend {
margin: 0;
padding: 0 0 10px 0;
font-weight: bold;
}
* html legend {
margin-left: -6px; /* Win IE6 でlegend要素が右によってしまうのを修正 */
}
*:first-chid+html legend {
margin-left: -6px; /* Win IE7 でlegend要素が右によってしまうのを修正 */
}
input.text,
textarea {
padding: 0.3em;
border: 1px solid #ccc;
width: 270px;
color: #666;
font-size: 100%;
}
textarea {
width: 420px;
}
/* フォームパーツ選択時のスタイル */
input.text:focus,
textarea:focus {
color: #000;
background: #fff8ee;
}
div.submit {
padding: 0.8em 0;
width: 500px;
}
input.submit {
padding: 0.3em 1em 0.3em 1.1em;
color: #fff;
background: #54af17;
letter-spacing: 0.1em;
font-size: 100%;
cursor: pointer; /* ボタンが押せることを認識しやすいように、ポインタ型カーソルを指定 */
}
input要素で指定できるtype属性の種類はテキストフィールド(text)、送信ボタン(submit)、リセットボタン(reset)、チェックボックス(checkbox)、ラジオボタン(radio)、汎用ボタン(button)、画像ボタン(image)、ファイル参照コントロール(file)、隠しフィールド(hidden)の9種類。
同じinput要素でありながら、type属性だけでそれぞれ機能や外観が大きく異なるため、CSSでスタイリングする際にセレクタ「input」とだけ指定すると、すべてのinput要素に同じスタイルが適用されてしまうことに注意。
種類ごとに違うスタイルを適用したい場合、属性セレクタを使って指定するのが理想的だが、IE6が対応していないため、現実的にはclass属性などを併用して指定。
フォームパーツに入力中であることがひと目でわかるように、:focus擬似クラスで通常時とは別の文字色と背景色を指定。通常時は濃いめのグレーの文字に白い背景となっているところを、入力中だけ文字色が黒、背景色が薄いクリーム色になるようにしている。コントラストがはっきりとして見やすいように、また入力の妨げにならない色を指定する。
なお、:focus擬似クラスはIE6/7がサポートしていないので、JavaScriptを併用するとベター。
今日はここまで。
2011年10月15日土曜日
三十二日目！（テーブルのスタイリング）
XHTML+CSSの勉強ブログ更新はかなり久しぶりになりますが、続きやっていきます。
テーブルのスタイリング
table要素のスタイリングは、通常ボックスモデル以外にも、行や列のグループ化、セルの境界線など、テーブル特有のマークアップやスタイリングについて知っておく必要がある。
より魅力的なテーブルのスタイリング方法を解説。
●グラデーション背景と立体的に見せるテーブル
シンプルな役員一覧表をたたき台にして、グラデーション背景で立体的に見えるテーブルになるようにスタイリングする。
XHTMLでは構造に大きな特徴はないが、列グループを示す為のcolgroup要素、行グループを示すためのthead/tbody要素を利用し、項目名はth要素で、内容をtd要素でマークアップ。
HTML
<table summary="未来コーポレーション役員一覧">
<caption>役員一覧</caption>
<colgroup id="position"></colgroup>
<colgroup id="name"></colgroup>
<colgroup id="Introduce"></colgroup>
<thead>
<tr>
<th scope="col">役職 / 所属</th>
<th scope="col">氏名</th>
<th scope="col">簡単な自己紹介</th>
</tr>
</thead>
<tbody>
<tr>
<td>代表取締役</td>
<td>山田美子</td>
<td>32歳、主婦業と社長業の両立がんばっています。</td>
</tr>
・・・・・中略・・・・・
<tr>
<td>取締役</td>
<td>水野隆</td>
<td>CTO兼任です。</td>
</tr>
</tbody>
</table>
このデザインの場合、テーブルセルの境界線が重なり合わないため、CSSでborder-collapseプロパティを設定し、値を「separate」とする。
さらにtable要素にはテーブル全体の背景となるグラデーション画像を、th要素には濃いブルーのグラデーション画像を指定する。拡大画像をみると、セルボーダーの左側と上側に明るい色、右側と下側に濃い色を指定することで立体感を出している。
border-spacingプロパティはIE6/7では適用されない為、このデザインを忠実に実現すること優先する場合は、XHTMLのtable要素にcellspacing属性を「0」と指定することでこの問題が回避できる。
（<table cellspacing="0">）。ただし、cellspacing属性は見た目をコントロールする属性なので指定するのは望ましくないが、あくまでもIE6/7の問題を回避するためと考えて指定しておく。
CSS
table, th, td {
margin: 0;
padding: 0;
border-collapse: separate;
border: none;
border-spacing: 0; /* IE 6/7は未対応 */
}
table {
width: 500px;
border: 1px solid #eeeeee;
font-family: sans-serif;
background: #d9e7f6 url(bg-png) repeat-x bottom;
}
caption {
margin-bottom: 10px;
padding-left: 10px;
padding-bottom: 2px;
border-left: 6px solid #307bcf;
line-height: 1.8;
font-weight: bold;
text-align: left;
}
th {
padding: 0.8em 0.5em;
border-color: #629cdd #8db7e6 #629cdd #eeeeee; /* 立体的に見せる */
border-style: solid;
border-width: 1px;
color: #ffffff;
background: #629cdd url(th.png) repeat-x;
font-size: 100%;
text-align: left;
}
td {
padding: 0.8em 0.5em;
border-style: solid;
border-width: 1px;
border-color: #ffffff #81b0e4 #ffffff; /* 立体的に見せる */
font-size: 100%;
}
#position {
width: 100px;
}
#name {
width: 80px;
}
●列の一部をハイライト表示するテーブル
テーブルの列の一部をハイライト表示するには、列グループとしてマークアップしたcolgroup要素に対して背景を指定。
XHTMLで「プレミアム」の列に対して、<col span="1"id="premium"/>と指定し、列グループを示しておく。
ただし、これだけではプレミアム列の角丸を実現できない。あらかしめスライスした角丸上端用の画像を「プレミアム」というテキストが入ったth要素に背景として指定し、角丸下端用の画像を列の最後のセルの背景として指定。
XHTML
<table summary="料金プラン">
<caption>サービス料金プラン</caption>
<col span="1" id="tablehead" />
<col span="1" id="plana" />
<col span="1" id="planb" />
<col span="1" id="planc" />
<col span="1" id="premium" />
<thead>
<tr>
<th scope="col">項目</th><th scope="col">プランA</th><th scope="col">プラン</th>
<th scope="col>プランC</th><th scope="col" class="top">プレミアム</th>
</tr>
</thead>
<tbody>
<tr>
<th class="spec">容量</th>
<td>1GB</td><td>2GB</td><td>3GB</td><td>無制限</td>
</tr>
・・・・中略・・・・
<tr>
<th class="spec">サブドメイン</th>
<td>１つ</td><td>２つ</td><td>３つ</td><td class="bottom">無制限</td>
</tr>
</tbody>
</table>
CSSでは「#premium」に対してオレンジ色の背景を指定。
CSS
・・・・中略・・・・
#premium {
background: #f90; /* プレミアム列にオレンジ色の背景を指定 */
}
th.top {
width: 157px;
border: none;
background: url(top.png) no-repeat left top;
/* プレミアム列の上端に角丸上端背景画像 */
}
td.bottom {
background: url(bottom.png) no-repeat left bottom;
/* プレミアム列の下端に角丸下端背景画像 */
}
th.spec {
background: none;
border: none;
}
colを使ったりするテーブルはまだまだ理解ができにくい。。なにか実際に作ってみないとわかりにくいような気がする。
今日はここまで。
テーブルのスタイリング
table要素のスタイリングは、通常ボックスモデル以外にも、行や列のグループ化、セルの境界線など、テーブル特有のマークアップやスタイリングについて知っておく必要がある。
より魅力的なテーブルのスタイリング方法を解説。
●グラデーション背景と立体的に見せるテーブル
シンプルな役員一覧表をたたき台にして、グラデーション背景で立体的に見えるテーブルになるようにスタイリングする。
XHTMLでは構造に大きな特徴はないが、列グループを示す為のcolgroup要素、行グループを示すためのthead/tbody要素を利用し、項目名はth要素で、内容をtd要素でマークアップ。
HTML
<table summary="未来コーポレーション役員一覧">
<caption>役員一覧</caption>
<colgroup id="position"></colgroup>
<colgroup id="name"></colgroup>
<colgroup id="Introduce"></colgroup>
<thead>
<tr>
<th scope="col">役職 / 所属</th>
<th scope="col">氏名</th>
<th scope="col">簡単な自己紹介</th>
</tr>
</thead>
<tbody>
<tr>
<td>代表取締役</td>
<td>山田美子</td>
<td>32歳、主婦業と社長業の両立がんばっています。</td>
</tr>
・・・・・中略・・・・・
<tr>
<td>取締役</td>
<td>水野隆</td>
<td>CTO兼任です。</td>
</tr>
</tbody>
</table>
このデザインの場合、テーブルセルの境界線が重なり合わないため、CSSでborder-collapseプロパティを設定し、値を「separate」とする。
さらにtable要素にはテーブル全体の背景となるグラデーション画像を、th要素には濃いブルーのグラデーション画像を指定する。拡大画像をみると、セルボーダーの左側と上側に明るい色、右側と下側に濃い色を指定することで立体感を出している。
border-spacingプロパティはIE6/7では適用されない為、このデザインを忠実に実現すること優先する場合は、XHTMLのtable要素にcellspacing属性を「0」と指定することでこの問題が回避できる。
（<table cellspacing="0">）。ただし、cellspacing属性は見た目をコントロールする属性なので指定するのは望ましくないが、あくまでもIE6/7の問題を回避するためと考えて指定しておく。
CSS
table, th, td {
margin: 0;
padding: 0;
border-collapse: separate;
border: none;
border-spacing: 0; /* IE 6/7は未対応 */
}
table {
width: 500px;
border: 1px solid #eeeeee;
font-family: sans-serif;
background: #d9e7f6 url(bg-png) repeat-x bottom;
}
caption {
margin-bottom: 10px;
padding-left: 10px;
padding-bottom: 2px;
border-left: 6px solid #307bcf;
line-height: 1.8;
font-weight: bold;
text-align: left;
}
th {
padding: 0.8em 0.5em;
border-color: #629cdd #8db7e6 #629cdd #eeeeee; /* 立体的に見せる */
border-style: solid;
border-width: 1px;
color: #ffffff;
background: #629cdd url(th.png) repeat-x;
font-size: 100%;
text-align: left;
}
td {
padding: 0.8em 0.5em;
border-style: solid;
border-width: 1px;
border-color: #ffffff #81b0e4 #ffffff; /* 立体的に見せる */
font-size: 100%;
}
#position {
width: 100px;
}
#name {
width: 80px;
}
●列の一部をハイライト表示するテーブル
テーブルの列の一部をハイライト表示するには、列グループとしてマークアップしたcolgroup要素に対して背景を指定。
 |
| プレミアムプランのみハイライトされた料金プラン |
ただし、これだけではプレミアム列の角丸を実現できない。あらかしめスライスした角丸上端用の画像を「プレミアム」というテキストが入ったth要素に背景として指定し、角丸下端用の画像を列の最後のセルの背景として指定。
XHTML
<table summary="料金プラン">
<caption>サービス料金プラン</caption>
<col span="1" id="tablehead" />
<col span="1" id="plana" />
<col span="1" id="planb" />
<col span="1" id="planc" />
<col span="1" id="premium" />
<thead>
<tr>
<th scope="col">項目</th><th scope="col">プランA</th><th scope="col">プラン</th>
<th scope="col>プランC</th><th scope="col" class="top">プレミアム</th>
</tr>
</thead>
<tbody>
<tr>
<th class="spec">容量</th>
<td>1GB</td><td>2GB</td><td>3GB</td><td>無制限</td>
</tr>
・・・・中略・・・・
<tr>
<th class="spec">サブドメイン</th>
<td>１つ</td><td>２つ</td><td>３つ</td><td class="bottom">無制限</td>
</tr>
</tbody>
</table>
CSSでは「#premium」に対してオレンジ色の背景を指定。
CSS
・・・・中略・・・・
#premium {
background: #f90; /* プレミアム列にオレンジ色の背景を指定 */
}
th.top {
width: 157px;
border: none;
background: url(top.png) no-repeat left top;
/* プレミアム列の上端に角丸上端背景画像 */
}
td.bottom {
background: url(bottom.png) no-repeat left bottom;
/* プレミアム列の下端に角丸下端背景画像 */
}
th.spec {
background: none;
border: none;
}
colを使ったりするテーブルはまだまだ理解ができにくい。。なにか実際に作ってみないとわかりにくいような気がする。
今日はここまで。
2011年10月10日月曜日
三十一日目！（番外編その２）
ブログ更新久しぶりです。
先週1週間は実際にクライアントさんから依頼を受けて作成しているHPのお手伝いをする機会を頂きまして、やっておりました。
そのHP自体は、ベースがかなり古くからあって更新やリニューアルを重ねているものだったので、このブログで勉強している「XHTML」や「CSS」とは少し違ったりもしたんですが、先週の実務作業のテーマとしては、
「Dreamweaver」「Fireworks」などのWeb作成ソフトになれよう！
という感じでした。
とはいえ、少し前のブログでも書いていたと思いますが、現在私が職場で使用しているPCはスペックも高くなく、上記の様な有料（結構高額）なソフトなど入っていませんので、htmlやcssを書くときは、テキストエディタで、画像はGinp2やペイントでやってました。
しかし、ほんとベタに「現代の技術はすごい！」とか思ったんですが、本社にWeb制作に欠かせないソフトが一通り揃った高性能なＰＣがあるのですが、それを離れた場所から遠隔で使用できるいう！ソフトはもちろん、性能もそのままなんですね。まったくびっくりです。
まずはDreamweaver、まだまだ使いこなせていないのですが、かなり便利だと思います。とにかく今までのテキストエディタのみで作成していくのが大変すぎだった。。というのもあるかもしれないですが、htmlソース、cssソース、実際のデザイン、ブラウザ表示などが簡単に確認できるので、それだけでもすごく便利でした。ソースなども途中まで入力したら、アシスト的に候補になりそうなものが、出てきたり、この間ブログで勉強していた「ロールオーバー」なんかも簡単に作成できたりするようです。
そしてFTPとか？（実はこのあたりまだちゃんと把握できていない・・）と繋がっているようで、既にUPされているHPからファイルを落としてきて、変更したり、追加したりして、またすぐにUPする作業が簡単にできました。
ただ思ったのが、最初からhtmlやcssのことを勉強するときにこのソフトを使わなくてよかったと思います。ある程度htmlやcssの知識を身につけてから使うソフトで、制作の効率や速度UPの手助けをしてくれるという感じ。「全くの初心者でもこれさえあればHP作成が簡単！」ではないとは思います。
Fireworksについてはこっちも全然使いこなせてないです。今回の作業ではサイズ変更と、画像の明るさなどの調節くらいしかやってないのでまだまだですね。
検索してみるとFireworksの使い方やコツなんかのブログはかなりたくさんあったので、そういうのを見ながら勉強していきたいと思います。
これでかなりWeb制作の環境は整ってきたので、ステップアップしていくために更に勉強を進めていきたいと思います。
今日はここまで。
先週1週間は実際にクライアントさんから依頼を受けて作成しているHPのお手伝いをする機会を頂きまして、やっておりました。
そのHP自体は、ベースがかなり古くからあって更新やリニューアルを重ねているものだったので、このブログで勉強している「XHTML」や「CSS」とは少し違ったりもしたんですが、先週の実務作業のテーマとしては、
「Dreamweaver」「Fireworks」などのWeb作成ソフトになれよう！
という感じでした。
とはいえ、少し前のブログでも書いていたと思いますが、現在私が職場で使用しているPCはスペックも高くなく、上記の様な有料（結構高額）なソフトなど入っていませんので、htmlやcssを書くときは、テキストエディタで、画像はGinp2やペイントでやってました。
しかし、ほんとベタに「現代の技術はすごい！」とか思ったんですが、本社にWeb制作に欠かせないソフトが一通り揃った高性能なＰＣがあるのですが、それを離れた場所から遠隔で使用できるいう！ソフトはもちろん、性能もそのままなんですね。まったくびっくりです。
まずはDreamweaver、まだまだ使いこなせていないのですが、かなり便利だと思います。とにかく今までのテキストエディタのみで作成していくのが大変すぎだった。。というのもあるかもしれないですが、htmlソース、cssソース、実際のデザイン、ブラウザ表示などが簡単に確認できるので、それだけでもすごく便利でした。ソースなども途中まで入力したら、アシスト的に候補になりそうなものが、出てきたり、この間ブログで勉強していた「ロールオーバー」なんかも簡単に作成できたりするようです。
そしてFTPとか？（実はこのあたりまだちゃんと把握できていない・・）と繋がっているようで、既にUPされているHPからファイルを落としてきて、変更したり、追加したりして、またすぐにUPする作業が簡単にできました。
ただ思ったのが、最初からhtmlやcssのことを勉強するときにこのソフトを使わなくてよかったと思います。ある程度htmlやcssの知識を身につけてから使うソフトで、制作の効率や速度UPの手助けをしてくれるという感じ。「全くの初心者でもこれさえあればHP作成が簡単！」ではないとは思います。
Fireworksについてはこっちも全然使いこなせてないです。今回の作業ではサイズ変更と、画像の明るさなどの調節くらいしかやってないのでまだまだですね。
検索してみるとFireworksの使い方やコツなんかのブログはかなりたくさんあったので、そういうのを見ながら勉強していきたいと思います。
これでかなりWeb制作の環境は整ってきたので、ステップアップしていくために更に勉強を進めていきたいと思います。
今日はここまで。
2011年9月28日水曜日
三十日目！（～ロールオーバー続き）
昨日の続き進めます。
次のようにグローバルナビゲーションを定義したXHTMLに、さまざまなテクニックでロールオーバー効果を設定していく。
XHTML
<ul id="nav">
<li id="nav-top" class="current"><a href="/">トップページ</a></li>
<li id="nav-service"><a href="/service/">サービス内容</a></li>
<li id="nav-workflow"><a href="/workflow/">ご利用の流れ</a></li>
<li id="nav-price"><a href="/price/"料金表</a></li>
<li id="nav-estimate"><a href="/estimate/">自動見積</a></li>
<li id="nav-faq"><a href="/faq/">よくあるご質問</a></li>
</ul>
●「テキストのみ」または「テキスト+background」で実現
「テキスト」のみではサンプルのようなデザインは実現できない。テキストをCSSでそれっぽくスタイリングしたり、backgroundプロパティで背景画像を指定することもできますが、デザインの完全再現はムリといえる。
●「テキスト+text-indent+background」で実現（画像置換）
a要素にテキストを含め、背景画像を指定しただけでは、背景画像の上にテキストが重なって表示されてしまう。テキストを非表示化する方法のひとつが、text-indentプロパティを利用すること。
たとえば、「text-indent: -9999px;」と指定する。
●li要素を横並びにする
サンプルではli要素に「float:left;」と指定することで、横並びにしている。「display:inline;」を使うこともできるが、その場合、行内に余白が確保されてしまうため、縦方向のmarginやpaddingを指定しても思い通りの表示ができない。
シンプルにテキストを横並びにするのであれば「display:inline;」を、グラフィカルで幅固定されたナビゲーションを横並びにするのであれば、「float:left;」を利用するというように適宜使い分ける。
●クリッカブル領域のアウトライン
text-indentプロパティをマイナス値で指定することで、a要素のクリッカブル領域のアウトライン（点線）がはみ出して表示されるブラウザがある。
これを回避するために「overflow:hidden;」と指定する。「outline:none;」ではクリッカブル領域を認識しづらくなる弊害があるため、「overflow: hidden;」のほうがよい方法である。
CSS
/* ナビゲーション全体のスタイリング */
ul#nav, ul#nav li, ul#nav li a {
margin: 0;
padding: 0;
display: block;
height: 28px;
}
ul#nav {
background: url(bg.png) repeat-x; /* 背景画像を横方向にリピート */
}
/* ナビゲーション項目に共通のスタイリング */
ul#nav li {
float: left; /* 項目を横並びにする */
width: 100px; /* 項目に含めた画像それぞれの幅は100px */
}
ul#nav li a {
overflow: hidden; /* クリッカブル領域の外にはみ出してしまうアウトライ ンを隠す */
text-indent: -100000em; /* テキストを画面左側に追いやって見えなくする（オフレット） */
}
/* ナビゲーション項目それぞれのスタイリング */
ul#nav li#nav-top {
background: url(hover/top.png) no-repeat;
}
ul#nav li#nav-top a {
background: url(top.png) no-repeat;
}
・・・（中略）・・・
ul#nav li#nav-faq {
width: 101px;
background: url(hover/faq.png) no-repeat;
}
ul#nav li a:hover,
ul#nav li.current a {
background-image: none !important; /* ロールオーバー時に項目それぞれの背景画像を隠す */
}
次に、CSSだけでロールオーバー効果をどのように実現するか考えてみる。親要素のul要素にこのナビゲーション全体のリピート背景を指定、子要素のli要素それぞれにロールオーバー後の背景を指定、孫要素のa要素それぞれにロールオーバー前の背景を指定し、a要素の「:hover」（ロールオーバー時）だけ背景をなくすことで、li要素の背景が出現する仕組みでロールオーバーを実現している。
なお、現在表示しているページやカテゴリーに該当するli要素には「class="current"」と指定してはじめから背景をなくし、ロールオーバー後の背景が表示されるようにしている。
●CSS Sprites
このサンプルでは、リンクひとつひとつに対してそれぞれ単独の背景画像をしていしているが、画像をひとまとめにしてbackground-positionプロパティを使って位置指定する方法もある。
画像ファイルのリクエスト数を減らせる為、アクセス数の多い検索サイトやWebサービスなどでしばしば利用されているテクニックで、「CSS Sprites」と呼ばれている。
●「テキスト+display:none+background」で実現（画像置換）
text-indentプロパティを利用してテキストを非表示化するのではなく、「display:none;」で非表示化する方法もある。ただし、次のようにa要素のなかにspan要素を加えなければならない。
XHTML
<ul id="nav">
<li id="nav-top" class="current"><a href="/"><span>トップページ</span></a></li>
<li id="nav-service"><a href="/service/"><span>サービス内容</span></a></li>
<li id="nav-workflow"><a href="/workflow/"><span>ご利用の流れ</span></a></li>
<li id="nav-price"><a href="/price/"><span>料金表</span></a></li>
<li id="nav-estimate"><a href="/estimate/"><span>自動見積</span></a></li>
<li id="nav-faq"><a href="/faq/"><span>よくある質問</span></a></li>
</ul>
CSSはいたってシンプルで、span要素に対して「display:none;」と指定すれば非表示化される。
CSS
ul#nav li a span {
display: none; /* テキストを非表示にする */
}
ただし、音声ブラウザのなかには「display: none;」と指定された内容を読み上げないものがあり、text-indentプロパティを利用する方法に比べてアクセシビリティが低くなる。また構造とは無関係にspan要素を使う点も好ましくない。
●画像置換とSEOの関係
img要素を使わずに、CSSの「画像置換」というテクニックを利用する動機には、デザイン変更時にCSSだけを修正すれば済むという「メンテナンス性の向上」のほか、「SEO」もある。検索サービスのなかにはalt属性値を収集対象に含めないものがあるというわれており、（また、クローラーの挙動やアルゴリズムが変更される可能性があるため）、alt属性値よりも普通のテキストのほうが確実だから。
一方、検索サービス各社は、ガイドラインで「隠しテキストや隠しリンクは使用しないこと」としているため、違反するサイトはスパムと見なされ、大幅に検索順位が下がったり、検索結果に表示されなくなる（いわゆる「SEOスパムサイト」と判断されてしまう）恐れがある。Googleの「ウェブマスター向けガイドライン」を参照のこと。
ただし、Googleは「画像置換が視覚的なユーザーエクスペリエンスを改善するためであれば、スパムになると心配する必要はない」と述べているため、あからさまにスパム目的で無い限り問題はないと考えられる。
●「img要素+JavaScript」で実現
CSSの画像転換を利用したロールオーバーと異なり、従来通りimg要素を埋め込む方法は、CSSオン・画像表示オフ環境ではalt属性値が表示されるため、そこにどのような画像が埋め込まれているかユーザーに伝えることができる。デザイン変更時にすべてのXHTMLを修正する手間はありますが、どのような環境でも対応できる安全かつ確実な方法。
ただし、img要素だけではロールオーバーは実現できないので、専用のJavaScriptを用意したり、jQueryなどのJavaScriptライブラリを利用する。
なお、次のようにJavaScriptのイベントハンドラをimg要素に直接指定し、ロールオーバーを実現することもできるが、構造のなかに振る舞いの指定が含まれることになってしまうため、JavaScriptの外部ファイルから実行させるようがよい点に注意。
<img src="images/nav-top.gif" alt="トップページ"
onmouseover="this.src='images/nav-top_on.gif'"
onmouseout="this.src='images/nav-top.gif'"/>
ロールオーバーはHP作成となるとほぼ必須に近いテクニックだと思います。前回作成したHPでもトップページのサイドバーで使用されてましたが、作成した部分ではサイドバーは触れなかったため、まだ実践できてないので実際に試しに作成してみないと。。という感じです。
本日はここまで。
次のようにグローバルナビゲーションを定義したXHTMLに、さまざまなテクニックでロールオーバー効果を設定していく。
XHTML
<ul id="nav">
<li id="nav-top" class="current"><a href="/">トップページ</a></li>
<li id="nav-service"><a href="/service/">サービス内容</a></li>
<li id="nav-workflow"><a href="/workflow/">ご利用の流れ</a></li>
<li id="nav-price"><a href="/price/"料金表</a></li>
<li id="nav-estimate"><a href="/estimate/">自動見積</a></li>
<li id="nav-faq"><a href="/faq/">よくあるご質問</a></li>
</ul>
●「テキストのみ」または「テキスト+background」で実現
「テキスト」のみではサンプルのようなデザインは実現できない。テキストをCSSでそれっぽくスタイリングしたり、backgroundプロパティで背景画像を指定することもできますが、デザインの完全再現はムリといえる。
●「テキスト+text-indent+background」で実現（画像置換）
a要素にテキストを含め、背景画像を指定しただけでは、背景画像の上にテキストが重なって表示されてしまう。テキストを非表示化する方法のひとつが、text-indentプロパティを利用すること。
たとえば、「text-indent: -9999px;」と指定する。
●li要素を横並びにする
サンプルではli要素に「float:left;」と指定することで、横並びにしている。「display:inline;」を使うこともできるが、その場合、行内に余白が確保されてしまうため、縦方向のmarginやpaddingを指定しても思い通りの表示ができない。
シンプルにテキストを横並びにするのであれば「display:inline;」を、グラフィカルで幅固定されたナビゲーションを横並びにするのであれば、「float:left;」を利用するというように適宜使い分ける。
●クリッカブル領域のアウトライン
text-indentプロパティをマイナス値で指定することで、a要素のクリッカブル領域のアウトライン（点線）がはみ出して表示されるブラウザがある。
これを回避するために「overflow:hidden;」と指定する。「outline:none;」ではクリッカブル領域を認識しづらくなる弊害があるため、「overflow: hidden;」のほうがよい方法である。
CSS
/* ナビゲーション全体のスタイリング */
ul#nav, ul#nav li, ul#nav li a {
margin: 0;
padding: 0;
display: block;
height: 28px;
}
ul#nav {
background: url(bg.png) repeat-x; /* 背景画像を横方向にリピート */
}
/* ナビゲーション項目に共通のスタイリング */
ul#nav li {
float: left; /* 項目を横並びにする */
width: 100px; /* 項目に含めた画像それぞれの幅は100px */
}
ul#nav li a {
overflow: hidden; /* クリッカブル領域の外にはみ出してしまうアウトライ ンを隠す */
text-indent: -100000em; /* テキストを画面左側に追いやって見えなくする（オフレット） */
}
/* ナビゲーション項目それぞれのスタイリング */
ul#nav li#nav-top {
background: url(hover/top.png) no-repeat;
}
ul#nav li#nav-top a {
background: url(top.png) no-repeat;
}
・・・（中略）・・・
ul#nav li#nav-faq {
width: 101px;
background: url(hover/faq.png) no-repeat;
}
ul#nav li a:hover,
ul#nav li.current a {
background-image: none !important; /* ロールオーバー時に項目それぞれの背景画像を隠す */
}
次に、CSSだけでロールオーバー効果をどのように実現するか考えてみる。親要素のul要素にこのナビゲーション全体のリピート背景を指定、子要素のli要素それぞれにロールオーバー後の背景を指定、孫要素のa要素それぞれにロールオーバー前の背景を指定し、a要素の「:hover」（ロールオーバー時）だけ背景をなくすことで、li要素の背景が出現する仕組みでロールオーバーを実現している。
なお、現在表示しているページやカテゴリーに該当するli要素には「class="current"」と指定してはじめから背景をなくし、ロールオーバー後の背景が表示されるようにしている。
●CSS Sprites
このサンプルでは、リンクひとつひとつに対してそれぞれ単独の背景画像をしていしているが、画像をひとまとめにしてbackground-positionプロパティを使って位置指定する方法もある。
画像ファイルのリクエスト数を減らせる為、アクセス数の多い検索サイトやWebサービスなどでしばしば利用されているテクニックで、「CSS Sprites」と呼ばれている。
●「テキスト+display:none+background」で実現（画像置換）
text-indentプロパティを利用してテキストを非表示化するのではなく、「display:none;」で非表示化する方法もある。ただし、次のようにa要素のなかにspan要素を加えなければならない。
XHTML
<ul id="nav">
<li id="nav-top" class="current"><a href="/"><span>トップページ</span></a></li>
<li id="nav-service"><a href="/service/"><span>サービス内容</span></a></li>
<li id="nav-workflow"><a href="/workflow/"><span>ご利用の流れ</span></a></li>
<li id="nav-price"><a href="/price/"><span>料金表</span></a></li>
<li id="nav-estimate"><a href="/estimate/"><span>自動見積</span></a></li>
<li id="nav-faq"><a href="/faq/"><span>よくある質問</span></a></li>
</ul>
CSSはいたってシンプルで、span要素に対して「display:none;」と指定すれば非表示化される。
CSS
ul#nav li a span {
display: none; /* テキストを非表示にする */
}
ただし、音声ブラウザのなかには「display: none;」と指定された内容を読み上げないものがあり、text-indentプロパティを利用する方法に比べてアクセシビリティが低くなる。また構造とは無関係にspan要素を使う点も好ましくない。
●画像置換とSEOの関係
img要素を使わずに、CSSの「画像置換」というテクニックを利用する動機には、デザイン変更時にCSSだけを修正すれば済むという「メンテナンス性の向上」のほか、「SEO」もある。検索サービスのなかにはalt属性値を収集対象に含めないものがあるというわれており、（また、クローラーの挙動やアルゴリズムが変更される可能性があるため）、alt属性値よりも普通のテキストのほうが確実だから。
一方、検索サービス各社は、ガイドラインで「隠しテキストや隠しリンクは使用しないこと」としているため、違反するサイトはスパムと見なされ、大幅に検索順位が下がったり、検索結果に表示されなくなる（いわゆる「SEOスパムサイト」と判断されてしまう）恐れがある。Googleの「ウェブマスター向けガイドライン」を参照のこと。
ただし、Googleは「画像置換が視覚的なユーザーエクスペリエンスを改善するためであれば、スパムになると心配する必要はない」と述べているため、あからさまにスパム目的で無い限り問題はないと考えられる。
●「img要素+JavaScript」で実現
CSSの画像転換を利用したロールオーバーと異なり、従来通りimg要素を埋め込む方法は、CSSオン・画像表示オフ環境ではalt属性値が表示されるため、そこにどのような画像が埋め込まれているかユーザーに伝えることができる。デザイン変更時にすべてのXHTMLを修正する手間はありますが、どのような環境でも対応できる安全かつ確実な方法。
ただし、img要素だけではロールオーバーは実現できないので、専用のJavaScriptを用意したり、jQueryなどのJavaScriptライブラリを利用する。
なお、次のようにJavaScriptのイベントハンドラをimg要素に直接指定し、ロールオーバーを実現することもできるが、構造のなかに振る舞いの指定が含まれることになってしまうため、JavaScriptの外部ファイルから実行させるようがよい点に注意。
<img src="images/nav-top.gif" alt="トップページ"
onmouseover="this.src='images/nav-top_on.gif'"
onmouseout="this.src='images/nav-top.gif'"/>
ロールオーバーはHP作成となるとほぼ必須に近いテクニックだと思います。前回作成したHPでもトップページのサイドバーで使用されてましたが、作成した部分ではサイドバーは触れなかったため、まだ実践できてないので実際に試しに作成してみないと。。という感じです。
本日はここまで。
2011年9月27日火曜日
二十九日目！（リスト、ロールオーバー～）
リストとリンクのスタイリング
グローバルナビゲーション、パンくずリスト、リンクリスト、用語集など、よくある事例をもとにリストのスタイリングを学んでいく。リストではさまざまなスタイリングテクニックを利用することができ、CSSの実践力を頭と体に叩き込む絶好のチャンスである。
また、ナビゲーションにしてもパンくずリストにしても、項目のなかに（a要素）を含むケースが多いため、リストとリンクのスタイリングをまとめて取り上げる。
リストやリンクのスタイリングのコツは、XHTMLのブロックレベル要素とインライン要素という「しばり」にとらわれずに表現方法を考えること。たとえばリンク（a要素）はインライン要素だが、「display:block;」でブロックレベル要素のように見せることができるし、背景画像と組み合わせてロールオーバー効果をつけるなど、さまざまなコンテンツに応用できる。
 |
| サイドバーに配置した最新記事一覧の例 |
●リンクリストのスタイリング
2カラムでレイアウトしているサイトやブログで、サイドバーに最新記事一覧を配置しているところをよく見かける。
行頭では記事をあらわすアイコンが置いてあり、訪問済みリンクの右端には「訪問済みであること」を示すチェックマークが表示されている。
デザインとしては、すべての項目に同じアイコンを表示させていることもあり、一見「順不同」な（ul要素でマークアップする）リンクリストだが、新しい順序で並んでいることを考えると、次のように順序つきリスト（ol要素）でマークアップするこもできる。
XHTML
<div id="recent-entries" class="section">
<h2><img src="h2.png" alt="最新ブログ記事" /></h2>
<ol>
<li><a href="article1.html">【連動書籍執筆中】 CSS Nite...</a></li>
<li><a href="article2.html">Fireworks デベロッパーに...</a></li>
<li><a href="article3.html">Twitter関連サイト...</a></li>
<li><a href="article4.html">Web Designing 9月号...</a></li>
<li><a href="article5.html">最近のお知らせダイジェスト</a></li>
</ol>
</div>
このXHTMLをもとにCSSを製作していく。まずはスタイルを適用していない状態でXHTMLファイルをブラウザで開いてみる。
●リストの先頭に任意のアイコンを表示
ol要素でマークアップしているため、ブラウザのデフォルトスタイルでは項目の先頭に番号が振られている。これは、ol要素内のliに対して、ブラウザのデフォルトスタイルが「list-style-type: decimal;」（先頭に1,2,3と番号を振る）になっているため。まず「list-style-type:none;」と指定してマーカーを消す。
次に、小さなアイコンをリスト先頭に表示させる。ここではbackgroudプロパティでli要素の背景として指定することで、あたかもリストマーカーが小さくなってアイコンになっているようにする。ひとつだけ表示させるために「no-repeat」、位置を指定するために「0 3px」（左から0、上から3pxの位置）と指定する。最後に、アイコンの表示スペースを確保するために、padding-leftプロパティで「18px」と指定する。
CSS
#recent-entries ol li {
list-style-type: none; /* ブラウザデフォルトのリストマーカーを消す */
backgroud: url(icon.gif） no-repeat 0 3px; /* アイコン画像と表示方法、位置の指定 */
padding-left: 18px; /* アイコンの表示スペースを確保 */
}
※list-style-image/list-style-positionの注意点
行頭のアイコンはbackgroundプロパティではなくlist-style-imageプロパティでも指定できる。その場合、行頭アイコンの位置は、list-style-positionプロパティで指定できる。
ただし、list-style-positionプロパティでは、リストマーカーを内容の外側（outside）と内側（inside）のどちらかに表示するかしか指定がないため、細かな位置指定はできない。またli要素に「display: inline;」と指定してインライン化した（横に並べた）場合、ほとんどのブラウザでリストマーカーを自動的に消してしまう為、backgroundプロパティを利用するしかない。したがって、デザインの再現性やブラウザの挙動を考えると、リストマーカーを任意の画像にする場合は、backgroundプロパティで実現したほうがよい。
●リンクの末尾に任意のアイコンを表示させる
li要素の中のa要素について、訪問済みであることを示すための「ひと工夫」をする。訪問済みのスタイルは:visited擬似クラスで指定する。基本的なスタイルはリストの先頭にアイコンを表示させることと変わらないが、訪問済みリンクのみ末尾に「check.gif」（訪問済みを示すチェックマーク）が表示されるように設定する。
#recent-entries ol li a:visited {
padding-right: 10px /* アイコンの表示スペースを確保 */
color: #222266; /*訪問済みリンクの文字色 */
background: url(check.png) no-repeat right 5px; /* アイコン画像と表示方法、位置の指定 */
}
なお、a要素に指定する擬似クラスは、「:link」「:visited」「:hover」「:focus」「active」の順で指定する点に注意。
リンクリストスタイリング実現に必要なCSS
#recent-entries {
width: 180px;
background: #dce4b1 url(recent_bottom.gif) no-repeat left bottom;
}
#recent-entries ol {
margin: 0;
padding: 10px 0 10px 0; /* ボックス内のol要素の位置を調整 */
}
#recent-entries ol li {
margin: 0 12px 7px 15px; /* liリストの位置、間隔を調整 */
list-style-type: none; /* ブラウザデフォルトのリストマーカーを消す */
background: url(icon.gif) no-repeat 0 3px; /* アイコン画像と表示方法、位置の指定 */
padding-left: 18px; /* アイコンの表示スペースを確保 */
}
#recent-entries ol li a {
color: #ffffff; /* リンク文字色 */
}
#recent-entries ol li a:visited {
padding-right: 10px; /* アイコンの表示スペースを確保 */
color: #222266; /* 訪問済みリンクの文字色 */
background: url(check.png) no-repeat right 5px /* アイコン画像と表示方法、位置の指定 */
}
#recent-entries ol li a:hover,
#recent-entries ol li a:focus,
#recent-entries ol li a:active, {
color: #ffffff; /* カーソルオン、フォーカス、アクティブ時の文字色 */
}
●ナビゲーションのスタイリングと画像置換
ロールオーバーで背景色や背景画像が入れ替わる、という視覚効果を設定したナビゲーションは、ユーザーに対してカーソルアクションを明確に伝えることができ、ユーザビリティの向上に効果がある。一般的なグローバルナビゲーションを例に、「画像置換」というテクニックを利用したロールオーバー効果の実現方法を解説。
グローバルナビゲーションの例
ロールオーバー効果を実現するにはさまざまな方法があり、それぞれにメリットとデメリットがある。サイトの規模や更新のしやすさ、音声読み上げを含むユーザーの利用環境を考慮しながら、メリットとデメリットを理解した上で最適な方法を選ぶ。
中途半端ですが今日はここまで。
<li><a href="article3.html">Twitter関連サイト...</a></li>
<li><a href="article4.html">Web Designing 9月号...</a></li>
<li><a href="article5.html">最近のお知らせダイジェスト</a></li>
</ol>
</div>
このXHTMLをもとにCSSを製作していく。まずはスタイルを適用していない状態でXHTMLファイルをブラウザで開いてみる。
 |
| CSSを適用する前に、XHTMLファイルをブラウザで表示させた例 |
●リストの先頭に任意のアイコンを表示
ol要素でマークアップしているため、ブラウザのデフォルトスタイルでは項目の先頭に番号が振られている。これは、ol要素内のliに対して、ブラウザのデフォルトスタイルが「list-style-type: decimal;」（先頭に1,2,3と番号を振る）になっているため。まず「list-style-type:none;」と指定してマーカーを消す。
次に、小さなアイコンをリスト先頭に表示させる。ここではbackgroudプロパティでli要素の背景として指定することで、あたかもリストマーカーが小さくなってアイコンになっているようにする。ひとつだけ表示させるために「no-repeat」、位置を指定するために「0 3px」（左から0、上から3pxの位置）と指定する。最後に、アイコンの表示スペースを確保するために、padding-leftプロパティで「18px」と指定する。
CSS
#recent-entries ol li {
list-style-type: none; /* ブラウザデフォルトのリストマーカーを消す */
backgroud: url(icon.gif） no-repeat 0 3px; /* アイコン画像と表示方法、位置の指定 */
padding-left: 18px; /* アイコンの表示スペースを確保 */
}
※list-style-image/list-style-positionの注意点
行頭のアイコンはbackgroundプロパティではなくlist-style-imageプロパティでも指定できる。その場合、行頭アイコンの位置は、list-style-positionプロパティで指定できる。
ただし、list-style-positionプロパティでは、リストマーカーを内容の外側（outside）と内側（inside）のどちらかに表示するかしか指定がないため、細かな位置指定はできない。またli要素に「display: inline;」と指定してインライン化した（横に並べた）場合、ほとんどのブラウザでリストマーカーを自動的に消してしまう為、backgroundプロパティを利用するしかない。したがって、デザインの再現性やブラウザの挙動を考えると、リストマーカーを任意の画像にする場合は、backgroundプロパティで実現したほうがよい。
●リンクの末尾に任意のアイコンを表示させる
li要素の中のa要素について、訪問済みであることを示すための「ひと工夫」をする。訪問済みのスタイルは:visited擬似クラスで指定する。基本的なスタイルはリストの先頭にアイコンを表示させることと変わらないが、訪問済みリンクのみ末尾に「check.gif」（訪問済みを示すチェックマーク）が表示されるように設定する。
#recent-entries ol li a:visited {
padding-right: 10px /* アイコンの表示スペースを確保 */
color: #222266; /*訪問済みリンクの文字色 */
background: url(check.png) no-repeat right 5px; /* アイコン画像と表示方法、位置の指定 */
}
なお、a要素に指定する擬似クラスは、「:link」「:visited」「:hover」「:focus」「active」の順で指定する点に注意。
リンクリストスタイリング実現に必要なCSS
#recent-entries {
width: 180px;
background: #dce4b1 url(recent_bottom.gif) no-repeat left bottom;
}
#recent-entries ol {
margin: 0;
padding: 10px 0 10px 0; /* ボックス内のol要素の位置を調整 */
}
#recent-entries ol li {
margin: 0 12px 7px 15px; /* liリストの位置、間隔を調整 */
list-style-type: none; /* ブラウザデフォルトのリストマーカーを消す */
background: url(icon.gif) no-repeat 0 3px; /* アイコン画像と表示方法、位置の指定 */
padding-left: 18px; /* アイコンの表示スペースを確保 */
}
#recent-entries ol li a {
color: #ffffff; /* リンク文字色 */
}
#recent-entries ol li a:visited {
padding-right: 10px; /* アイコンの表示スペースを確保 */
color: #222266; /* 訪問済みリンクの文字色 */
background: url(check.png) no-repeat right 5px /* アイコン画像と表示方法、位置の指定 */
}
#recent-entries ol li a:hover,
#recent-entries ol li a:focus,
#recent-entries ol li a:active, {
color: #ffffff; /* カーソルオン、フォーカス、アクティブ時の文字色 */
}
●ナビゲーションのスタイリングと画像置換
ロールオーバーで背景色や背景画像が入れ替わる、という視覚効果を設定したナビゲーションは、ユーザーに対してカーソルアクションを明確に伝えることができ、ユーザビリティの向上に効果がある。一般的なグローバルナビゲーションを例に、「画像置換」というテクニックを利用したロールオーバー効果の実現方法を解説。
グローバルナビゲーションの例
 |
| 練習もかねてGINP2で例画像作成 |
ロールオーバー効果を実現するにはさまざまな方法があり、それぞれにメリットとデメリットがある。サイトの規模や更新のしやすさ、音声読み上げを含むユーザーの利用環境を考慮しながら、メリットとデメリットを理解した上で最適な方法を選ぶ。
中途半端ですが今日はここまで。
2011年9月26日月曜日
二十八日目！（フォントとテキストのスタイリング）
連休中は、GINP2をさわって遊んでました。だいぶ前ではありますが、イラストレーターやフォトショップも少しはやったことがあり、レイヤーやペシェ曲線などなんとなくはわかっていたので、少しずつ使い方が分かってきました。
続きすすめていきます。
フォントとテキストのスタイリング
●フォントはユーザー環境に依存
そのフォントが表示されるかどうかはユーザー環境に依存する（ユーザーのパソコンにインストールされていないフォントは別のフォントになってしまう）という条件があるものの、特に欧文フォントはさまざまな種類が最初からOSに入っており、それぞれから文字の表情をいろいろ読み取ることができる。
Webページの本文部分は読みやすさを重視すべきであり、文字が主張しすぎるのは考えものだが、見出しなどで個性的なフォントを効果的に使うことで、画像を使わなくてもかなり豊かな表現ができるようになる。
書体の選択の際には、すべての環境に完璧に対応するのは難しいことをまず認識する。Windows Vistaに入っているフォント、Windows XPに入っているフォント、Mac OS Xに入っているフォント、これら全てのOSに入っているフォント、名称は違うけれど雰囲気の似ているフォントなどを理解したうえで、イメージどおりに書体が選択されるように指定する。
「choco*choco Cafe And Sweets」というロゴを例に、XHTML+CSSだけでスタイリングする。このような表現を実現するには、画像を使うのが一般的だが、あえてチャレンジングなサンプルとして。
このロゴをXHTML+CSSで実現するために、次のような細かなポイントを順番に確認する。
これらのポイントに注意しながら作成したXHTMLとCSS
XHTML
<h1>choco*choco<span>Cafe And Sweets</span></h1>
CSS
h1 {
margin: 0;
padding: 0;
width: 310px;
height: 104px;
color: #663300;
font-size: 40px;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align: center;
}
h1 span {
margin: 5px auto 0;
display: block;
width: 300px;
line-height: 1.6;
color: #ffffff;
background-color: #663300;
font-size: 20px;
font-weight: normal;
font-variant: small-caps;
letter-spacing: 5px;
}
●希望の書体に近いフォントをあわせて指定する
font-familyプロパティでフォントの種類を指定する際は「Verdana」だけでなく比較的近いフォントを指定しておく。先に書いてあるフォントが優先的に適用され、もしもそのフォントがなければ次に書かれているフォントという順序で適用される。
「Verdana」に雰囲気が似たフォントとして、「Helvetica」はＭac OS Xの多くに、「Arial」はWindowsやMac OS Xの多くにインストールされているので、これらも指定しておく。いずれのフォントも入っていない環境のために総称ファミリー（ここではゴシック体を意味する「sans-serif」）を指定しておくことで、より多くの環境に対応させることができる。
h1 { font-family: Verdana, Helvetica, Arial, sans-serif; }
●文字の大きさを調整する
「choco*choco」は「Cafe And Sweets」に比べて文字が大きくなっている。フォントの大きさはfont-sizeプロパティで指定する。単位をピクセルで指定すれば大きさを忠実に再現できる。
なお、IE6以前では、単位がピクセルで指定されていると、文字サイズを変更してもフォントサイズが変わらないという問題がある。ロゴについてはこれでよしと考えるか、CSSハックでIEに対してのみ、「em」などの相対単位を適用する。
●文字の太さを調整する
「chocochoco」は「Cafe And Sweets」に比べて文字が太くなっている。文字の太さはfont-weightプロパティで指定。font-weightプロパティの値は「normal」「bold」「bolder」「lighter」「100～900」（100刻みの数値）が指定できる。ただし、現在普及しているブラウザでは「100～900」の数値で指定しても100から500は「normal」と同等に、600から900は「bold」と同等になるため、はじめから「normal」か「bold」を選ぶのが現実的。
「bold」を選んだ場合、そのフォントファミリーにbold用の書体が含まれている場合、その書体でレンダリングされる。たとえば、「ヒラギノ角ゴ Pro」ファミリーで表示されている要素に対し「font-weight: normal」と指定した場合は「ヒラギノ角ゴ Pro W6」で表示される。
ただし、ブラウザの種類やバージョンによって、この機能をサポートしていない場合がある。その場合は「normal」で表示される書体を単純に太らせたかたちで表示される。
●文字間隔を調整する
「Cafe And Sweets」の文字間隔を多少広めにするためにはletter-spacingプロパティを利用する。このロゴのように幅や高さを固定している場合にはピクセルで指定する。本文部分で文字の大きさに合わせて読みやすさを確保する目的で使う、letter-spacingプロパティには、ピクセルではなく「em」で指定し、文字サイズとのバランスをもとに間隔が設定されるようにする。
●スモールキャップスの設定
「Cafe And Sweets」単語の先頭が通常の大文字、他の文字は小さめの大文字となっている。このような表現を「スモールキャップス」といい、font-variantプロパティで「small-caps」と指定することで実現できる。
今日はここまで。
続きすすめていきます。
フォントとテキストのスタイリング
●フォントはユーザー環境に依存
そのフォントが表示されるかどうかはユーザー環境に依存する（ユーザーのパソコンにインストールされていないフォントは別のフォントになってしまう）という条件があるものの、特に欧文フォントはさまざまな種類が最初からOSに入っており、それぞれから文字の表情をいろいろ読み取ることができる。
Webページの本文部分は読みやすさを重視すべきであり、文字が主張しすぎるのは考えものだが、見出しなどで個性的なフォントを効果的に使うことで、画像を使わなくてもかなり豊かな表現ができるようになる。
書体の選択の際には、すべての環境に完璧に対応するのは難しいことをまず認識する。Windows Vistaに入っているフォント、Windows XPに入っているフォント、Mac OS Xに入っているフォント、これら全てのOSに入っているフォント、名称は違うけれど雰囲気の似ているフォントなどを理解したうえで、イメージどおりに書体が選択されるように指定する。
「choco*choco Cafe And Sweets」というロゴを例に、XHTML+CSSだけでスタイリングする。このような表現を実現するには、画像を使うのが一般的だが、あえてチャレンジングなサンプルとして。
このロゴをXHTML+CSSで実現するために、次のような細かなポイントを順番に確認する。
| 書体 | Verdana |
|---|---|
| 色 | 「choco*choco」の文字色は#663300、「Cafe And Sweets」の文字色は#ffffff |
| 文字同士の間隔 | 「Cafe And Sweets」の間隔が広めになっている |
| 大文字・小文字 | 「choco*choco」はすべて小文字、「Cafe And Sweets」はスモールキャップスの大文字 |
| 背景色 | 「choco*choco」の背景色は#ffffff、「Cafe And Sweets」の背景色は#663300 |
| 上下左右のマージンとパディング | 画像を拡大して値をどうするか確認 |
これらのポイントに注意しながら作成したXHTMLとCSS
XHTML
<h1>choco*choco<span>Cafe And Sweets</span></h1>
CSS
h1 {
margin: 0;
padding: 0;
width: 310px;
height: 104px;
color: #663300;
font-size: 40px;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align: center;
}
h1 span {
margin: 5px auto 0;
display: block;
width: 300px;
line-height: 1.6;
color: #ffffff;
background-color: #663300;
font-size: 20px;
font-weight: normal;
font-variant: small-caps;
letter-spacing: 5px;
}
●希望の書体に近いフォントをあわせて指定する
font-familyプロパティでフォントの種類を指定する際は「Verdana」だけでなく比較的近いフォントを指定しておく。先に書いてあるフォントが優先的に適用され、もしもそのフォントがなければ次に書かれているフォントという順序で適用される。
「Verdana」に雰囲気が似たフォントとして、「Helvetica」はＭac OS Xの多くに、「Arial」はWindowsやMac OS Xの多くにインストールされているので、これらも指定しておく。いずれのフォントも入っていない環境のために総称ファミリー（ここではゴシック体を意味する「sans-serif」）を指定しておくことで、より多くの環境に対応させることができる。
h1 { font-family: Verdana, Helvetica, Arial, sans-serif; }
●文字の大きさを調整する
「choco*choco」は「Cafe And Sweets」に比べて文字が大きくなっている。フォントの大きさはfont-sizeプロパティで指定する。単位をピクセルで指定すれば大きさを忠実に再現できる。
なお、IE6以前では、単位がピクセルで指定されていると、文字サイズを変更してもフォントサイズが変わらないという問題がある。ロゴについてはこれでよしと考えるか、CSSハックでIEに対してのみ、「em」などの相対単位を適用する。
●文字の太さを調整する
「chocochoco」は「Cafe And Sweets」に比べて文字が太くなっている。文字の太さはfont-weightプロパティで指定。font-weightプロパティの値は「normal」「bold」「bolder」「lighter」「100～900」（100刻みの数値）が指定できる。ただし、現在普及しているブラウザでは「100～900」の数値で指定しても100から500は「normal」と同等に、600から900は「bold」と同等になるため、はじめから「normal」か「bold」を選ぶのが現実的。
「bold」を選んだ場合、そのフォントファミリーにbold用の書体が含まれている場合、その書体でレンダリングされる。たとえば、「ヒラギノ角ゴ Pro」ファミリーで表示されている要素に対し「font-weight: normal」と指定した場合は「ヒラギノ角ゴ Pro W6」で表示される。
ただし、ブラウザの種類やバージョンによって、この機能をサポートしていない場合がある。その場合は「normal」で表示される書体を単純に太らせたかたちで表示される。
●文字間隔を調整する
「Cafe And Sweets」の文字間隔を多少広めにするためにはletter-spacingプロパティを利用する。このロゴのように幅や高さを固定している場合にはピクセルで指定する。本文部分で文字の大きさに合わせて読みやすさを確保する目的で使う、letter-spacingプロパティには、ピクセルではなく「em」で指定し、文字サイズとのバランスをもとに間隔が設定されるようにする。
●スモールキャップスの設定
「Cafe And Sweets」単語の先頭が通常の大文字、他の文字は小さめの大文字となっている。このような表現を「スモールキャップス」といい、font-variantプロパティで「small-caps」と指定することで実現できる。
今日はここまで。
登録:
投稿 (Atom)