普通のFollow Meじゃつまらないので

息抜きでcss3を使ってアニメーションするFollowMe作りました。
サンプル…といいたいところですが、このページの右側にあります。
マウスオーバーしてみれば動きがわかるかと思います。

対応ブラウザ

一応色々なブラウザで動きますが以下の順番でいい感じの動きになります。

1. Chrome４→縦表示、回転、ズーム、アルファが効きます
2. Safari4→縦表示、回転、ズーム、アルファが効きます（ちょっとぼやける）
3. Firefox3.5→縦表示、回転、ズーム、アルファが効きます
4. その他→かろうじて表示されます

html5で書いていたのですが、どこぞのブラウザさんで表示出来ないので泣く泣くhtml4に切り替えました。
どのブラウザとは言いません。9でもダメなIEあの子です。

それでもこのFollow Meを使ってみたい場合は続きから。

まず初めに。

ご自由に使って頂いて構いませんが、htmlの?の部分、cssのコメント部分は残して置いて頂けると幸せです。
カスタマイズできる部分は以下の箇所になります。

1. ラベルのボーダー、背景色、グラデーション
2. FollowMeの文字色
3. ?の文字色・背景色

といった部分が調整が可能となっています。
cssに詳しい方はソースをちょくちょくいじってもいいかもしれませんね。

コピペ用のソース

下のソースを</body>の直前に明記するだけで実装が可能です。
色設定と、自分のアカウントへのURLの変更（http://twitter.com/kzmsの部分）をお忘れなく。
変えたほうがいい部分は赤色で指定してあります。

<div id="kzms2twitter"><span><a href="http://kzms2.com/2009/12/02/followme_css3/" title="このFollow Meについて" id="kzms2twitis">?</a><a href="http://twitter.com/kzms2">Follow Me</a></span></div>
<style type="text/css">
/* 色のカスタマイズ
**********************/
/* ラベルの色設定 */
#kzms2twitter span{
/* グラデーション非対応の背景色設定 */
background-color:#0f58aa !important;
/* グラデーション背景色設定 */
background-image:-webkit-gradient(
linear,
left top,
left bottom,
/* 開始色 */
from(#083a73),
/* 終了色 */
to(#0f58aa)
) !important;
/* 枠線色設定 */
border-color:#083a73 !important;
}
/* Follow Meの設定 */
#kzms2twitter span a{
/* 文字色設定 */
color:#fff !important;
}
/* ?の設定 */
#kzms2twitter #kzms2twitis{
/* 文字色設定 */
color:#0f58aa !important;
/* 背景色設定 */
background-color:#fff !important;
}
/*
* date 09/12/01
* var 0.01
* kzms2 All Rights Reserved.
******************************/
/* base setting
=================*/
#kzms2twitter{
position:fixed;
_position:absolute;
top:50%;
right:0;
z-index:99999;
margin-top:-6.5em;
*margin-top:-1em;
font-size:12px;
}
#kzms2twitter span a{
text-decoration:none;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-webkit-transform-origin:0 50%;
-moz-transform-origin:0 50%;
}
#kzms2twitter span a:hover{
text-decoration:underline;
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
}
#kzms2twitter span{
display:block;
padding:0.5em 1em 0.5em 0.5em;
border-style:solid;
border-width:1px;
font-weight:bold;
text-decoration:none;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:0;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-webkit-box-shadow:2px 2px 7px #333;
-moz-box-shadow:2px 2px 7px #333;
}
#kzms2twitter span:hover{
margin-top:2em;
*margin-top:0;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:0;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:scale(2);
-moz-transform:scale(2);
}
/* about kzms2
=================*/
#kzms2twitter #kzms2twitis{
position:absolute;
bottom:0;
right:0;
width:1em;
text-align:center;
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter:"alpha(opacity=50)";
font-size:80%;
-moz-border-radius:5px 0 0 0;
-webkit-border-top-left-radius:5px;
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
}
#kzms2twitter #kzms2twitis:hover{
opacity:1;
filter:alpha(opacity=100);
-ms-filter:"alpha(opacity=100)";
-webkit-transform:scale(2);
-moz-transform:scale(2);
text-decoration:none;
}
/* follow me setting
=================*/
#kzms2twitter span a:nth-of-type(1):hover + a{
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter:"alpha(opacity=50)";
}
#kzms2twitter span a{
display:inline-block;
}
</style>
cssの上部は、カスタマイズ用の部分が抜き出してあります。

