CSS3 だけでスライドショー その２
先日、匿名希望さんから「CSS3 だけでスライドショー」の記事について質問がありました。内容は、“スライドする写真の枚数を増やすには<li>-</li>の中身を増やすだけでは駄目でしょうか？”というものです。
結論から言うと、残念ながら<li>-</li>の中身を増やすだけではダメなんですね。javascriptなどで作った場合は、写真の枚数に合わせて増やしたり減らしたりと、比較的簡単な作業で済みますが、CSSで作成した場合は、写真の枚数に合わせてその分だけ記述を追加または削除してあげなければなりません。人によっては面倒くさいと思うかもしれませんが、CSS にしても javascript にしても一長一短があるってことですね。
写真を８枚に増やしたスライドショー
せっかくの質問ですので、前回の「CSS3 だけでスライドショー」をもう少し掘り下げて書いてみようと思います。技術的な文章は苦手ですので、うまく伝わるか心配ですがご了承ください。
まず、写真を増やしたいということですが、その前に4枚から3枚に減らしたときの動きを検証してみます。どんな感じに見えるかというと、動きが速くなって写真のフェイド効果に白が目立ってしまいますね。ということは、単に写真を増やした場合は、スライドの動きがゆっくりになってしまい、一番はじめの写真に戻るときはフェイド効果が重なってしまいます。ポイントはキーフレームの設定なんですね。
それでは写真を８枚に増やした場合はどうしたらいいのか？実際にソースを見ながら説明して行きましょう。今回はカスタムテキストの部分を分かりやすく横スライドにさせています。
（「css3 animation」については、前回説明していますので今回は省きます。）
下は html での記述です。 html は単にリスト項目を増やすだけでOKです。
/* list */
<ul>
<li><img alt="image01" src="DSCF001.jpg">
<div>#1 北海道 旭山動物園</div></li>
<li><img alt="image02" src="DSCF002.jpg">
<div>#2 あべの ルミナリエ</div></li>
<li><img alt="image03" src="DSCF003.jpg">
<div>#3 京都 伊根の夏</div></li>
<li><img alt="image04" src="DSCF004.jpg">
<div>#4 鳥取 山陰の秋</div></li>
<li><img alt="image05" src="DSCF005.jpg">
<div>#5 長野 安曇野の夏</div></li>
<li><img alt="image06" src="DSCF006.jpg">
<div>#6 わー、雪降ってる</div></li>
<li><img alt="image07" src="DSCF007.jpg">
<div>#7 春 桜がきれい</div></li>
<li><img alt="image08" src="DSCF008.jpg">
<div>#8 京都 鴨川納涼床</div></li>
</ul>
重要なのはCSSで、写真を増やす分だけ記述を追加してあげます。
まず「animation-delay:」ですが、animation-delay プロパティは、変化がいつ始まるかを指定する際に使用します。スライドショーは１枚の写真を７秒で変化させています。
/* css3 delays */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 7.0s;
-moz-animation-delay: 7.0s;
-ms-animation-delay: 7.0s;
animation-delay: 7.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 14.0s;
-moz-animation-delay: 14.0s;
-ms-animation-delay: 14.0s;
animation-delay: 14.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 21.0s;
-moz-animation-delay: 21.0s;
-ms-animation-delay: 21.0s;
animation-delay: 21.0s;
}
.slides ul li:nth-child(5), .slides ul li:nth-child(5) div {
-webkit-animation-delay: 28.0s;
-moz-animation-delay: 28.0s;
-ms-animation-delay: 28.0s;
animation-delay: 28.0s;
}
.slides ul li:nth-child(6), .slides ul li:nth-child(6) div {
-webkit-animation-delay: 35.0s;
-moz-animation-delay: 35.0s;
-ms-animation-delay: 35.0s;
animation-delay: 35.0s;
}
.slides ul li:nth-child(7), .slides ul li:nth-child(7) div {
-webkit-animation-delay: 42.0s;
-moz-animation-delay: 42.0s;
-ms-animation-delay: 42.0s;
animation-delay: 42.0s;
}
.slides ul li:nth-child(8), .slides ul li:nth-child(8) div {
-webkit-animation-delay: 49.0s;
-moz-animation-delay: 49.0s;
-ms-animation-delay: 49.0s;
animation-delay: 49.0s;
}
主要ブラウザのベンダープレフィックスは、下記を参考にしてください。
-webkit- ……… Google Chrome、Safari
-moz- ………… Firefox
-ms- …………… Internet Explorer
-o- ……………… Opera
次はポイントとなるキーフレームの設定です。
/* keyframes #anim_slides */
@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
2% {
left:3%; /* テキストが左から3%の位置に */
opacity:1; /* テキストを透明度なしで表示 */
}
10% {
left:3%;
opacity:1;
}
12% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
ソースはカスタムテキストの部分です。一つのアニメーションを100%で表現しています。写真が４枚のときは0%、6%、24%、30%、100%で指定していました。キーフレームの%を変更することによって、アニメーションの流れを設定できます。opacity: は透明度の指定で「opacity:0;」は完全に透明で「opacity:1;」は透明なしということです。もし「opacity:0.5;」とすれば透明度が半分ということですね。「left:100%;」は左からの位置が100%ということなので右側に隠れて見えなくなります。
二番目のキーフレームを例にとると、“アニメーションが2%のとき、カスタムテキストは左から3%の位置にあり、透明ではない”ということになります。
今回の記事を書くにあたり、実際に写真を８枚に増やしたスライドショーのサンプルをご用意しました。スライドショーのページからダウンロードできるようにしていますのでご覧ください。
今回のスライドショーでは、写真とカスタムテキストの二つのアニメーションがありますが、個別に指定しています。少しずらした効果がスライドショーを引き立てます。
CSS3で作ったきれいなプルダウンメニュー
前回CSS3 だけでスライドショーという記事を書きましたが、今回はCSS3でふわっと変化するエフェクトが特長のプルダウンメニューの紹介です。tro-sukeのサイトリニューアルでも導入しようかと考えていました。どのような効果かは実際のページをご覧ください。
マウスホバーのときふわっと変化するのが特長
繊細なアニメーション効果のあるスタイルシート
CSSで効果を指定できるので、スライドショーでもそうでしたが html を作成するにあたり特別なことは必要ありません。今回はCSS3 transitionで、マウスホバーのときふわっと変化するエフェクトを得られるスタイルシートを使用します。
/* css3 transition */ -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
all 0.2s ease-in-out について解説すると、まずallとはすべてのプロパティということで、例えばwidthとすれば横幅だけということになります。0.2sとは変化のタイムで、2sとすれば2秒もかかりますので効果を確かめるには分かりやすくなりますね。ease-in-outとはゆっくり始まってゆっくり終わるという指定で、他にはease（開始と完了を滑らかにする）、linear（一定）などがあります。
作っていて感じたことは、あまり大げさに指定せずに少しだけのエフェクトの方が、私は効果的のように感じました。
2カラム右メニューのテンプレート（HTML5・CSS3）
スマホにも対応
2カラム右メニューのテンプレートです。メインカラムを横幅可変に設定し、ワイドな画面にもスリムな画面にも対応しております。またPCブラウザ以外のスマートフォンにも対応させてみました。実際のページでブラウザの横幅を狭めると確認できます。今回は2カラムですので、タブレットはPCと同じ表示にしています。スマートフォンの場合は、リンクボタンを少し幅広にして操作しやすく工夫しています。
カラーはパステル調ですがあまり明るくなりすぎないように、少し彩度を抑えたカラーを基調にしています。スタイルシートで色を変えれば、違った雰囲気を感じていただけるでしょう。各自でお好きなカラーに変更して頂けます。
●このテンプレートの主な特長は下記の通り
- 適正なHTMLでSEOやアクセシビリティに効果的
- HTML5＋CSS3で構成されたシンプルな仕上がり
- メインカラムの横幅可変レイアウト
- スマートフォンにも対応したレイアウト
- カラーはパステル調ですが少し彩度を抑えたカラーを基調
CSS3 だけでスライドショー
CSS3だけでスライドショー
スライドショーといえば「jQuery」を使った、かっこいいスライダーがたくさんありますよね。ですが今回はcss3の勉強もかねて、css3だけでスライドショーを作ってみました。
以前でしたら、Flashで作成すれば一番手っ取り早かったのですが、スマートフォンなどの普及に伴い、Flash非対応のデバイス向けにjQueryで作成することが多くなってきました。もちろんそれはそれでいいんですけど、css3だけでもクールなスライドショーは作れるんです。作成したスライドショーは、とても滑らかなでスライド間の変化はフェイド効果を使用しておりきれいな仕上りです。
css3 animation のプロパティ
/* css3 animation */ animation-name: anim_titles; /* キーフレームの名称を指定 */ animation-duration: 30.0s; /* アニメーションの再生時間を指定 */ animation-timing-function: linear; /* イージングの指定 */ animation-iteration-count: infinite; /* 再生回数を指定 */ animation-direction: normal; /* 偶数回目を逆再生にするかの指定 */ animation-delay: 0; /* 再生開始までの遅延時間を指定 */ animation-play-state: running; /* 再生中か一時停止かを指定 */ animation-fill-mode: forwards; /* 再生前後の表示を指定 */
htmlを作成するにあたり特別なことはありません。ただ基本的な<ul>-<li>リストを使うだけで、ここが一番のポイントです。それぞれのスライドにはカスタムなテキストを割り当てることができるから、SEO対策にも効果的なはずです。
HTML5・CSS3でシンプルなテンプレートを作る
ホームページ制作には欠かせない最低限必要なスタイルだけを取り入れて、シンプルなページのテンプレートを作成しました。
1カラムで横幅可変レイアウト
1カラムで横幅可変レイアウトに設定し、ワイドな画面にもスリムな画面にも対応しております。またPCブラウザ以外のタブレットやスマートフォンにも対応させてみました。カラーはパステル調の淡い色を使用しています。スタイルシートで色を変えれば、違った雰囲気を感じていただけるでしょう。
テンプレートの主な特長は下記の通り
- 適正なHTMLでSEO対策やアクセシビリティに効果的
- HTML5＋CSS3で構成されたシンプルな仕上がり
- 1カラムで横幅可変レイアウト
- タブレットやスマートフォンにも対応したレイアウト
- カラーはパステル調でやさしい雰囲気を演出
CSS3でWebフォントを使ってみる
サイトをリニューアルして、知り合いのスマホで確認したとき、サイトのタイトルが斜体で表示されていました。フォントがないから当然とあまり気にしていませんでしたが、やはりサイト名は少しはこだわりを持って表現しないとね…。以前のように画像にしてしまえば簡単なのに、今回はちょっとCSS3にこだわってみました。
CSS2.1ではfont-familyプロパティで、フォントファミリーを指定できますが、それはパソコンにインストールされているフォントを指定する必要がありました。ですから自分の環境ではきれいに見えても、すべての人が同じように見えるとは限りません。普通そういったときのことも考えてfont-familyプロパティでは、WindowsでもMacでも似た表示にさせるため複数のフォントを指定したり、あるいは大ざっぱにsans-serifとかserifのみの指定にしていました。
CSS3では、Webフォントという機能が使えます。Webフォントとは、サーバー上にあるフォントを利用するもので、ユーザーの閲覧環境に依存せずに表示できるという、大変ありがたい機能なのです。方法としては使用したいフォントをサーバーにアップロードし、CSSで読み込ませるだけで利用できるので、フォントの選択肢が広がりますね。ですが、ここで注意しなければならないのが、ライセンスの問題です。一般のパソコンに入っているフォントは、Webフォントに許可されていなかったり、著作権フリーであっても再配布は禁止されているものが多かったりします。
そこでライセンス問題を気にせずに使える「Webフォントサイト」を利用してみました。現在は海外の欧文フォントサイトだけでなく、和文フォントが使えるサイトも増えてきています。tro-sukeで使用するのはこのサイト名だけですので、Google Web Fontsを使用することにしました。
使い方は簡単で「Preview Text: 」の所に表示させたい文字を入力すると直接確認することができます。フォント一覧から好みのフォントを選びます。Quick-useのボタンをクリックすると次のページに進みます。下の方にスクロールするとlinkコードとスタイルシートの記述が表示されていますので、それをコピペすればいいだけです。
HTML5・CSS3で3カラムテンプレートを作る
パソコンのモニターも以前に比べてワイド型のものが多くなってきました。そのためブラウザの横幅を広く使っている方も多いと思います。そういった場合、横幅を固定したものよりも可変にすることで、より使いやすいものになると考えました。まあこれは3カラムのテンプレートに限ったことではないんですけどね。
メインカラム部分を横幅可変にしたレイアウト
3カラムのテンプレートを作る場合、今まででしたら「float」だったりネガティブマージンを使っていました。CSS3では「display: box」を使えば、「float」を使用しなくても綺麗なソースで、３カラムのレイアウトが作れるようになります。
サイドバー固定でメインカラムを可変のレイアウト
このテンプレートでは「display: box」を使用して3カラムのテンプレートを作っていますが、その特長は、サイドバー固定でメインカラムを可変のレイアウトにしていることです。スタイルシートでは「box-flex」を使います。可変にしたい「box」に「box-flex」を指定することでカラムの横幅を可変にすることができます。
やはりInternet Explorerが落ちをつけてくれました
しかしいざ作ってブラウザで確認してみると、IEだけはうまく表示してくれない。調べてみるとIEは未対応とのこと…。「display: box」を使用すると高さも自動的に確保してくれるのに、どうしたものか。IEも10になって他のブラウザーと同じようになったかなと思ったけど、やはり落ちをつけてくれましたね。結局IEだけは今まで通りの方法で対応することにしました。IEハックも何時まで続くのでしょう…。
「display: box」を使用したときと「float」を使用したときの違い
赤丸の部分が見え方の違いです。
HTML5＋CSS3のHPテンプレートも配布開始!!
久しぶりに新しいテンプレートの更新となります。これまで「tro-suke」で配布していたテンプレートは、すべて仕様が「XHTML＋CSS」となっていましたが、需要の移り変わりとともに「HTML5＋CSS3」のテンプレートも配布していくことにしました。
HTML5＋CSS3で作成した左メニュー、2カラムのテンプレート
左メニュー、2カラムのテンプレート
HTML5＋CSS3の第一弾は、最もポピュラーな左メニュー、2カラムのテンプレートです。カラーも基本的な４色をご用意しました。HTML5＋CSS3で作成していますので、PCで古いブラウザをお使いの場合は、レイアウトが崩れてご覧いただけない可能性がございます。
スマートフォンにも対応させたインターフェイス
スマートフォンにも対応
せっかくHTML5＋CSS3で作成しているので、スマートフォンのインターフェイスにも対応させてみました。
PCブラウザとの違いは、メニューボタンを大きく表示し指で押しやすくしています。また表示を２カラムから１カラムへとスライドさせ、できるだけ画面の拡大操作をしなくてもいいように工夫してみました。
ご使用になるときは、必ずテンプレートの詳細ページにある注意書きをご覧ください。
HTML5とcss3でサイトをリニューアルしたけど…
サイトをリニューアルしながら、ちょっと思ったこと。
HTML5ってそれまでのHTMLと何が違うの？ Webデザイナーは知っていても、それを一般の人たちに説明するのはなかなか面倒だったりする。そもそもHTML5って必要なの？っていう疑問すら抱かれたりして、「いやいや、だからね…」などと説明しても「ふーん」くらいで終わってしまう。
考えてみれば、一般の人たちはそんなことどうでもいいし…、第一普通に見れればそれで事足りるではないか。Webデザイナーは、たった1pxの違いでもこだわりを持って作成しているけれど、見る側はそんなことちっとも気にしないんじゃないかなと…。
セマンティックWeb
ホームページの見た目は一緒でも文章構造が違っていたりして、やっぱりHTML5は、重要なんだと思う。セマンティックなコーディングってのは、人が判断するためのものではないけれど、回り回って検索で上位にきたり、サイト自体が使いやすくなるのであれば、ユーザーにとってもいいものになるはずだ。
Webデザイナーは考えている、「見た目のキレイさも重要だけど、目に見えないところでどれだけがんばれるか」が、これからはものを言うのかもしれませんね。
会社案内に特化したWordPressのテーマを一部変更
会社案内に特化したWordPressのテーマ（テーマ名：wp_Busi_Blue、wp_Busi_Red、wp_Busi_Green、wp_Busi_Grayの四点）のフッター部分を一部変更しています。
特別問題があったわけではありませんが、とりあえずバージョンアップです。
◆Ver 1.1（2011 6/17）
