タグ

HTMLとWeb制作に関するraiga448のブックマーク (7)

  • img要素でalt属性の内容がポップアップしない - Web標準普及プロジェクト

    img要素でalt属性の内容がポップアップしない img要素のalt属性に値を設定しておくと、 その画像の上にマウスカーソルを乗せた時にポップアップによってその画像の説明が出る、 またはalt属性そのものがそういう役割の属性であると認識している人がいるようですが、 このような考え方は間違いです。 alt属性の仕様 img要素のalt属性の説明を仕様書から見てみましょう。次のように書かれています。 alt = text [CS] この属性は、画像、フォーム、アプレットを表示できないユーザエージェントのために、 代替テキストを指定する。代替テキストの言語は、lang属性で指定する。 非テキスト系の要素である、IMG、AREA、 APPLET、INPUT要素は、著者に対し、 当該要素が順当にレンダリングされない場合の要素内容として提供される代替テキストを指定することを求める。 代替テキストを指定

    raiga448
    raiga448 2012/05/03
    画像リンクとかでの使い方の認識が少しずれちゃってた・・・img要素にtitle属性とalt属性を併記すればIEではaltがポップアップされないからベストだわ・・・今まではa要素にtitle属性付加してたけど、こっちの方が自然だわ
  • 意外と多い HTML Validation チェックが通らないブログパーツ(正しい HTML4 or XHTML)) - digital 千里眼 @abp_jp

    HTML5 移行前に確認しておきたい HTML4 or XHTML の典型的な間違い 2010-08-15 23:30 追記 id:satoshi351017 さんにコメント欄でご指摘頂いた間違いを修正しました(参考:エスケープする文字 - 雑記帳) 前提 DTD の読み方はここでは解説しないので DTDの読み方 参照のこと そろそろ「IE6」の「非標準」を考慮しなくてもよいのではというスタンスで書きます The W3C Markup Validation Service で自分のブログ(Doctype: HTML 4.01 Transitional)をチェック ...orz よーく見てみると、エラーはブログパーツに多い ちなみに はてなトップページ(Doctype: XHTML 1.0 Strict)は... 大惨事っ!!(当然こちらの原因はブログパーツじゃないが) 共通の間違い:URL

  • HTML5の基本的なシンプルテンプレート「HTML5 Reset」

    ブラウザなどの制約によってまだまだ全ての現場で利用できるとは言いがたい状況ではありますが、国内でも徐々に利用されてきているHTML5。そろそろ手をつけようと思っているWEBクリエイターの皆様も多いと思います。そこで今回紹介するのはHTML5+CSS3を利用した汎用テンプレート「HTML5 Reset」。 こちらのテンプレートは基的なCSS、リセットCSSなど非常に分かりやすい構成で組み込まれており、カスタマイズして利用したり、構造を学んだりすることができるようになっています。 詳しくは以下 こちらのテンプレートは2010年から公開がスタートし、バージョンアップが続けられれ、現在はV2としてリリースされています。 を読み解いて覚えるのは確実ですが、時間がかかりますし、HTMLの基礎ができている方であれば、習うより慣れろで、こう行ったテンプレートを触っていったほうが、遥かに学習効率がよさそ

    HTML5の基本的なシンプルテンプレート「HTML5 Reset」
  • HTML5を使うためのチートシート「HTML5 Cheat Sheets」

    今年一年で多くの話題を振りまいたHTML5。今年から覚えてみよう、活用してみようという方も多いと思います。今日紹介するのは、HTML5を使うためのチートシート「HTML5 Cheat Sheets」です。 HTML5 Tags Cheat Sheet HTML5のタグ、イベントの定義にあわせて、それを処理するイベントハンドラ属性の一覧、HTML5がサポートされているブラウザが一目で分かるシートと3枚セットになったチートシートです。 詳しくは以下 HTML5 Event Handler Content Attribute Cheat Sheet HTML5 Browser Support Cheat Sheet タグのチートシートではHTML4とHTML5とタグと併記されており、こちらを見ればコーディングの際に迷う事も少なくなるはずです。新年からHTML5を覚えていこうという方は是非どうぞ。

    HTML5を使うためのチートシート「HTML5 Cheat Sheets」
  • HTML5でコーディングするときに役立つ10のオンラインツール

    最近ではすっかりおなじみになりつつあるHTML5。ブラウザの問題もあり、まだ広くは利用されていませんが、徐々にその範囲を拡大しつつあります。今日紹介するのはHTML5でコーディングするときに役立つ10のオンラインツールをまとめたエントリー「10 online tools to simplify HTML5 coding」です。 Initializr 様々なHTML5コーディングに役立つWEBサービス、チートシートなどが集められていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 HTML5 Demos and Examples HTML5の独自機能のDemoを試せるサイトIE、firefox、opera、safari、Chromeとそれぞれのブラウザの対応状況をチェックできます。 HTML5 Canvas Cheat Sheet – Nih

    HTML5でコーディングするときに役立つ10のオンラインツール
  • WEBのお勉強とその他趣味的な感じで

    警察から電話が来ました。 久しぶりの更新で、こんなタイトルですいません。 正確には、警察からではく、県警から委託を受けた企業からでした。 内容は、 「県警から、委託を受けて、電話による特殊詐欺撲滅のための・・・」 というような内容でした。 そのあと、お時間2~3分よろしいでしょうか? ときました。 よく電話が来るのが、 「○○会社(業界大手)の特約店の▲▲(聞いたことがない会社)です。 電気代がお得になる・・・・」 とか 「NTTの特約店の××(聞いたことがない会社)です。 お得になる、フレッツ光の・・・」 と、同じパターンだと思い 明らかに怪しいと感じたので 「忙しいので、駄目です。」 と断ってしまいました。 通常ですと、それでもと、かなりしつこく来るのですが、 あっさりとあきらめてくれました。 気になったので早速、県警に電話しました。 しばらくコールしたら、忙しそうな感じで電話に出られ

    raiga448
    raiga448 2011/04/06
    CSS3をかなり試されていています。
  • 背景画像を使わずにCSSスプライトをする方法 | アルペジオのように

    背景画像を使わずにCSSスプライトを実現する方法が紹介されていたので、参考にしてメニューを作成してみました。背景画像ではないので、プリントアウトしても問題なく表示されます。 背景画像なしのメニューサンプル 画像を背景として指定するのではなく、普通に imgタグで設定します。 メニュー画像 サンプルで使用している画像はこうなっています。 サンプルのソース HTMLCSSのソースです。 <style type="text/css"> #sample_menu { width: 500px; height: 60px; margin: 2em 0; overflow: hidden; } #sample_menu li { list-style-type: none; float: left; } #sample_menu li a { display: block; width: 125px

  • 1