タグ

html+cssとhtml5に関するginpeiのブックマーク (9)

  • HTML5 入れ子チートシート | 吉川ウェブ

    HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素&文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he

    HTML5 入れ子チートシート | 吉川ウェブ
    ginpei
    ginpei 2017/12/20
    仕様上ある要素の子に含められる要素、逆に親として含まれうる要素を可視化するツール。2015年当時の情報か。
  • HTML5 Template: A Basic Code Template to Start Your Next Project

    President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. If you’re looking for a basic HTML5 te

    HTML5 Template: A Basic Code Template to Start Your Next Project
    ginpei
    ginpei 2014/07/10
    HTML5時代のHTMLファイルの雛形案。旧IE向けにhtml5shivを導入、iOS/Androidはviewportの制御とホームアイコンの設定。その他一般的なmetaタグ等。
  • イージング関数チートシート

    イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを(例えばペンのような)放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。

    イージング関数チートシート
    ginpei
    ginpei 2013/10/03
    アニメーションの値遷移の頻出パターン一覧表。jQueryやCSS/SCSSで実装するコードを掲載。いつの間にか日本語に(一応)対応してる。
  • hamashun me : HTML5のstyle要素が持つscoped属性について

    HTML5のstyle要素には、scopedという属性があります。 この属性を持ったstyle要素は、フローコンテンツが期待できる場所に記述する事ができます(フローコンテンツの中って意味じゃ無いです)。 フローコンテンツには、div要素やsection要素やtable要素などがあります(詳しくはコンテンツ・モデル - HTML5タグリファレンス - HTML5.JPとか見てください)。 scoped属性を指定したstyle要素に記述されたスタイルは、ページ全体ではなく、そのstyle要素の親要素の中にあるコンテンツにのみ適用されます。 以下がサンプルコードです。 <p>example text</p> <!-- 赤くならない --> <section> <style scoped="scoped"> p { color: red; } </style> <h1>example title<

    ginpei
    ginpei 2011/09/12
    特定の要素内でのみ有効なスタイルを書ける指定。まだ使えるブラウザーがないみたいだけど、これ使えるようになったら便利だなあ。
  • http://addyosmani.com/css3/

    ginpei
    ginpei 2011/01/09
    五分でわかるCSS3。
  • HTML5 & CSS3 ブラウザ別サポート状況

    What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe

  • HTML5 と CSS3 で 死にたい

    CSS3の「変形・アニメーション関連」のプロパティは面白いですね。これらのプロパティの登場によって、CSSの持つ表現力が「どかーん」と拡大するように感じました。この記事では、WebKit Nightly Buildsでの表示を対象に、 CSS3で新たに定義されたプロパティを色々と使ったサンプルを作ったので、それを紹介したいと思います。 サンプルページは、CSS3のプロパティの練習として作っていたので、 表示の対象はこれらのプロパティを先行実装しているWebKitエンジンのブラウザーの中でも、 描写速度が激的に改善されている開発者向けのWebKit Nightly Buildsになります。 Safari4やGoogle Chromeでも見られますが、アニメーションはスムーズに再生されません。また、HTML5のaudio要素に対応していない場合は音が出力されないようです。非常に高負荷な処理が盛

  • IO 9elements

    Our company's top wizards, stuntmen, and industry experts offer their best advice, how-tos, and insights - all in the name of shockingly good code & design. Building the Perfect Logo StripCreate a visually balanced logo strip by adjusting logo heights based on aspect ratios using CSS. By scaling logos dynamically, you can display a harmonious row of diverse logos without manual tweaking.

    IO 9elements
    ginpei
    ginpei 2009/11/12
    なんか丸いのがふわふわびゅーんというサンプル。説明しづらい……けど、見ると面白い!
  • HTML5の講演資料を公開しました

    This Page has moved to a new address: kunishi’s blog: HTML5の講演資料を公開しました Sorry for the inconvenience… Redirection provided by Blogger to WordPress Migration Service

    ginpei
    ginpei 2009/09/30
    HTMLの過去、現在、未来についての講演の資料。HTML5をざっと俯瞰するのによさそう。
  • 1