見直されるCleafix

私がはじめてClearfixを知ったのは大学3年生のときでした。
Web系の雑誌（CreatorかDesigningか忘れましたが）を読んだのがきっかけだったのですが、
そのときの驚きは本当に大きかったように思います。
（ちなみにそれまではずっと空divを使っていました。汗）

それからこの仕事に就いて、他の人のソースを見てoverflow:hiddenを使ってフロートを解除する方法を知りました。

一時期、overflow:hiddenを案件で使ったこともありますし、
clearfixクラスを使わず、フロートを解除したいセレクタを複数指定し、それぞれにclearfixをかける方法もしました。

ですが今は結局、floatをクリアしたい要素に個別にclearfixクラスをつけるように、自分の中ではしています。

前置きが長くなりましたが、なぜそこに行き着いたのか、記事を元にご説明します。

---

Saying Goodbye to the overflow: hidden Clearing Hack
http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

簡単に記事の内容を書きますと、（原文の訳ではなく、私の解釈です）
---
まず、「Clearfix」にもうちょっと意味的な名前をつけたらどうか、という提案です。
「Handcrafted CSS」という本でそのような内容が書かれていたことを紹介しています。
（この本、あまりに面白そうだったので注文してしまいました。
円高の魅力に負けAmazon.comで注文したのでShippingにめちゃめちゃ時間かかりそうですが・・・）

そして、一番の理由になるのは、CSS3の新プロパティ、「box-shadow」でしょう。
box-shadowは、ボックスにドロップシャドウのような効果をつけるものなのですが、
それが、overflow:hiddenを使用していると切れてしまうのだそうです。
---

将来的には、display:box;でレイアウトをするようになると思いますので、
floatの解除にoverflow:hiddenは使わなくなるかもしれません。

ただ、CSS3はIE9からしか本格対応されないわけですし、
『プログレッシブ・エンハンスメント』とはいえ、
ボックスが角丸にならないことや、シャドウがないくらいなら許されますが、
さすがにレイアウト崩れは見逃しがたいなぁとは感じています。

だからしばらく、floatを使ったレイアウトはなくならないでしょうし、
それゆえにoverflow:hiddenもまだまだ使いどころがあると感じています。
ですから、box-shadowを使う際は注意したいですね。

---

私は以前、『無駄なIDやクラスをつけない派』だったのですが、
やはり実案件をやってみて、
『ソースを再利用する、マークアップの例外に備える』ことも大切だということに気づき、
もっぱらクラス付与派です。
（ただ、デフォルトのpタグにまでクラスをつけるのはやりたくないですが・・・）

案件によっては、CSSを調整することが難しく、HTMLだけで何とかしてくれといわれることもあり、
Clearfixに限ったことではないですが、その際やっぱりクラス付与型にしておくとメンテナンスが楽なんです。


・・・自分もだいぶ変わったなぁ・・・・・・（遠い目）


新しい技術が出ることによって、今までのマークアップもコーディングもだいぶ変わっていくでしょうね。
というより、自分のやり方、古いやり方を再考するきっかけにしなければと思いました。

---

記事を書くきっかけをいただいたサイト

clearfixハックは本当に必要なのか：
http://blog.till-daylight.org/archives/167-clearfix.html

Saying Goodbye to the overflow: hidden Clearing Hack：
http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

【おまけ】短いClearfixはじめました。
A new micro clearfix hack：
http://nicolasgallagher.com/micro-clearfix-hack/

いい感じでJQueryを利用しているサイト：トヨタ自動車株式会社

またまた久しぶりの更新に；；

と思っていたけどひと月経っていませんでしたね。
4月～5末にかけて絶望的な案件がひたすら続いていたのですが、、、
ようやく終わりが見えてきたところです。

6月からは新卒さんが入ってくる予定なので、教育係になれたらいいなー。
人に何かを伝える、教えるということにとても興味があるので、できればかかわりたい分野です。



また前置きが長くなりましたが、、、
先日、職場のチームリーダーからトヨタ自動車（本社）のサイトがいい感じだと教えてもらったので分析してみました。

---

トヨタ自動車株式会社　公式企業サイト

http://www.toyota.co.jp/

JQueryがいい感じで利用されているサイトです。

プラグイン解説：

sweetPages jQuery plugin

ページ内の「おすすめコンテンツ」ページネーションに使用しています。
上記のデモページにはない「戻る」「進む」ボタンと、Lightboxによるコンテンツ全表示の機能を加えていますね。

