タグ

CSSとHTMLに関するsatrexのブックマーク (6)

  • [CSS]まるでFlashのように画像とキャプションをアニメーションで替えるテクニックいろいろ

    画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか!って感じです。 Original Hover Effects with CSS3 [ad#ad-2] 基となるHTMLとなるCSS 必見の10種類のかっこいいデモ 基となるHTML HTMLは非常にシンプルです。 キャプションはタイトルとテキストをdiv要素で内包しclassに「mask」をつけ、そのキャプションと画像をdiv要素で内包します。 <div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </d

    satrex
    satrex 2011/11/08
    興味ある。けど後で見る・・・
  • XHTMLベースの既存のWordPressのテーマファイルをHTML5にするチュートリアル

    XHTMLで作成された既存のWordPressのテーマファイルをHTML5にするチュートリアルを紹介します。 Converting XHTML WordPress Theme To HTML5 [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに header.phpHTML5に変更 index.phpHTML5に変更 single.phpHTML5に変更 footer.phpHTML5に変更 補足:IE6/7/8への対応 はじめに はじめに、なぜHTML5を使うのかを理解する必要があります。私が考えるHTML5を使う大きな理由は、HTML5がセマンティックなマークアップだからです。 HTML5ではheader, footer, nav, section, articleなどを正確に使用する必要があります。 ここでは、XHTMLベースの既存のWordPressのテーマ

  • IE7でpage-break-beforeが効かない : 開発メモ

    2009年09月02日 Permalink Comments(1) TrackBack(0) Windows IE7でpage-break-beforeが効かない IE6では改ページされるのに、IE7でpage-break-beforを指定しているのに改ページされないときがある。 いろいろ試した結果、page-break-beforeを指定しているブロックがページをまたいでいるときに改ページされないようである。 改ページできるパターン(ブロックBにpage-break-before) 改ページ処理前 改ページ結果 ┏━━━━━┓┏━━━━━┓ ┃┌A─┐ ┃┃┌A─┐ ┃ ┃└──┘ ┃┃└──┘ ┃ ┃┌B─┐ ┃┃     ┃ ┃└──┘ ┃┃     ┃ ┗━━━━━┛┗━━━━━┛ ┏━━━━━┓ ┃┌B─┐ ┃ ┃└──┘ ┃ ┃     ┃ ┃     ┃ ┗━━━━━┛ 改ペ

    IE7でpage-break-beforeが効かない : 開発メモ
  • 嫌われまくりのIE6の現状と仲良く付き合う方法

    2017年7月14日 Web関連記事, 便利ツール TwitterでWeb屋さんのつぶやきを見ていると「IE6のせいで…」「IE6さえなければ…」なんて声がよく聞こえてきます。産みの親からも見放されつつあるInternet Explorer 6。一体なぜここまで嫌われているのか?どれほどの人が涙を流してきたのか?そんなIE6と付き合っていく方法は?IE6にまつわる情報を簡単にまとめてみました。 ↑私が10年以上利用している会計ソフト! IE6のシェア 2001年に世にリリースされたInternet Explorer 6。通称IE6。リリースされて10年たった今も色んな意味で話題のこのブラウザーを使っているユーザーは現在どれくらいいるのでしょう? マイクロソフトが(!)IE6撲滅のため「Internet Explorer 6 Countdown」というサイトで世界中でIE6がどれくらい使われ

    嫌われまくりのIE6の現状と仲良く付き合う方法
  • Visual StudioのIntelliSenseでCSS3を利用するには?[C#、VB] - @IT

    「TIPS:Visual StudioのIntelliSenseでHTML5を利用するには?」では、Visual Studio 2010(以降、VS 2010)のコード・エディタのIntelliSense(インテリセンス)で、次世代のWeb標準技術であるHTML5のタグや属性を利用する方法について説明した。このHTML5機能は、VS 2010 SP1(Service Pack 1)で追加されたものだ。 では、そのSP1でHTML5とともに使われるCSS3も使えるのだろうか? 残念ながら、ほんの一部の機能(=奇数番目の<div>要素を意味する「div:nth-child(2n+1)」などのセレクタ指定)を除いて、基的に利用できない状況である。VS 2010 SP1の時点で、CSS3のIntelliSenseを有効にするには、別途、スキーマを用意する必要がある。TIPSでは、この方法を説明

  • HTML5の波

    Internet Explorer(IE)9、Firefox(FF)4と最もメジャーなWebブラウザーがこの3月、相次ぎバージョンアップした(注1)。いずれもウリは、軽量化・高速化および「HTML5」をはじめとする次世代Web技術への対応である。米マイクロソフトはそのすごさをアピールするために、Internet Explorer Test DriveというWebサイト上でIE9に最適化した次世代のWebサイトをデモしている。それらを眺め、操作してみると、なるほど、これからのWebサイトとはこういうふうになるのかというのがよく分かる。 注1 IE9のリリースは3月15日。ただし日語版については、東日大震災の影響により延期されており、3月末時点で正式にはリリースされていない。日語版以外については予定通り提供されている。 現在のWebサイトの大半は、業界標準として使われている「HTML4.

    HTML5の波
  • 1