タグ

HTML5とcss3に関するysakmrkmのブックマーク (7)

  • head要素に読み込むべき唯一のスクリプト「headjs」 - Mach3.laBlog

    この記事は賞味期限切れです。(更新から1年が経過しています) 「Modernizr」や「html5.js」等、 モダンな環境の為の便利なスクリプトは多々ありますが、 「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。 使い方 Head JS :: The only script in your HEAD 謳い文句はhead要素に読み込む唯一のスクリプト ダウンロードして読み込むだけ。おしまい。 <script type="text/javascript" src="head.js"></script> その多彩な機能 環境の判別 CSS3のプロパティの対応状況、画面のサイズ、ブラウザなどの情報を Modernizrと同じ手法でHTML要素のクラスに出力してくれます。 こんな感じに… <html lang="ja" id="test-page" class="

    head要素に読み込むべき唯一のスクリプト「headjs」 - Mach3.laBlog
  • CSS3 関連情報・総まとめ

    css3の情報がかなり増えてきたので 一旦まとめておきます。基的にはIE が非対応なので、実用はまだまだこれ からという印象でしたが、iPhoneiPad の普及や、IEにも対応させることが可能 なライブラリの出現でかなり実用性が 上がったように思います。 そういうわけで、ブックマークしておいたcss3関連の情報をまとめて整理してみることにしました。重複した情報は出来る限り削いだつもりです。 ※jQueryなどのJavascriptや、HTML5と組み合わせたTips等の情報は出来る限り割愛しました。 リファレンス / 専門サイトまずは基と教科書になりそうなサイトを抑える W3C / 公式です。セレクタ一覧CSS3リファレンス / 日語のリファレンスサイトWebkit CSS Properties / Webkit対応プロパティの一覧。iOSも有りCSS Infos / css1~

    CSS3 関連情報・総まとめ
  • kzms2 – html,css,javascript » レイアウトについて(1/4) – css3を触ってみて思った4個の利点

    このブログをリニューアルして思ったこと やっぱりCSS3は便利でした。 自分でちゃんと触ってみて4点ほど、利点があったのでそれについてチマチマ書いて見ます。 レイアウト組むのが楽ちん セレクタが便利 画像に頼らず色々出来る アニメーションが素敵 といった4点が利点かなー なんて思いました。 日はレイアウトについて便利だったことを書いてみます。 詳細は続きで。 まず始めに css2までは基的に、FloatかPositionのどちらかでレイアウトを組んでいたと思います。 css3からは違う概念でレイアウトを組むことが可能になっています。 表示確認には、Firefox3.5、Chrome4を使用しています。 ※ちなみに説明する中で「-webkit-」(Webkit系)「-moz-」(Mozilla系)「-ms-」(IE系)などのプロパティがありますが、ブラウザごとの独自規格扱いになっ

  • [CSS]HTML5, CSS3, jQueryを使用して実装する画像ギャラリー

    HTML5で実装し、CSS3を使用して面白い効果をつけ、jQueryで拡大表示する画像ギャラリーをCSS-Tricksから紹介します。 Editable CSS3 Image Gallery demo デモはSafariやChromeで見ると、各サムネイル画像がマウスオーバー時にアニメーションを伴って角度を変化させます。 非対応ブラウザでは角度変更のみや垂直に表示された状態です。 各画像をクリックすると、拡大表示します。 拡大に使用しているスクリプトは、当サイトでも紹介した「FancyZoom」です。

  • HTML5入門:アニメーションの実装方法3種

    HTML5・CSS3のような新しい技術の問題点は、HTML4やらFlashなどの枯れた技術と違ってノウハウ・ライブラリ・ツールとかがまだ十分にそろっていない事。普及のタイミングもまだはっきりとしていないこの段階で手を出せない・出しにくいと感じている人が多いのも良く理解できる。 私から見れば、逆に「こんな楽しい状況は滅多にない」わけで、商売になるかならないかは二の次にしていろいろと試したくなる。 今日作ったのは、HTML5+CSS3上で可能になる(ただし現在ではWebkit独自の拡張を含む)3つのアニメーション・テクニックの比較(左に貼付けたものがそれ、Safari/Chromiumだとすべて動く。Firefox/OperaだとDOMとCanvasのみ(ただし別ウィンドウで開かないとCanvasが動かないークロス・ドメインセキュリティのバグか?))。 詳しくはソース(参照)を見ていただければ

  • CSS3とHTML5のマストハブなチュートリアル&リソース集70:phpspot開発日誌

    CSS3とHTML5のマストハブなチュートリアル&リソース集70ということで、大量のコンテンツがまとまっています。 例えば、どんなものがあるというと、CSS3の基ガイドや、CSS3のリファレンス、CSS3による角丸、CSS3のボーダー、ドロップシャドウ、Opacity、マルチ背景画像といった感じでかなり網羅されているみたいです。 CSS3とHTML5によるコンビネーションを使ったテクニックの他、HTML5関連のチートシートなど便利なものが満載の内容になっています。 先取りで覚えておきたい方は知っておいたほうがよさそうですね。 リンク先は以下の元エントリより参照してください。 70 Must-Have CSS3 and HTML5 Tutorials and Resources | Web Resources | WebAppers 関連エントリ CSS3等を使ったサンプルや各種CSSリソ

  • 実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions East に行ってきたのでまとめ | Blog hamashun.com

    実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions East に行ってきたのでまとめ 実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions Eastに行ってきました。 会場は恵比寿のとある会議室で、少人数(参加者10人弱くらい)で行われました。 講師はJohn Allsoppさんで、通訳にヤスヒサさん。 色んなお手伝い(という紹介でいいんでしょうか)にOli Studholmeさんというチームでした。 ヤスヒサさんは久しぶりにお会いしましたが、髪が伸びていました(お前が言うな)。 参加者の中で知ってる人はネコゼさんだけでした。 あの人とかあの人とか来ると思ったのになあ。。 休憩時間に技術評論社でHTML5の記事を書いた村田さんと名刺交換をさせてもらったりもしまし

  • 1