久しぶりの更新です。徐々に更新頻度が落ちてきてしまいました。
近況を言いますと、いくつかの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」でもよい）ことを考えると、さまざまな記述方法が混在してしますリスクがある。メンテナンス性が低下しないように、制作チーム内でセレクタの記述方法についてルール化し、共有しておくことが大切。
今日はここまで。
0 件のコメント:
コメントを投稿