その他

htmlに詳しい人は、styleタグの中身を外部ファイルにするなどして各自修正を加えてしまってください。このままだとhtmlが穢れてしまうので…！

使った方でご意見やご感想などお待ちしておりますっ

はー　久々に息抜きになったなった。
こういうやつの方がやりやすいですね。

リニューアルしますた。

Safari4だとキャプチャのように見えるはずです。
古いブラウザやCSS3に対応していないブラウザはものすごい表示になります。
IEで見ちゃいけません。ダメ絶対。
にしてもデザインの苦手なデザイナーだけあって直せそうなところがいっぱい…

明日以降からそこらへんは対応させてください…
といっても、古いブラウザなどはあえて微妙な表示にする予定ではあります。
仕事がNN4とかまでフォローしてるので、プライベートくらいはこんな感じにしたいかなぁと･･･

概要っぽいもの

• このページ画像は1枚も使ってません。凄いですねCSS3は。
  あ、上のキャプチャとその他アイコンはさすがに画像です＞＜
  デザインには一枚も画像を使っていないという意味です。
• アニメーションにJavascriptは使っていません。ChromeやSafari4などでページを見れば所々動きますが、CSS3です

作業時間とか

1. デザインは3時間くらい
2. コーディングは2時間くらい

計5時間くらい。ですがロスタイム含めて6時間ちょいかと思います。Twitterに作業はじめの時間POSTしてるので、それを元に計算しています。
コーディングに関してはIEとかを、ブッタ切ってるので納得の時間ですね…

苦労したところ

1. 地味にWebkit系とMozillaとで、ボックスの考え方が違いました。
   特にbox-shadowを使った場合、Mozilla系はbox-shadow分横幅が伸びて表示が崩れました（今は無理やり表示させてます）
2. TwitterにもPostしましたが「@font-face」を「@font-faｓe」と書いて1時間ほどはまりました…コピペしたはずなんだけど＞＜

明日以降直すところ

1. 古いブラウザなどの対応
2. HTML4の部分をHTML5に変更（ワードプレスの勉強をしないと…）
3. デザインの微調整（微妙にデザイン通りじゃない場所が多いので、調整）

といった感じになると思います。

ちょっと夜更かししすぎたので、後は明日以降の対応で＞＜
質問などありましたらコメントをお願いします。

こういう状態に

※HTMLのサンプルを見る
なったことはありませんか？
半角が「/」や「-」などがない状態で連続して続くと改行しないで、そのまま横に表示されてしまう現象です。

英語とかだと区切りがなかったら1単語なので、改行しないという理由はわかりますね。
でもURLとかだと結構頻繁にあったりして困ったりします。

というか今日困っていた会社の同僚が居たので自分用にもまとめて置いてみようと思います。

自分がこうなったときに参考にした方法やそのサイトのまとめを書きます。
※対応ブラウザは、IE6、Firefox3↑、Opera10、Safari3↑、Crome3を考慮しています。

大まかな対応方法

大きく分けて3パターンあります。

1. CSSのみでボックス内にキチンと収める方法
2. HTMLに強引にタグを追加して、表示する方法
3. CSSのみでごまかす方法

凄いアバウトな説明ですが、上記3つで大体の対応方法が分かれるかなーと思います。
ちなみにお勧め順で記載しています。

1.CSSのみでボックス内にキチンと収める方法

