こんにちは。デザイナーの@です。

4年前に作ったサイトのスライドショーはFlashで制作していましたが、もうすっかりjQuery一色……今ではCSSでアニメーションまで

先日、アニメーションにしたらワンポイントになって面白そうだなーという部分があったので、試してみました。
下の丸にマウスオーバーすると、色が変わって丸がボケます。



HTML

CSS

.circle-animation{border-radius:200px;display:table-cell;width:400px;height:400px;vertical-align:middle;background:#c6f3fd;text-align:center;transition:all 1s ease-out;}.circle-animation:hover{box-shadow:0 0 10px #1dcef7,0 0 20px #1dcef7,0 0 30px #1dcef7,0 0 40px #1dcef7,0 0 50px #1dcef7;background:#1dcef7;}

transitionでどのプロパティをどのくらいの時間でどんな進行で変化させるか指定し、
:hoverにマウスオーバーした時の状態を指定します。

今回の

transition:all 1s ease-out;

は、変化を適用できるすべてのプロパティを1秒で、ゆっくり終わるように進行させる、ということになります。


少し手を加えるだけで、ちょっとリッチな感じになるので色々な動きを試してみたいですね。

HTML5やCSS3といった新しい技術がどんどん浸透していっていますが、
やはり気になるのはWebフォント。

これまで画像でしか表示が難しかった極太フォントや
オシャレなフォントをHTMLとCSSだけで表示ができるようになりました

色々なサービスも始まっていますが、
簡単・無料で多数の欧文フォントが使用できるGoogle Web Fontsを試してみます。

例：
SimpleWay Corporation.


まずWebフォントを使いたい部分を用意します。

SimpleWay Corporation.

次にGoogle Web Fontsのサイトで使いたいフォントを選択。
各フォントの右下にあるQuick-useをクリックします。


「Preview Text:」にテキストを入力すると、そのテキストでフォントのプレビューが見れますよ。


3.にHTMLに読み込ませるCSSファイルの記述があるので、それを内に読み込ませ

4.にある通り、CSSでフォントを指定します。

span.webfont {font-family:'Love Ya Like A Sister', cursive;}

欧文かつ画像を作るまでもないけど、ちょっと目立たせたい時など、
気に入ったフォントがあったら使ってみては？

HTMLのコーディングをしていると、決まった幅の中で自動的に改行させたいときがあります。

日本語だと勝手に改行してくれるのですが、英数字の場合、スペースなどの区切りがないと、ブラウザによってURLなどは一つの単語とみなされて途中改行してくれないことがあります。
そのためにページのレイアウトが崩れてしまったり、文字が見えなくなってしまうことがあります。
表示についての詳しい説明はこちらを参考に。

そんなときに使うのがword_wrap。

.word_wrap {
word-wrap: break-word;
}

というスタイルを定義しておいて、対象となる部分をdivで囲み、word_wrapのクラスを付けるだけです。

<div class="word_wrap">testtesttesttesttesttesttesttesttesttest</div>

下の例では、グレーの部分に文字を入れています。
文字区切りがある場合は、英数字、日本語ともうまく改行されていますが、区切り文字がない場合は、右側の日本語表示では問題なく改行されますが、左側の英数字では自動改行されずに枠からはみ出しています。
そこで、word_wrapを使うときちんと枠の中で改行されました。



divではどのブラウザでも問題ないようですが、tableでは問題もあるようなので要注意（こちら参照）ですが、簡単に英数字の改行問題が解決します。