ウェブページのデザイン事情 -167ページ目

HTML5のタグ(6)

今まではPhotoshopのフォルターで行っていたテキストのドロップシャドーがCSS3で可能になった。これもデザイナにとっては有り難いこと。<style type="text/css">.shadow1{font -family:"Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";font-size:14px;color:#780a0a;text-shadow:2px 2px 2px #8e6c6c;}</style>とヘッダー内に書いておき、該当するテキストのところは<p class="shadow1">この文字にドロップシャドー</p>となる。2px 2px 2px #8e6c6cのところがX軸オフセット、Y軸オフセット、ぼかしの範囲、色、という順になる。Photoshopのレイヤー効果のドロップシャドーの設定をそのまま移植した感じだ。ただし角度という概念はなく、Y軸とX軸だけの設定だ。Photoshopの場合は1つの画像ファイル内で複数のドロップシャドーやベベルとエンボス、シャドーなど、全ての光の方向を統一するために角度という設定が必要になったわけだで、これはデザインの基本。従ってCSS3でドロップシャドーを設定する場合でもY軸とX軸の比率は同じサイト内で統一することが望ましい。

ウェブページのデザイン事情
ウェブデザイナの苦言

選択肢

auのis06の場合、使えるメーラは4種類。Eメール、Cメール、PCメール、Gmailだ。Cメールは置いておいて、残る3種類のうちどれを使うかは悩みどころ。Eメールはスパムが多く、フィルタを強化するとPCからの転送メールが受けられなくなるので実際にはかなり使いづらい。Gmailは基本設定がGmailのサーバを利用するため、時間帯によっては遅延することがある。転送元のメールサーバを使えばいいのだが、こちらはサーバによって設定できない場合もある。PCメールはGmailと同様に他のメールサーバから情報を持ってきて動かすわけだが、問題は一括削除ができないため、溜まったメールを1件ずつ消すのが面倒。GmailはPCで一括削除できるので、とりあえずはGmailがいちばん問題が無さそうである。どっちにしろ選択肢が多いのは困る。一通り使ってみないと分からないからだ。1つしかなければ、なんだかんだと文句を言いつつも、それを使うしかないから悩む必要がない。

ウェブページのデザイン事情
ウェブデザイナの苦言

HTML5のタグ(5)

CSS3の新機能は膨大だが、その中でも入力フォームのデザインにバリエーションが増えたことはデザイナにとっては朗報だろう。今まではファンシーで可愛いデザインで統一したいと思っても入力窓だけは角がとんがった四角になってしまい、なかなか馴染まなかった。しかしCSS3からはborder-radiusでコーナーRを指定できるようになった。<style type="text/css">input[type="text"]{border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border:1px solid blue;</style>という具合だ。-moz-はMozilla用、-webkit-はスマートフォン用ということになるだろう。

ウェブページのデザイン事情
ウェブデザイナの苦言