Our Challenge
By takai
こちらはウェブエントリーズが近将来のサービス化にむけてCSS3+HTML5の実験を行う場所です。
それぞれの実験がご覧になっているブラウザによっては正しい表示をしていない可能性もありますが
ご了承下さいませ。
ここでの実験(このブログのデザインや機能も含めて）がその即座にお客様のご要望にお応えするサービスになるわけではありません。
お客様に自信を持ってご提供できるまで検証を繰り返します。
現在お客様にご提供できるサービスにつきましてはオモテのページをご覧ください。
なにぶん、CSS3+HTML5についてはビギナーなので、
知識ある同業のWebデザイナーさん、プログラマさんからのご指摘やヒントなども歓迎いたします。
当ブログに連動するtwitter(@entrys_html5)、Facebookページにお寄せください。
By takai
平板でカクカクした、堅いページの印象にならないように、
見出しや章節の角を丸めるのはデザインの常套手段ですが、
画像で見出しを作るとしたら、Fireworksやらで角丸長方形を描いて、
場合によれば下の方をカットするとか、
章節の角丸となると、フタと底の部分をそれぞれカットして使うけど、
長方形の大きさで角丸の丸み具合っていうんですか、
結局目分量で調節して素材作らなあかんし、ことのほかメンドくさいですよね。
コーダーとしてはそんなデザインが回ってこないように密かに願ってたり。(-人-)
CSS3では、画像素材を作らずして角丸を描くことが可能になります。
章節の四隅を角丸にすることも可能です。
ブラウザごとの識別子（ベンダープレフィックス）もあり、たくさん記述しなければいけませんが、
ネット上でCSS3が自動で生成される便利サイトやFirefoxの拡張機能（CSS3 Properties)などをつかって効率的にソース作成すれば、こと角丸に関しては画像素材作ってCSSを書くよりは楽チンです。
さらにドロップシャドウも記述できます。
薄っぺらい画像素材作ってX軸やY軸方向にリピートさせる必要もない。
ましてや四隅角丸の章節にドロップシャドウで、左右外側の陰影具合と合わなくて苦戦するなんてこともありません。
/* 上部が角丸になった見出しを描く */
#sample_01 h2{
width: 350px;
padding: 10px;
background: #69F;
color: #FFFFFF;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
}
/* 章節の四隅が角丸 */
#sample_02{
width: 350px;
border-radius: 8px;
-webkit-border-radius: 8px;
border: solid 1px #555555;
behavior: url(PIE.htc9);
}
#sample_02 h2{
padding: 10px;
background: #555555;
color: #FFFFFF;
-webkit-border-top-right-radius: 6px; ← 内側の見出しは少し半径を小さく（border 1pxに対して-2px）
-webkit-border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
#sample_02 p{
padding: 10px;
}
#sample_03{
width: 350px;
border-radius: 8px;
-webkit-border-radius: 8px;
border: solid 1px #699;
-webkit-box-shadow: 1px 2px 2px 3px #CCCCCC;
-moz-box-shadow: 1px 2px 2px 3px #CCCCCC;
box-shadow: 1px 2px 2px 3px #CCCCCC;
}
/* 章節の四隅が角丸 かつドロップシャドウ */
#sample_03 h2{
padding: 10px;
background: #699;
color: #FFFFFF;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
behavior: url(PIE.htc9);
}
#sample_03 p{
padding: 10px;
}
By takai
CSS3ではこれまで1つしか使えなかった背景画像が複数重ねて使えるようになります。
ということで、すずめのアニメーションGIFを背景で繰り返したり、座標配置してみました。
url（画像）は一番上から順に、カンマで並べます。
#sample_01{
width: 300px;
height: 220px;
padding: 10px;
background-color: #6C9;
background-image: url(../images/suzume3.gif), url(../images/suzume2.gif), url(../images/suzume.gif);
background-repeat: no-repeat, repeat-x, no-repeat;
background-position: 40% 85%,50% 70%,40% 50%;
}
↓ これは現在、IE9～でしか、できません。
#sample_02{
width: 500px;
height: 250px;
padding: 10px;
background-color: #9C9;
background-image: url(../images/suzume3.gif), url(../images/suzume2.gif), url(../images/suzume.gif);
background-repeat: no-repeat;
background-position: 90px 80px,
left 120px bottom 40px,
right top;
}
By takai
■ 燃え上がるような
.sample1{
margin: 40px;
padding: 40px;
font-weight: bold;
font-size: 30px;
background: #000;
color: #FFFFFF;
text-shadow: 0 -2px 2px #FF6,
0 -4px 2px #FC3,
0 -6px 2px #C30;
}
■ 押し出したような
.sample2{
margin: 40px;
padding: 20px;
font-weight: bold;
font-size: 30px;
background: #CCC;
color: #E1E1E1;
text-shadow: -1px -1px 1px #555,
1px 1px 1px #FFF;
}
■ 枠が盛り上がったような
.sample3{
margin: 40px;
padding: 20px;
font-weight: bold;
font-size: 30px;
background: #FFF;
color: #FFF;
text-shadow: -1px -1px 0 #333,
1px 1px 0 #333;
}
■ 影だけ
.sample4{
margin: 40px;
padding: 20px;
font-weight: bold;
font-size: 30px;
background: #FFF;
color: transparent;
text-shadow: 0 0 2px #000;
}
By takai
■ 透かす
.sample1{
opacity: 0.65;
width: 300px;
background: #F99;
}
■ オンマウスで大きさ・角度を変える
.sample2 a img{
width: 300px;
padding: 13px 13px 26px 13px;
border: solid 1px #555555;
background-color: #FFF;
-webkit-box-shadow: 2px 2px 3px #CCCCCC;
-moz-box-shadow: 2px 2px 3px #CCCCCC;
box-shadow: 2px 2px 3px #CCCCCC;
-webkit-transform: rotate(10deg) scale(1.0);
-moz-transform: rotate(10deg) scale(1.0);
-o-transform: rotate(10deg) scale(1.0);
transform: rotate(10deg) scale(1.0);
}
.sample2 a:hover img,
.sample2 a:focus img,
.sample2 a:active img{
z-index: 999;
border: solid 1px #555555;
background-color: #FFF;
-webkit-box-shadow: 2px 2px 5px #999999;
-moz-box-shadow: 2px 2px 5px #999999;
box-shadow: 2px 2px 5px #999999;
-webkit-transform: rotate(-10deg) scale(2.0);
-moz-transform: rotate(-10deg) scale(2.0);
-o-transform: rotate(-10deg) scale(2.0);
transform: rotate(-10deg) scale(2.0);
}
■ Webフォントを使用する
@font-face{
font-family: ‘font01′;
src: url(mikiyu-crayon2.TTF);
}
.sample3 p{
font-family: ‘font01′;
font-size: 2.0em;
}
By takai
職場でopacity（不透明度）を使うことで、意見が衝突しました。
使用反対を唱えた僕の理由は「W3Cのバリデート・エラーになる」というものでした。
W3Cのバリデート・エラーになることは、SEOに影響があるんだ、
ひいてはサイトをお作りするクライアントさまに迷惑がかかる、
と短絡的にそう思っていました。
が、よくよく考えてみると、
HTMLのバージョンはDOCTYPEで宣言して、それがHTML4なのかXHTMLなのか、
Strictなのか、transitionalなのか宣言をしてからマークアップするので、
記述違反があるの無いの、という話になるのは当然だけれど、
CSSを記述するときにはエンコードの宣言はしても、
CSS2.1かCSS3なのか、宣言して書いたことがない。
宣言するように学んだこともないし、参考書にも見当たらない。
調べてみたら、CSSというものは
2.1基準で書いているか、3基準で書いているか、
書いてる当人の判断に委ねられているだけだったのです。
実際、W3CのCSS検証サービスも
検証前にバージョンの選択ができるようになっています。
CSSは1や2.1や3が個別に存在しているわけではなくて、
CSS2.1はCSS1の要素を含んでいて、
CSS3はさらにCSS1、CSS2.1それらすべてを包含している関係にあります。
ということはつまり、CSS3の要素で使いたいものがあれば、
自分はCSS3の基準でCSSを書いてるんだよと、
そういうことにしちゃえばいいだけのことなのです。
CSSのバリデートは自分が思っている基準でちゃんと書けているかどうか、
「自己採点」するツールなのです。
CSS3にはまだブラウザによってデザイン表現できないものもあるし、
最終勧告にいたって要素として残りうるかどうかわからないものが存在します。
そういった点からも基準なく好き勝手にではなく、
何かデザイン表現したいものがあって、
CSS3の要素で使えるものはないかと探しながらマークアップしていくことが
正しい技術習得する意味で大事なのかなと思います。
By takai
HTML5では、文中の省略名称に正式名を付与するようなこともできるようになる可能性もある。
それが検索対象になって、SEOがどうやこうやという話にならないとも限らない。
となると、今ウェブサイトの制作で原稿の文章の「流しこみ」などということでは事は済まなくなってしまいます。
相当周到なディレクションが必要になってくる。
ウェブの知識が無くたってなんとかなってた営業マンもそれでは通用しなくなります。
それに輪をかけて大変なのが、ブラウザごとバージョンごとに見栄えが異なるCSS3。
参考書の先生方は「より新しいブラウザを使う人ほど魅力的な体験をする」
みたいなことをおっしゃられていますが、
じゃあ、クライアントさまに見せるデザインカンプはどうしたらよいのでしょうか？
クライアントさまがお使いのブラウザに合わせて、デザインをおこせばよいのでしょうか。
「あのブラウザとこのブラウザと見栄えが違う。なんとかせえや。」
と言うてこられるクライアントさまに、Web屋のゴタク並べて、分かってもらえる話でしょうか。
職場で働く私たちがこれまでのようになんとなくやってこれたことは、そういうわけにはきっといかなくなるのは必定です。
tableレイアウトからCSSレイアウトへの転換は、SEOへの意識によるものでしたが、
HTML5+CSS3への転換は、職場や業界の有り様を問われるものにさえなりそうです。
By takai
言うまでもなく、グローバルナビゲーションやサイドナビゲーションに当たる部分を囲うタグです。
<nav>タグも<section>タグの進化系です。
リストで書いて、CSSでボタン化するのが慣例になっていますが、
それはウェブサイトのディレクトリ（階層構造）を表現するのにリストが適当だというだけで、
べつにリンクをもっている見出しやテキストの体裁であってもかまいません。
<nav>タグの中で<section>タグが使えます。
By takai
HTML5から<article>タグが登場します。
<article>タグはストーリーが起承転結、ひとまとまりになっているsectionだと考えます。
使命をもっているsectionです。
ブログの記事も話が一話完結していれば、<article>タグで囲うに値します。
でも、どうひとまとまりにするかの基準があるわけではありません。
たとえば「会社案内」のページをつくるとします。
「会社概要」の部分は<article>タグで囲うに値しますし、「沿革」も<article>タグで囲うに値します。
それらみんなまとめて「会社案内」も<article>タグで囲うに値します。
articleのなかにarticleがあるのは問題はありません。
総合的に考えると、少なくともHTMLでは、これまでメインコンテンツを囲っていたdivを、
<article>タグにするのがいいでしょう。
またsectionタグの中にarticleタグがあるのは正しくなく、あくまでarticleが上位、
articleの中にsectionがあるべきでしょう。
By takai
ヘッダーとフッターはHTML構築経験者なら、直感的に
ページの一番上と一番下に配するものだと理解されていると思いますが、
HTML5においては、それはそれで間違いではないのですが、
sectionごとにそれぞれ1つずつ置けるようになったのです。
たとえば、ブログの1つの投稿ですが、こんな感じ、よくありますよね。
投稿の末端に投稿日やカテゴリー、投稿者などの情報が必ずお約束事で表示されます。
これはまさに投稿のfooterですよね。
ということで、この1投稿をsectionと想定すれば、こうなります。
sectionには必ずheader、footerがワンセットである必要はありません。
この状態をあえて言うなら、「headerが省略されている」状態なのです。
もしこの投稿の文頭にお約束事の表示があるなら、このようになります。
headerタグ、footerタグは、sectionタグの進化系と考えましょう。
ただし、sectionタグのように自由には使えず、
headerタグはページや章節の先頭を、footerタグは末端で使うという
「使命のあるsectionタグ」だと考えましょう。
ですから、headerタグ、footerタグの中でsectionタグを使うことができます。
しかし、headerタグの中にheaderタグやfooterタグ、
footerタグの中にheaderタグやfooterタグを使用してはいけません。
ページそのもののheaderタグ、footerタグについては、
id=”GlobalHeader”やid=”page_footer”というようなidをつけて
コンテンツ内の他のheaderタグ、footerタグとは区別するとよいでしょう。
ここまでくるとお気づきかと思いますが、bodyタグも一番大きいsectionタグということになりますね。
ちなみに、このようなbodyやsecteionによる包含関係（階層関係）を組み立てることを
「セクショニング」や「アウトラインの作成」といいます。
By takai
デザインのクオリティはともかくとして、
コーダーの僕らがページデザインを起したほうが、制作は早いですよね。
それは自分が記述するCSSを想定しながらデザインするからです。
ときどき代理店さまやクライアントさまから、
「デザインはウチのもんにさせるから」
って話をいただくことがたまにあります。
いわゆる、ほんまもんのデザイナーさんの力作だったりするのですが、
CSSなんてご存じないから、その出来栄えに感動する以前に、
コブシを固めて、必死に思いを鎮めるようなことがよくあります。
最初のページデザインが次のような感じだったから、
こんなふうに見出し(hタグ)の順位を割りつけて、
コーディング開始。
次に他の内部部分のページのデザインが届いて、見てみると・・・
おい！
h2があらへんやないけ！
なんて体験していませんか？
ほんま、どうしてくれるんやって感じですよね。
この問題を回避するために、このページ専用のCSSを記述するか、
デザイナーさんにお願いして修正していただくか、上位の見出しを挿し込んでいただくかで、
対処するしかありませんよね。
しかし、
こういう問題は欧米でもよくあるのでしょうか。
じつはHTML5の<section>タグの中では驚くなかれ、
外側の<section>とは無関係に見出し(hタグ)を定義してかまわなくなったのです。
なんと<section>タグのなかで独自にh1から見出しを置いてもよいのです。
これは正直助かりますよね～o(^-^)o
でも、だからといって、やっぱり自由にするんじゃなくて、
基本的にはこれまでどおり、一番親になる<section>タグの中で
見出しの順位はつけていく規則はまもるべきだと思います。