久しぶりの更新です。徐々に更新頻度が落ちてきてしまいました。
近況を言いますと、いくつかの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による幅指定などに問題がある）と考えることができる。
今日はここまで。
登録:
投稿 (Atom)