本サイトでは、cssだけを使って(FLASHやjavascriptなどを使わずに)、フォトギャラリー(ビューアー)やスライドショーを実践的に作成していきたいと思っています。
インタラクティブなサイト・ページ作りに君臨していたFLASHがこのところその存在感が小さくなりつつあるようです。機能的に他の手法に後れを取ったわけではなく、FLASHで作られた躍動感のあるページは今でも他の追随を許しません。しかし、一部のデバイス(OS)がFLASHに非対応となり、ページ作りのクライアントから敬遠され気味になっているためと思われます。
私の管理する、「FLASHのお勉強」のサイトに訪れるビジターの数も減少しているのが現状で、javascript、特にjQueryとそのライブラリーに活路を求めているクリエイターが多いものと思われます。また一方で、FLASHのタイムラインで作成したswfファイルを、CreateJSなどを使ってjavascriptに変換しHTML5で動くようにする手法も使われているようです。
私がこのサイトを開こうと思ったのは、「じゃあ、javascriptは未来永劫安泰なの?」と疑問に思ったからです。もちろん、javascriptはhtml、cssでは作り得ないものを補完するスクリプトとして欠かせない存在であることは間違いありませんが、セキュリティー面での危険性をはらんでいるので、使わないに越したことはありません。
cssは一方で、css3となって transition とか animation と言ったプロパティーが追加され、ある状態から次の状態までの動きを表現できるようになりました。FLASHのタイムライン的な手法が取れるようになってきたのです。まだまだ、十分な動きを表現するレベルには至ってはいませんが、使いようによっては、結構いけるんではないかと思わせるものがあります。もちろん、ビジターの気を引きつけてやろうと意図しているサイトではなく、普通のサイト作りにおいてではありますが。
CSSはブラウザ対応にバラツキがあるとか、計算や変数などを使えないとかいろいろ使いにくい点はあるのでしょうが、機能的には、今後ますます充実してくるものと思われますし、SCSSなどを使ってCSS記述を効率化する方法も広まることになるかもしれません。この辺でcssを使ったアニメーションの勉強をしておくのも無駄ではないと思いますし、使えるところから使ってみるのもいいのではないでしょうか。多くのwebデザイナーの方も、CSSだけのほうがとっつきやすい面もありますし(色やサイズなどのカスタマイズもやりやすいし)、スクリプターなどへの制作依頼も必要なくなるかもしれません。
css の transition や animaition の基本的な使い方に関しては、web で探して頂ければいくつも見つかりますので、そちらを参考にしていただくことにし、このサイトでは、私の最も関心のある、ビジターに何枚もの写真を効率よく閲覧してもらうための、ギャラリー(ビューアー)やスライドショーの作成をサンプルを示しながら、実践的に作成して行きたいと思います。
私自身、cssの高度な使い手ではなく、とにかくできればOK的に作っていますので、そういう目でcodeを追って頂ければ幸いです。
なお、本サイトの内容を個人用、商用を問わず自由にご活用いただいて結構ですが、本サイトの内容をそのまま無断で、転載、販売に供することは禁止させていただきます。
始めまして。CSS歴四か月の初心者ですが、こちらの解説はとても分かりやすく勉強になります。このたび、スライドイン・アウト型スライドショーの記事のソースコードを参考にいくつかサンプルを作り、ブログで紹介させて頂きました。(全然畑違いの零細オタクサイトで申し訳ありませんが)
今後も勉強させていただけたらと思います。
有難うございました。
いつも参考にさせていただいております。
商用ではないのですが、自身のホームページ(就職時のポートフォリオ)にこちらのサイトの一部記事の内容に類似したものを載せようと考えております。禁止事項にあたってしまうと思いコメントいたしました。
記載にあたっての注意点などあればメールいただけると幸いです。
参考にしていただいてありがとうございます。
本サイトについてに記載していますが、本サイトの内容をそのまま記載するときは、本サイト(本サイトのアドレス)を引用してください。
また、本サイトの内容をもとに作成したCSSスライドショーなどの場合は、スライドショーそのものの公開は全く問題ありません。作成方法の記事などについては、本サイトの寄与度が大きい場合については、引用してください。
いずれにしろ、CSSそのものは皆が共通して知識として持っているもので、わたくし独自のものではありませんから、本サイトの記事の新規性、あなたの記事への寄与度などを考慮して判断ください。
Keep these aritcles coming as they've opened many new doors for me.
Thank you.
Always door will be opened.
始めまして。
こちらのサイトを最近知り、活用しております。
1点質問なのですが、自サイトにてスライドショーを
こちらのサイトのソースコードを参考・使用して
作成する場合は、引用の記載は必要でしょうか?
(作成方法の記事ではなく、単にスライドを使って画像紹介
したいと思っております。)
お忙しいところ恐縮ですが、ご確認のほど宜しくお願い致します。
当サイトをご活用くださいまして、ありがとうございます。
貴サイトにスライドショーを設置する場合は、当サイトコンテンツをご自由にお使いください。
引用等の記載は必要ありません。
ご返答くださり、ありがとうございます!
こちらのslider等は自分としては
作りたいと思って考えても、うまくいかなかった
ところがかかれているので、とても勉強になります。
ただ同じものを設置するだけではなく、
自分なりに工夫などもしていく所存です。
ありがとうございました!
どうぞ当サイトをご活用くださり、より良いものに仕上げてください。
初めまして。パソコン歴は40年以上と長いのですが最近の進歩にはなかなかついていけません。
電電公社時代のキャプテンシステムってご存じですか?
ところで、ホームページのグレードアップの為、レスポンシブのホームページのヘッダー画像をスライドショーにしようといろいろ調べて試行錯誤試しましたがうまくいかず途方に暮れていたところにこのサイトを見つけました。試したところうまく動作してくれました。
ありがとうございます。まだサイト内をよく見ていないのでこれから勉強させて下さい。
初めまして。
ごめんなさい、キャプテンシステムって知りません。と言うのも、私はシステムエンジニアではありませんし、パソコンも独学です。
このサイトが参考になったとか。うれしく思います。
ほかにもいろいろありますので、ご活用ください。