CSS3を試してみる gradient border-radius transform box-shadow

気づいたらまた広告が出ていました・・・。（3ヶ月無更新）

仕事が忙しいというのもひとつの理由ですが、
休日にWeb関係の勉強をしなくなったのが大きいです。
この仕事や、HTMLやCSSに情熱がなくなったわけではないのですが、
今、それ以上に情熱を傾けたいものがあるためなかなか難しいです・・・。

昼休みに効率的に情報を仕入れるようにしなければ・・・。と思ってます。

で、
今回は、CSS3を試してみるその２をお送りします。

デモのURLは下記です。
http://www.granshe.com/css3/110103/

今回は
・translate
・gradient
・border-radius
・box-shadow
を利用してみました。

青の矢印リンクアイコンは画像ですが、それ以外は画像は使用せず、CSSのみで実装しています。

---

解説

グローバルナビゲーション：

gradientで今風？のボタンを実装してみました。

メインビジュアル部分：

transformプロパティを実装してみました。
firefoxだと不完全ですが、webkit系だと動くと思います。

個人的にはrotateが楽しくて気に入っています。
translateはロールオーバーの挙動でうまく使えそうだなと思いました。
floatやpositionと併用したときに、どのような挙動をするのか要確認ですね。

メインコンテンツ部分：

2カラムレイアウトはfloatを使わずに実装しています。
display: box;　プロパティです。
ブラウザによって若干挙動が異なるので、
個人的にはしばらくはfloatのお世話になるかなぁという感想です。

フッター付近のボタン：

border-radiusとbox-shadowを使ってちょっとリアルボタンを作ってみました。
「角丸にならない」「影がつかない」くらいの挙動なら、
サイトを使用する際の問題にはならないと思うのですぐ使えそうですね！

---

所感

CSS3に関して、IEは9から対応予定とのことですから、完全実装はまだまだ先になりそうですし、
サイトのレイアウトにかかわるプロパティはなかなか利用するのが難しいかもしれませんが、
「なくても支障をきたさない」、ワンポイントの使用であればそろそろこっそり始めてしまっても良いのでは？
と思いました。

---

特にtransformプロパティのデモを作成するにあたり、
どなたかのサイトを参考にさせていただいたのですが、
ブックマークを忘れた挙句履歴が残っておらず掲載できませんでした・・・。

この場を借りてお詫び・御礼申し上げます。

HTML5で、使用するタグを選ぶためのフローチャート

数ヶ月ぶりになってしまいました･･･。
（と、毎回書いている気が）

最近Web制作とは別の趣味に注力してしまい、勉強がおろそかになりがちです・・・。
よく、仕事とは別の趣味を持って、週末はリフレッシュ！などということが聞かれますが、
私は向いていないみたいです･･･。

・土日に仕事が入ると、好きなことができない！と若干ストレス
・好きなことが仕事中に気になりだすと、仕事中ももやもや

このあたりの切り替えができるようになれば、もう少しうまくいくんだろうな。

ということで、前置きが長くなりましたが。

あんまり記事数は無いのですが、HTML5で検索していただいてアクセスしていただいている方が多いので、
今回は、『HTML5で、使用するタグを選ぶためのフローチャート』をご紹介します。（もう有名かもしれませんが。）

▽こちらのPDFから引用させていただきました。
Methods to Select an HTML5 Element

コンテンツについて質問に答えていくと、どのタグでマークアップすればよいのかわかる仕組みになっています。

１．それは、サイト・ページのメインのナビゲーションでしょうか？

⇒そうであれば、<nav>でマークアップ。
判断基準としては、そのサイト・ページで『ナビゲーションをスキップする』を使用するナビゲーションである。と書かれています。

↓そうでない場合

２．それは、それ自身単独で意味をなすものですか？

例）RSSフィード
⇒そうであれば、<article>でマークアップ。
ニュースの記事やブログ記事、記事へのコメント、サイドバーなど、見出しを伴うもの。とあります。

↓そうでない場合

３．それは、コンテンツを理解するために必須のものですか？

⇒そうでない場合、<aside>でマークアップ。
関連ページへのリンクや、注釈、広告など、コンテンツを読み解くのに『必須』ではない補足的なもの。

↓『コンテンツを理解するために必須のもの』の場合

４．それは、付録に移動することができますか？（直訳）

（おそらく、そのコンテンツを補足として、別添えとして、ページから移動させても問題ないか、ということかと･･･。自信は無いですが。）
⇒そうであれば、<figure>でマークアップ。
画像や図版、またはそれらのキャプション。サンプルコードなどはこれでマークアップ。
なお、ほかの要素はsectioning content（コンテンツを意味的に区切るための要素）という扱いですが、
このfigureに関しては、そうではありません。