元のJSを解析する時間がなかったので、
「戻る」「進む」機能を付与できるスクリプトを記載してくださっているサイトを掲載しておきます。

Make jQuery button for Sweetpages（英語）
とりあえず、ページ内に張ってあるスクリプトをJSに入れ込めば動いてくれる模様。
あとはCSSなどの調整ですね。

ついでに、試しに実装してみたデモURLも乗せておきますね。
http://www.granshe.com/ex/jsdemo01/

FancyBox

ライトボックス部分にはFancyBoxを使用。

グローバルナビゲーションの「クルマ情報」「テクノロジー」などをクリックすると、フキダシ形式でリンクバナーが表示されます。
フキダシの画像がメニューごとに変化している箇所は、Lightbox側で出し分けているわけではなく、
コンテンツはインラインに記述しておき、クリック時に表示されるように指定しているようです。

DD_belatedPNG_0.0.8a.js

IEで透過PNGを表示させるためのスクリプト。
Conditional Comments（条件付コメント）を用いてIE6のみに読み込ませています。

<meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1">

今さらかもしれませんが、「Google Chrome Frame」というテクノロジーを駆使して、IEでChromeと同じエンジンを使用できるようにする記載のようです。
（今回はじめて知りました・・・）

「Google Chrome Frame」とは、
オープンソースのプラグインで、Chromeのオープンウェブ技術とJSエンジンをIEに搭載できるようになるもの。
・IEが対応していないHTML5のCanvas機能などに対応できる。
・JSのパフォーマンスがあがって使用感が早くなる。
だとか（ざっと訳したので間違いあればご指摘ください）。

※本家版（英語）は下記です。
http://code.google.com/intl/ja/chrome/chromeframe/

ちなみに、ユーザが「Google Chrome Frame」をインストールしていなければ、上記のmetaを入れても特に何も起きません。

---

リーダーによると、各ボタン画像がいちいち大きいのは、
スマートフォンで見る際にも押しやすいように配慮されているのでは。とのことでした。

案件がぐだぐだで新しい技術を調べることもほとんどできなかったので、
こうやってサイトを分析すると勉強になることが多いです。


ただ唯一の欠点は、JSを切ると何も表示されなくなるところでしょうか・・・。
SSIのようにJSを用いている部分もありますし、
JSOFFの環境で表示が崩れるくらいなら、何も表示させないほうが良いのでは、という判断でしょうか。

最近役立ったフォーム関連のJS

また久しぶりになってしまいました。

仕事で忙しくてなかなか更新ができませんでした。
と言い訳してみます。

ですが、このまま会社に飼い殺されているわけにはいかないので、
時間を見つけて、ちょっとでも更新頻度を上げていけたらと思っています。


今回は最近仕事で大変役に立ったJSプラグインをご紹介。

１．プルダウンによる別プルダウンの制御

複数の選択式プルダウンというか、連動プルダウンというか、
Aを選択したとき、別のプルダウンではCとDが選択できるようになる。
Bを選択すると、別のプルダウンではEとFが選択できるようになる、
というように、プルダウンの選択によって別プルダウンのoptionを制御するJSを見つけました。

Select系はJSで制御するのが難しく困っていたので、見つかって助かりました。
場所はこちら。

URL：
http://www.ajaxray.com/blog/2007/11/08/jquery-controlled-dependent-or-cascading-select-list-2/

JQuery用のデモ：
http://www.ajaxray.com/Examples/depend-1.3.x.html

詳しい使い方は今度追記。
ブラウザによって若干の挙動の差異があるため、完全に表示が一緒になってほしい場合はおススメしません。

２．フリガナ自動入力JS

文字を入力すると自動的にフリガナが生成されるようにしてほしい。
と要望があったときにいろいろ検索してみたのですが、JQueryベースのものがなく困っていたところで発見。

URL：
http://mashimonator.weblike.jp/blog/2009/10/js-14.html

デモ：
http://mashimonator.weblike.jp/experiment/js/kanaTextExtension/sample.html

ライセンス（コメント欄の文章を引用させていただきました）：
本サイトで公開しているライブラリは基本的には無償で自由に使用してかまいません。
なるべくソースコード内に記載してある制作者名は残して頂きたいです。
また、バグ等ありましたらご指摘頂けるとあり難いです。

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５使用タグフローチャートのメモでした。