長い単語やURLの改行をコントロールするword-wrapプロパティで紹介されている要素の
word-break: break-word;※HTMLのサンプルを見る
を用いる方法です。
この要素を使えばおそらく期待したとおり、ボックスの横幅でキチンと改行を行ってくれます。

ただこの対応は、OperaとFirefox3では適用されないので、完璧とも言いがたいです。が一番理想的な対応方法のように思えます。
早くFirefox3.5が当たり前になれば問題がないのですが…

2.HTMLに強引にタグを追加して、表示する方法

次の方法ですが、これは表示はどのブラウザでも恐らくほぼ完全に動作するのですが、HMTLソースが汚くなるので2番手となっています。
この手段の場合以下の2通りの対応方法があるかと思います。

1. &#x200B;を用いる
2. <wbr>を用いる。

これらは改行させたい文字列の間に、このテキストを流し込みます。どういうことかというと…

例)kzms2

k​z​m​s​2※HTMLのサンプルを見る
k<wbr>z<wbr>m<wbr>s<wbr>2※HTMLのサンプルを見る
といった感じに使用します。上記文字列を入れたところで改行を発生させることが可能になります。
閲覧する分にはなんら影響はないので、場合によってはこの手段の対応でもよい場合もあるのかと思います。

3.CSSのみでごまかす方法

この対応方法は、HTMLはいじらないのですが、本来の要求とちょっと異なってしまうので、3番手の対応としました。
場合によってはこの対応でもアリだったりするかもしれないので、書いてみます。
この対応も2パターンほどあるかと思います。

1. 文章の途中で「…」を用いて文章を短縮してしまう
2. ボックス内スクロールを用いて表現する

CSSだけで文字列を省略して「・・・」を付けて表示する方法のエントリーに記載してあった内容ですが、文言を「…」で隠してしまうことが可能です。

やり方としては、
横幅(width)、white-spce: nowrap、overflow:hidden;
を指定する。

とのことなので、
width:80px;
white-spce:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
-o-text-overflow:ellipsis;※HTMLのサンプルを見る
上記のように記載することで対応することが可能となります。

また最後ですが、overflow:auto;を用いることによって以下のように表示させる事も出来ます。

この場合、
overflow:auto;※HTMLのサンプルを見る
を追加すれば対応が可能になります。
これはどのブラウザも問題なく同じ挙動になりますが、そもそもの解決になっているかといえば怪しいです…

まとめのようなもの

個人的に対応を行うとしたら以下のようにすると思います。
width:100px;
border:1px solid #33f;
background-color:#fff;
word-wrap:break-word;
overflow:auto;※HTMLのサンプルを見る
と、上記のように「CSSのみでボックス内にキチンと収める方法」と「CSSのみでごまかす方法」の合わせ技で対応するかと思います。
word-break: break-word;をメインにして、対応していないブラウザは、overflow:auto;で吸収、という対応方法です。
実際に見るお客様が、見やすいように出来ればよいので、上記の組み合わせで必要に応じて使用できればいいのではないかな、と個人的には思います。

参考にしたサイト様

1. builder様の長い単語やURLの改行をコントロールするword-wrapプロパティより
2. Web制作で今すぐ使えるテクニック集様のエントリー、CSSだけで文字列を省略して「・・・」を付けて表示する方法より

上記のサイトを参考にさせていただきました。有難うございます。
またこちらの記事の記載事項に問題がある場合、ご連絡をいただければ早急に対応させていただきたいと思います。

動機とか

会社で何やらHTML5を触る感じになりそうだったので、ちょっと色々調べるついでにBlogに書いてみます。
基本的にはHTML4.01からHTML5に変更するにはどう書けばいいのかってことに重点を置いてみます

