またまたまたまたtsutomukunでございます。
今回もよろしくお願いいたします。

前回に引き続き今回もhtmlネタなのですが、display:inline-blockというものを
探っていきたいと思います。
コーディングしているときに、よくdisplay：blocckを使うことがあると思いますが、
それはinline要素をblock要素にするもので、今回のdisplay:inline-blockも同じ感じで
inline要素やblock要素をinline-block要素にするというものです。
それでは、inline-block要素とはなんぞやという話になりますが、
「inline要素でもあり、block要素でもある」ということなのです。
はい。意味分かりませんよね・・・

ということでサンプルを作ってみました。
（先に言っておきますが、このdisplay:inline-blockはIEでは対応しておりません。
ですのでIEで見られている方はFirefoxでご覧いただけたらと思います。）

さてさて、サンプルをご覧いただけたらお分かりの通り、なんかfloatがかかったような
レイアウトになっていますよね。でも、よく見てください。floatがかかったように見えていますが、
中央寄せになっていますよね。文字サイズを大きくしていってもらえれば、
段落ちして分かりやすいと思います。
この世にfloat：centerなるものがあれば可能ですが、現時点では無理ですものね。

ソースを見てもらえれば分かると思いますが、もちろんfloatを使っておりません。
これがinline-block要素なのです。
「inline要素のように間割り込みが効くblock要素」というわけです。
中央寄せに回り込ませれることができるのでIEが対応してくれたら
何か面白そうなことができないかなーと思いました。

またまたやってまいりました。ｔｓｕｔｏｍｕｋｕｎでございます。

今回はhtmlのタグで遊んでみようと思います。
先に言っておきますがあくまで「お遊び」ですので実用的なものは一切ございません。
あしからず。

【文字と下線の色違いリンク】
以前にコーディング作業中にたまたま文字と下線が色違いになったので
それを利用して作ってみました。
内容は簡単で、下線の色をaとa:hoverで設定してやって
文字の色を<strong>や<span>などで設定してやります。
初めの文字はfirst-letterで色づけしてやってます。
とてもカラフルなリンクテキストのできあがり♪

【リンクできないリンク】
リンクを飛ばさないという意味ではないです。リンクテキストにマウスを持っていっても
リンクの場所が動いてページに飛べないというものです。
が・・・・なんだかうまくいきませんでした。本当ならカーソルをあわせたら
別の場所でピタッと止まっていてほしかったのですが
ブルブル震えてうまくいきませんでした・・・要検討でございます。

【下線がブルブル】
こちらはご覧の通り下線がブルブル動いております。
仕掛けは簡単で、gifアニメを引いているだけなんですが
ただ引いているだけだと文字サイズを変更されたら表示されなくなっちゃうので
そうはならないようにしています。どうなっているかはソースをご覧あれ。

【背景チェンジ】
これは、カーソルを合わすと背景の色が変わっちゃうというものですが、
うまくいかなくて皆に手伝ってもらって（完全にお任せして）作ってもらいました。
三人（5人ですが）寄れば文殊の知恵とはよくいったものです。

こんな感じでaタグの可能性を探って遊んで見ましたがいかがだったでしょうか？
もっとなにか面白いテクニックがあればぜひぜひお教えいただきたいです。

さてさて、第二回目のテーマは「JTたばこwebサイト」でございます。

つい最近コンビニでHOPEというタバコを見かけたのですが、
そのすばらしいパッケージデザインに魅せられれまして
「そういや、タバコのサイトって見たことねぇな」と思いついたのが事の発端でございます。
さっそくサイトを見てやろうと検索かけてやったのです・・・・が！！！！
見当たりません。どこにも見当たりません。あれれ？あれ？？

いろいろ調べてみますと、なんとJTからIDとパスワードを発行してもらわないと
サイトには行けないではありませんか！！
しかし！あのHOPEのデザインに心打たれた私は、IDとパスワードを取得するべく動き出しました。
規約に同意し、プロフィールを登録し、成人喫煙者宣誓をするために「私は成人喫煙者です」と録音し、
つ、ついに手に入れました！
これだけ見に行くのも大変なサイトもなかなか珍しいなと思いながら、念願のHOPEのサイトを見に行きました。

か、かっこいい！これだけ見に来る人が限られているのに、ものすごくクオリティが高い！
興奮冷めやらぬまま他のタバコサイトも見てみると・・・ほ、ほかもすげぇぇ！！！

許されたものだけが見に行けるタバコのサイト、ぜひ成人喫煙者の皆様はご覧になってはいかがでしょうか。

今回から始まりました「ohayouthanks」！
第一回目は「KAI Touch Project!」を検証してみました。

刃物などで有名な貝印さんが創業100周年を機に立ち上げたプロジェクトだそうで、
コチラのサイトはお題に合わせてブログを書くと担当者の方がコメントに来てくれるそうです。

で、まず僕が目に入ったのは、そのレイアウト！
なんと、横レイアウトで右から左に見ていくものです。
そして文章が縦書きだったので、そのテキストの配置が気になりました。
何が気になったかっていうと「もしかしてCSSで実現してるんじゃね？」ってことです。
早速、どうなってるか調べてみると、どうやらCSSではなくjQueryを使用しているみたいでした。
しかしながら、単純に縦書きとはいえども「。」や「、」など普通に縦に配置してしまうと
左に寄っちゃっておかしく見えてしまうので、そういうものは画像で表現するなど細かな配慮がされていました。

そして次に気になったのはというと、「そもそもなんで横レイアウトなんだ？」ということです。
そこの部分は想像を膨らませるしかないのですが、メンバーのみんなにいろいろ検討してもらいまして、

• 100周年の歴史を表現するために巻物のように見せたいから
• 製品が刃物という伝統工芸という観点から
• 横のつながりを大切にしたいという表現から
• パンダがハイタッチするしぐさを表現したいから（最初にパンダのイラストありきの考え）

などの意見が出てきました。

ほかに何か考えついたいた方がいらっしゃいましたら、ご意見いただきたいものです。

それにしてもこの「KAI Touch Project!」は色々なところに興味を惹かれます。
技術的な部分や、デザイン的な部分もさることながら、
担当者の方がブログにコメントを書きに来てくれるなんて、人の温かみがあって、なんだかとっても素敵じゃないですか。