本サイトについて

本サイトでは、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を追って頂ければ幸いです。

なお、本サイトの内容を個人用、商用を問わず自由にご活用いただいて結構ですが、本サイトの内容をそのまま無断で、転載、販売に供することは禁止させていただきます。


コメント

本サイトについて — 5件のコメント

  1. 始めまして。CSS歴四か月の初心者ですが、こちらの解説はとても分かりやすく勉強になります。このたび、スライドイン・アウト型スライドショーの記事のソースコードを参考にいくつかサンプルを作り、ブログで紹介させて頂きました。(全然畑違いの零細オタクサイトで申し訳ありませんが)
    今後も勉強させていただけたらと思います。
    有難うございました。

  2. いつも参考にさせていただいております。
    商用ではないのですが、自身のホームページ(就職時のポートフォリオ)にこちらのサイトの一部記事の内容に類似したものを載せようと考えております。禁止事項にあたってしまうと思いコメントいたしました。
    記載にあたっての注意点などあればメールいただけると幸いです。

    •  参考にしていただいてありがとうございます。
       本サイトについてに記載していますが、本サイトの内容をそのまま記載するときは、本サイト(本サイトのアドレス)を引用してください。
       また、本サイトの内容をもとに作成したCSSスライドショーなどの場合は、スライドショーそのものの公開は全く問題ありません。作成方法の記事などについては、本サイトの寄与度が大きい場合については、引用してください。
       いずれにしろ、CSSそのものは皆が共通して知識として持っているもので、わたくし独自のものではありませんから、本サイトの記事の新規性、あなたの記事への寄与度などを考慮して判断ください。

NS にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>