↓そうではない場合

５．論理的に見出しを付けることができるか。

⇒そうであれば、<section>でマークアップ。
ページの章、もしくは<article>の中の章・節、など見出しを伴うものに対して、sectionを使用します。

↓そうではない場合

６．それは何らかの『意味』をもつか？

⇒そうであれば、p（段落）やblockquote（引用文）など、その『意味』にふさわしい何らかのタグでマークアップ。

⇒そうではない場合、<div>でマークアップ。
『意味』を持たないもの、CSSでデザインを実装するためのものはdivでマークアップ。
（たとえば、CSSで角丸ボックスを実装するための囲みdivなど。）

だそうです。

それにしてもこのサイト、ものすごくわかりやすく解説してありますね。
今度じっくり読んでみたいです。

なお、毎度のことで恐縮ですが、筆者は英語力がそれほど高くありません。
本家の情報が正しい情報です。

数箇所意訳している部分もあり、私の文章を読んで「間違っている！」と本家の方に抗議しないでください。
（私にはいくらでも翻訳ミスをご指摘ください。大変助かります。）

以上、HTML５使用タグフローチャートのメモでした。

jRailsのデモサイト

いろいろあって久しぶりにjRailsを使おうと思って、本家ページにアクセスしたら、デモページがなくなってました。
調べてみると、前から噂になっていたみたいですね･･･。

昔よく言ってた近所の駄菓子屋さんがなくなってしまったような感じでした（笑）。
別に他の場所でもコードは拾えるんですが、あのデモページが好きだったので、残念でした。

なので、気休めですがjRailsで使えるエフェクトだけでも復活させようと思ってデモを作ってみました。
jRails demo (not official)

※念のため、著作権は私ではなくスクリプトを書いた方にあります。

スクロールで背景画像が消えるバグ

背景画像が入り組んでいるサイトでよく出くわすのが、

• 縦スクロールすると背景画像が消える（主にIE）
• ウィンドウサイズをWebサイトの最小幅より狭くし、横スクロールバーが出た状態でて横スクロールすると、背景画像が消える

こと。
そしてそれを、「ブラウザの仕様だから仕方ないんだよね」と聞いた。

そんなに難しいことじゃないのでは？と思っていたのでメモしておく。

１．縦スクロールで背景が消える

たいてい、フッターに背景画像を指定し、かつposition系のプロパティを指定しているときに起こる。

２．横スクロールで背景が消える

メインコンテンツに固定幅、その外のコンテナボックスに背景画像を指定し、
メインコンテンツよりもブラウザウィンドウの幅を狭くし、横スクロールバーを動かすと発生することが多いです。

両者とも、背景画像を指定しているボックスに幅や高さを指定することで直ります。
場合によっては、min-width系やheight:1%レベルでも直るかもしれません。

わたしはいまだに、zoomよりもheight1%でIE対策をすることが多く、、、
他のバグを併発することもあって、使いにくいとは分かっているのですが、
個人的にあんまりzoomが好きではないのですよ･･･。ハックと同じくらいのレベルですが。

今さらの話題ですが、jQueryでCSS3セレクタ系の指定ができるようになったんですね。
ほんと、CSSをいじる人間には便利なライブラリです、jQuery。

ブラウザのCSSの読み方

会社で聞いた豆知識をメモ。

その人によると、
ブラウザというものは、CSSを子セレクタから順番に読んでレンダリングしていくというのです。

たとえば、

ul#list li a{
sss:xxx;
}

という記述があったとします。

通常の、JS系の解釈から考えると、

1. まず、#listのulを探し、
2. その中のliを探し、
3. aを探し、
4. aに対してプロパティを指定する

という流れだと思います。


でも、ブラウザのレンダリングはそうではなくて、

1. まずaを探し、
2. 親にliを持つaに絞り、
3. さらに親にul#listを持つものに絞り
4. 絞ったものにプロパティを指定する

流れだそうなのです。


だから、ブラウザのレンダリング速度を向上したければ、
子要素にID（やクラス）を指定するのが効果的なのだそうです。
（もちろん、ソースがきれいか汚いかという問題は除いて。）


どうも、コーダーの視点からすると、マークアップをキレイにする方法ばかりに目がいってしまいがちなのですが、
『お客さんの更新しやすさ』
『ユーザーの訪れやすさ、快適さ』

もきちんと考えてマークアップしていかないとなと思ったのでした。