変更前　html4.01のソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>kzms2 - html4.01</title>
<link href="master_h4-090925.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="header">
<h1>kzms2 - html4.01</h1>
</div><!-- /#header -->
<div id="navi">
<ul><li><a href="#">コンテンツ1</a></li><li><a href="#">コンテンツ2</a></li><li><a href="#">コンテンツ3</a></li></ul>
</div><!-- /#navi -->
<div id="contents">
<div id="main">
<div class="box">
<h2>メインのコンテンツ</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</div><!-- /.box -->
<div class="box">
<h2>メインのコンテンツその2</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</div><!-- /.box -->
</div><!-- /#main -->
<div id="sub">
<div class="box">
<h2>サブのコンテンツ</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</div><!-- /.box -->
<div class="box">
<h2>サブのコンテンツその2</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</div><!-- /.box -->
</div><!-- /#sub -->
</div><!-- /#contents -->
<div id="footer">
<address>Copyright &copy; kzms2 All Rights Reserved.</address>
</div><!-- /#footer -->
</body>
</html>
ソースを基にしてHTML5への変更をどう加えればいいのかと色々とhtml5に関連するサイトを見て回ることに

• HTML 5 における HTML 4 からの変更点
• HTML 5 の新要素
  

  HTML 5 は、2000年以降初めて、HTML に新しい要素を導入します。新しい構成要素には aside と figure、そして section があります。新しいインライン要素には time と meter、そして progress があります。新しい埋め込み要素には video と audio があります。新しい対話要素には details と datagrid、そして command があります。

なるほどなるほど。
上にある参考にしたサイトを見る限りでは、以下の3点に気をつければ良さそう

1. 1行目のdoctype宣言の変更
2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">を簡略化
3. headerとnaviとfooterに関してはdivを使用しない
4. divを出来るだけ使わずに、sectionとarticleを使用する

変更後　html5のソース

上のサイトを参考にして、実際に変更を加えたのが以下のソース。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>kzms2 - html5</title>
<link href="master_h5-090925.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<header>
<h1>kzms2 - html5</h1>
</header>
<nav>
<ul><li><a href="#">コンテンツ1</a></li><li><a href="#">コンテンツ2</a></li><li><a href="#">コンテンツ3</a></li></ul>
</nav>
<section id="contents">
<section id="main">
<article>
<h2>メインのコンテンツ</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</article>
<article>
<h2>メインのコンテンツその2</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</article>
</section><!-- /#main -->
<section id="sub">
<article>
<h2>サブのコンテンツ</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</article>
<article>
<h2>サブのコンテンツその2</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</article>
</section><!-- /#sub -->
</section><!-- /#contents -->
<footer>
<address>Copyright &copy; kzms2 All Rights Reserved.</address>
</footer>
</body>
</html>
とこんな感じに。
骨組みのdivは新要素のheaderとnavとfooterとsectionに割り振って、box扱い（？）していたdivをarticleに変更しました。
なーんだこれでいいのかなーなんて思って色々見ていたら何やら雲行きが怪しい。。。

• HTML5を今日のブラウザで使う – Operaのエバンゲリストが実験
  

  sectionなどのネストで、h1だけでも見出しにレベルが自動的に割り当てられるようになる

• HTML5.JP　4.4.2 section 要素
  

  section 要素を利用することで、ウェブ制作者はどこにでも h1 要素を使うことができるようになる点に注目してください。該当ののセクションが、トップ・レベルなのか、第2レベルなのか、第3レベルなのかどうかについて心配する必要はありません。

「h1が複数あっていい」と書いてありますね（汗
しかもarticleの考え方がもしかしたらちょっと違うのかもしれません。。。

うーんこれはhtml4.01の考えを引きずっていたらダメなのかも知れないですね。
また引き続き調べて判ったら追記なり新しいエントリーでも書くことにしてみます。

ちなみに実際のソースは以下においておきます。

• html4.0.1のソース
• html5のソース

なんかhtml5になったらもっと大変になりそうな気がしてきました…！
html5が落ち着いたらCSS3なりcanvasタグについて書いてみようかななんて思っています。