CSS Niteビギナーズ：HTML5+CSS3
「HTML5+CSS3時代のDreamweaver活用」フォローアップ

 

2013年4月16日 3:00 pm

ダウンロード

• スライド（PDF、100ページ、6.1MB）

参照リンク

スライドでの（ほぼ）出現順です。

CSSプロパティ

• CSS3 Generator
• W3C
  • CSS Color Module Level 3
  • CSS Text Level 3
  • CSS Backgrounds and Borders Module Level 3
  • CSS 2D Transforms
  • CSS Transitions
  • CSS Fonts Module Level 3
• 10のプロパティ
  • RGBA
  • Opacity
    • 透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」を使いやすくしてみた | THE HAM MEDIA BLOG
  • Text-shadow
    • CSSのみで袋文字を実現する - CSS3で遊んでみる3 | CSS-EBLOG
    • Creating a True Inset Text Effect Using CSS3 | Gordon Landry Hall
    • CSS3のtext-shadowで作ることができるテキストエフェクトいろいろ [K'conf]
  • Box-shadow
    • How to Create CSS3 Paper Curls Without Images
  • Border-radius
  • Gradient
  • Multiple-background
  • 複合（Box-shadow＋Border-radius＋Gradient）
    • CSS3の勉強になるかも！？画像を使わないボタンの作成手順｜Webpark
  • Transform
    • Transformにはtranslate（移動）、scale（縮尺）、rotate（回転）、skew（傾斜）の4つの基本プロパティ、および、perspective（遠近効果）、matrix（2D変形）、matrix3d（3D変形）がありｋます。
  • Transition
    • Rotating Words with CSS Animations | Codrops
    • CSS3スクロールエフェクト
      CSS Scroll Effects
  • Web Fonts
    • 和文Web Fonts
      • もじでぱ｜ウェブフォントでブログ＆ホームページの文字（フォント）を自由に変更して楽しもう♪
      • デコもじ｜ウェブフォントで、ホームページが、ブログが、もっと楽しくなる♪
      • HOME | フォントプラス
      • TypeSquare [タイプスクウェア]
      • フォント・WEBフォントの【アマナイメージズ】
    • 参照リンク
      • Web Fontsの読み込み遅延問題へのソリューション
        セミナーレポート「パソナテックセミナー：広がる"日本語Web Fonts"の世界 Webデザインに"フォント"を取り入れるとは？」 - DTP Transit
      • 絶対にコピペできない文章を作ったったwwww - てっく煮ブログ
      • 「コピペできない文章」がコピペできなかった理由 - てっく煮ブログ
      • Parkinson Type Design joins Typekit « The Typekit Blog
• 参考
  • 手間ひまかけずcss3だけでデザインしたい人のためのチュートリアル集22選 | Webデザインのレシピ
  • CSS3の表現でデザインをちょっと素敵にするサンプル 8
  • [CSS]CSS3で何ができるの？　という時にみておきたいサイト集 | コリス

対応状況の確認

• HTML5 Readiness
• HTML5 & CSS3 Support, Web Design Tools & Support - FindMeByIP - CSS3 & HTML5 Browser Support
• When can I use... Support tables for HTML5, CSS3, etc

4つの対応

• 何もしない
  • Twitter
• フォールバック
• ベンダープリフィックスを使う
  • Nettuts+ Prefixr
  • cssFx.js - CSS3 property polyfill - It's So Futuristic, Baby!
  • CSSPrefixer
  • CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js - かちびと.net
• ライブラリを使う
  • IEでもCSS3のプロパティ、エフェクトを表現できるようにするリソース＆リファレンス
  • CSS3 Support in Internet Explorer 9 | Impressive Webs
  • CSS3 PIE: CSS3 decorations for IE
  • IE6-8でもCSS3に対応するライブラリまとめ:phpspot開発日誌
  • IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」｜Webpark
• その他
  • HTML5×CSS3の実装で抑えておくべきこと - シャンディ・ガフを飲みながら

ベンダープリフィックスについての議論

• 焦らない、ウェブデザイン。 - SK notes
• そのベンダー接頭辞はいつまで書くの？ | Unformed Building
• -webkit-border-radius なんて書いているWeb開発者は腹を切って死ぬべきである - hogehoge @teramako
• スマートフォンにおけるCSS3のベンダープリフィックスについてのメモ | BALLOG

制作ツール

• Dreamweaver
  • Dreamweaver CS5.5を使用したHTML5およびCSS3仕様に基づいたWebサイトの作成 |
    CS5.5 Design Premium機能ツアー | Adobe TV
  • Dreamweaver CS5.5レビュー（ざっくり版） -
    『効率的なサイト制作のためのDreamweaverの教科書』サポートブログ
• Dreamweaver＋拡張機能
• ブラウザ固有の接頭辞(プレフィックス)のあるCSS3プロパティをまとめて挿入するコードヒントを作りました - dwlog.net
• CSSセレクターコードヒント修正 - dwlog.net
• RedLine Magazine : DW用 CSS3対応セレクタコードヒント
• Fireworks CS6のCSS3書き出し（当初、Adobe Fireworks CSS3 Mobile Packとしてベータ提供されていましたが、CS6で正式にサポート。なお、Adobe Fireworks CSS3 Mobile Packは、もう使えませんが、ご参考までに参照リンクを残しておきます）
  • Adobe Fireworks CSS3 Mobile Pack | CSS3 mobile and web design - Adobe Labs
  • Fireworks Tips and Tricks - CSS3 Mobile Packを使ってみよう！ | Adobe TV
  • [Fireworks]これは便利！Adobe Fireworks CSS3 Mobile Pack | バシャログ。
  • CSS Professionalzr
    • Fireworks CS6が書き出すCSSコードを最適化する拡張機能（ムービー）
• CSS3 Please! The Cross-Browser CSS3 Rule Generator
• Grad3
  • CSS3コードジェネレータ「Grad3 - Easy CSS3 gradient editor -」公開 | 秋葉秀樹個人ブログ

レスポンシブWebデザイン

• サンプルで学ぶDreamweaver CS6！「レスポンシブWebデザイン」に挑戦してみよう （1/6）：CodeZine

こもりさんのセッションが難しかった、という方は、下記をご覧ください（ビデオあり）。

• CSS Nite in Ginza, Vol.59フォローアップ

クイズ

• The Shapes of CSS
• 3D Ribbon Generator - CSS3d.net
• CSS tutorial - Using borders to produce angled shapes
• CSS3 Patterns Gallery

まとめ

• 今後のWebデザインとの向き合い方 : could

補足

• 注意点について
  • [CSS]CSS3の効果的な使い方と陥りやすいワナ | コリス
• プロパティなどの読み方について
  • widthの発音について
  • 誤りがちなCSSプロパティなどの読み方 - 『効率的なサイト制作のためのDreamweaverの教科書』サポートブログ
  • 誤りがちな発音（2） - 『効率的なサイト制作のためのDreamweaverの教科書』サポートブログ

追記

• このページでは「body {background-image: url(clouds.jpg);background-size:cover;background-position: center;}」のように記述することで、ウィンドウサイズにかかわらず、clouds.jpgが全面に表示されるように設定しています。「;background-size:cover」がミソです。
• SPピグで見るCSS3活用事例｜1 pixel｜サイバーエージェント公式クリエイターズブログ
  
• [CSS]シンプルなHTMLに付箋紙のデザインを適用するスタイルシート | コリス
  

PhotoshopからのCSS書き出し

• CSS Hat(29.99ドル)
• PhotoshopのレイヤースタイルをCSSで再現してリアルタイムに出力してくれるプラグインCSS Hat | WebDelog
• レイヤーごとにCSSをエクスポート出来るPhotoshop 拡張機能「CSS3Ps」
• ASCII.jp：フォトショ画像が1クリックでCSS＋HTMLに！
• CSS3Ps - free cloud based photoshop plugin that converts layers to CSS3 styles.

HTML5関連の参照リンク

• HTML5関連の情報源のまとめ（2012年4月版） | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
• HTML5 Bookmarks - daily news articles and bookmarks

ご質問等ありましたら、takano@swwwitch.comまでご連絡ください。

『よくわかるDreamweaverの教科書』（CS6対応版）

『効率的なサイト制作のためのDreamweaverの教科書』、『効率的なサイト制作のためのDreamweaverの教科書』（CS5.5対応）改訂版です。

• Amazon
• サポートサイト
• 作例1（Practice 3終了後）
• 作例2（Practice 4終了後）：jQuery Mobileのサンプルです。

jQuery MobileやレスポンシブWebデザインを使ったサイト制作の流れのチュートリアルがあります。

Facebookページ内に、ノートなどがあります。

• 執筆時の検証などで出てきたDreamweaver CS6の挙動、ローカライズなどに関するメモ

コンタクト

お気軽に〜

• Twitter
• Facebook

セミナー情報などは、下記が早いです。

• 鷹野 雅弘

おまけ

• CS6バグリスト
• takano-masahiro — Web Fontsに関して思っていること（2012年10月）