旧ブログコンテンツ

現在は note で発信しています。

#CSS_Sprite

#CPI #CS5 #CSS3 #CSSSprite #Dreamweaver #Firefox #Fireworks #HTML5 #InDesign #jQuery #LP #Photoshop #SEO #USTREAM #まぼろし #スマートフォン #ソースコード #デザイン #レイアウト #岡部_和昌 #拡張機能 #湯口_りさ #福岡 

CSS Nite LP32フォローアップ(3)黒野 明子さん(crema design)

2014年2月15日、ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、黒野 明子さん(crema design)の『Sassにもっと便利な機能をプラス! Compassを使ってラクしましょ?』セッションのスライドなどをシェアします。


「CSS Nite LP32フォローアップ(3)黒野 明子さん(crema design)」の続きを読む

2月19日にIllustratorとSVGをテーマにCPI x CSS Nite「After Dark」を開催

CPI x CSS Nite「After Dark」(7)『Webで使うIllustrator、そして明日から使うSVG』(2014年2月19日開催)

2014年2月19日、KDDIウェブコミュニケーションズ セミナールーム(麹町)にてCPI x CSS Nite「After Dark」(7)を開催します。

今回は『Webで使うIllustrator、そして明日から使うSVG』と題して、次のような構成でお送りします。

Webで使うIllustrator(鷹野パート)

  • Fireworksの後継としてIllustratorが有力なワケ
  • ビットマップを扱うこともあるので、 Illustratorを使う上でおさえておきたいお作法
  • 使いこなしたい「アートボード」

SVGを使う上でぶつかる壁、ありがちな疑問(鷹野+松田)

  • background-imageにも対応できる?
  • Dreamweaverでプレビューできる?
  • サイズをしていないといけないと思うんだけど、ピクセル指定したときretinaだとどうなるの?
  • マウスオーバーに対応できる?不透明度下げるとか
  • CSS Spriteに対応できる?
  • 書き出したら、PNGの倍くらいのファイルサイズになってしまった...
  • フォールバックはどうしたらいいの?

SVGマニアック(松田パート)

  • SVGを効果的に使っているサイト
  • インラインSVGと外部参照の違い
  • SMILアニメーション、DOMアニメーション、CSSアニメーション
  • SVGを使う際に便利なライブラリ等

CSS Nite LP23フォローアップ(2)『画像の最適化で地球をエコに』(岡部 和昌さん)

120630_lp23_0304.jpg

2012年6月30日(土) 、ベルサール九段で開催したCSS Nite LP, Disk 23「表示速度最適化」のフォローアップとして、岡部 和昌さんの『画像の最適化で地球をエコに』のスライドなどを公開します。


「CSS Nite LP23フォローアップ(2)『画像の最適化で地球をエコに』(岡部 和昌さん)」の続きを読む

CSS Nite LP23フォローアップ(1)『Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -』(石本 光司さん)

120630_lp23_0143.jpg

2012年6月30日(土) 、ベルサール九段で開催したCSS Nite LP, Disk 23「表示速度最適化」のフォローアップとして、石本 光司さんの『Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -』のスライドなどを公開します。


「CSS Nite LP23フォローアップ(1)『Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -』(石本 光司さん)」の続きを読む

AQUENTセミナー:「Adobe CS6で学ぶ、 今、身に付けておきたいWebサイト制作スキル」

AQUENTが主催するセミナー「Adobe CS6で学ぶ、今、身に付けておきたいWebサイト制作スキル」が、大阪、名古屋、福岡で開催されます(都内版は終了)。

大阪(6月3日10:30-12:00)福岡(6月16日13:30-15:00)のみ残席わずか、残りは満席になっています。

>アドビ社からCreative Suiteシリーズの新バージョン「CS6」が発表されました。 Dreamweaver CS6やFireworks CS6に搭載された新機能は、スマートフォン、マルチデバイス対応など、Webサイトの制作現場で求められている新技術の実装を容易にするものが多く含まれています。

スマートフォン対応には、デバイスの横幅に応じて異なるレイアウトを適用する「レスポンシブWebデザイン」、JavaScriptフレームワークのモバイル版である「jQuery Mobile」の2つのアプローチが注目されています。

Dreamweaver CS6には「レスポンシブWebデザイン」対応のサイト制作を容易にするための「可変グリッドレイアウト」や、jQuery Mobileのテーマを視覚的に適用する「jQuery Mobileスウォッチ」などの機能が、Fireworks CS6では、jQuery Mobileテーマを作成したり、CSS Spriteを書き出す機能が強化されています。

さらにスマートフォン対応で忘れてならないこととして、CSS3の利用によって画像を減らし、読み込み速度を上げることです。Fireworks CS6では、角丸、ドロップシャドウ、グラデーションなどをCSS3のコードとして書き出すことができます。

このように、Dreamweaver CS6/Fireworks CS6のは、これからのWebデザインを行う上で生産性を上げるために必須のツールとなりつつあります。

そこでエイクエントは、CSS Niteの主宰者としてお馴染みの鷹野さんをお招きし、今身に付けておきたいWebサイト制作スキルを、Dreamweaver CS6 / Fireworks CS6を使ってデモンストレーションしていただきます。

Webサイト制作に携わる多くの方のご参加をお待ちします。