タグ

ブックマーク / webkikaku.co.jp (4)

  • WEBデザイナーのはじめての「SVG」 | 株式会社WEB企画

    皆さん、師走をいかがお過ごしですか? 今回は前々から試してみたかったSVGについての記事です。 基予備知識0から色々触ってみて、SVGはどんなことができるのかとSVGの面白いなーと思った点等をまとめてみました!「これからSVG試してみようかな?」と思ってる方(特にWEBデザイナーさん)の参考になれば幸いです。 それではどうぞー!! SVGとは その前にSVGについて簡単な説明しておきます。 SVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータです。 その始まりは1998年と意外に古いのですが、ブラウザ対応が追いついておらず、長い間陽の目を見ることがなかったかわいそうなやつです。 SVGのいいとこ SVGがJPEG等の画像と比べていいなーと思

    WEBデザイナーのはじめての「SVG」 | 株式会社WEB企画
  • css3アニメーションのレパートリーがきっと増える!動きの参考になる22サイト | 株式会社WEB企画

    css3でアニメーションを使用するサイトが近頃増えてきました。背景としては、css3アニメーションのプロパティにほぼ対応しているスマホ端末の普及や、animationプロパティ未対応のIE9(IE6~IE8を含む)のシェアが低下してきていることが挙げられると思います。 つまり、css3アニメーションの対応ブラウザは「増加中」ということに他ならず、実装するサイトは更に増えていくのではないでしょうか。 今回は、そんなcss3アニメーションの実装時に参考できる22サイトを集めてみました! 1:丸型オブジェクトにピッタリのアニメーションギャラリー 丸型オブジェクトに対して、様々なホバーエフェクトを実装しています。 何気なくマウスオーバーした時にこんな動きがあれば、注意を引きつけられそうですね! http://tympanus.net/codrops/2013/05/30/simple-icon-h

    css3アニメーションのレパートリーがきっと増える!動きの参考になる22サイト | 株式会社WEB企画
  • WEBデザイナーのはじめての「SVG」 | 株式会社WEB企画

    皆さん、師走をいかがお過ごしですか? 今回は前々から試してみたかったSVGについての記事です。 基予備知識0から色々触ってみて、SVGはどんなことができるのかとSVGの面白いなーと思った点等をまとめてみました!「これからSVG試してみようかな?」と思ってる方(特にWEBデザイナーさん)の参考になれば幸いです。 それではどうぞー!! SVGとは その前にSVGについて簡単な説明しておきます。 SVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータです。 その始まりは1998年と意外に古いのですが、ブラウザ対応が追いついておらず、長い間陽の目を見ることがなかったかわいそうなやつです。 SVGのいいとこ SVGがJPEG等の画像と比べていいなーと思

    WEBデザイナーのはじめての「SVG」 | 株式会社WEB企画
  • サイトコーディングでid名、class名を決定する際の注意点とよく使う名前一覧 | 株式会社WEB企画

    コーディング初心者の樋口です。これまで「コーディングってアレでしょ、divとかのやつでしょ。」程度の知識しかなかった私ですが、実際にコーディングを行うようになり多くのことにつまづく毎日です。 今回はその中でも、個人的に悩まされたid、classの名前の付け方について、命名の仕方やその注意点をまとめてみました。 id名、class名を決定する際の基ルールと落とし穴 まず原則としてこの「id」や「class」は自由に命名することが出来ますが、メンテナンス性の観点から、サイトにおける位置や内容に基づいた英単語を使って命名するのが一般的です。 [例] サイト上部の要素 → #header、#head、#headlineなど 全体を囲う要素  → #wrap、#layoutなど ただこの命名規則に基づいて名前を決めていたにも関わらず、私はid名やclass名の命名に多くの時間を費やしました。その理

    サイトコーディングでid名、class名を決定する際の注意点とよく使う名前一覧 | 株式会社WEB企画
  • 1