普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
ファビコン・カンニング・ペーパー
Translation of: favicon-cheat-sheet ファビコンのサイズや形式についての読むと頭が痛くなる偏執的なカンニング・ペーパーです。以下のURLを参考にしました: rel="shortcut icon" considered harmful · Mathias Bynens <-- special thanks @mathiasbynens Everything you always wanted to know about touch icons · Mathias Bynens <-- special thanks @mathiasbynens Jonathan T. Neal | Understand the Favicon Favicon - Wikipedia, the free encyclopedia Making a Good Favicon -
HTMLにおけるimg要素のalt属性
HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを
W3CDTFとHTML5の日付と時刻の違い - Weblog - Hail2u.net
てっきりHTML5のtime要素のdatetime属性などで使われる日付と時刻のフォーマットはW3CDTFだと思い込んでいたんだけど、違った。ISO 8601というわけでも、W3CDTFのようにそのサブセットというわけでもないので、パースする時はそこそこ気をつける必要がありそう。知らなければ幸せだったような気がしないでもない。 日付けと時刻の間のT A "T" (U+0054) character or a U+0020 SPACE character Tの代わりに半角スペースでも良い。ISO 8601では許可されないので、ISO 8601のパーサーではエラーが起こる可能性が高い。 タイムゾーンの: Optionally, a ":" (U+003A) character コロンは省略可能になっている。これはISO 8601と同じ。Nu Validatorとかは非対応なのでエラーになる。
link要素をhead要素外で使う
定期的にLiving Standardを読むことを趣味にしている人は多いと思います。僕もその一人なんですが、どうやら最近flow contentに属するものに変更が加わったらしくlinkやmeta要素が入っています。itemprop属性があれば……という注意書き付きなので、Microdataでの使用を考慮しての追加のようです。というわけでタイトルのようなことが条件付きで可能になりました。わーい。 例えばこれでブログのエントリー個別のページなどで自身へのリンクを張ることに耐えられない人が幸せになれそうです。 <article itemprop="blogPosts" itemscope itemtype="http://schema.org/blogPosting"> <link itemprop="url" href="/blog/example-post"> <h1 itemprop="
Safariで使用可能なキーボード - 強火で進め
inputタグのタイプなどを指定する事で以下の入力に適したキーボードが使用可能です。 電話番号 URL メールアドレス 数字 実際にiPhoneで確認したい場合はこちらにアクセスして下さい。 キーボードレイアウトはこの様になります。 通常 <input type="text" /> 電話番号 <input type="tel" /> URL <input type="url" /> メールアドレス <input type="email" /> 数字 <input type="text" pattern="\d*" /> または <input type="text" pattern="[0-9]*" /> 数字 <input type="number" />
IE9のサイトの固定をやってみた metaタグ編 | </gecko> ： げことじ。
IE9の固定サイトを使ってみたので、まずはmetaタグの指定方法をまとめておく。 固定するとどうなるの？ こんな風になります。 画像はjsdo.itで作ったサンプルです。 ホームボタンのアイコン画像 戻るボタンの色 進むボタンの色 ウィンドウサイズ などをカスタマズ可能です。 サイトの固定方法 Windows7でIE9をいれていること。 固定したいサイトを開いてタブをタスクバーにドラックアンドドロップする JavaScriptを使ってどうにかする。 実装方法 基本的な設定はmetaタグだけでできます。 ホームアイコンの指定 立ち上げたアプリケーションの戻る進むの横のホームアイコン icoファイルに32×32が含まれていればそれが採用される。 [html] [/html] アプリケーションの名前 タスクバーのアイコンを右クリックしたときに出るInPrivateブラウズを開始するの下にある文字
divタグが多用されている経済産業省のページのdivタグを可視化してみた - Pastalablog in はてな
はてなブックマークとかで盛り上がってたのを見て、せっかくなので、divにborderかけてみたらすごいことになった。 話題なのはこのページ 経済産業省 会見・スピーチ 大臣記者会見 ページ自体は古め*1 divの数は下のコードで数えたらページ全体で309個あった。 検証方法 firebugにjQuery検証機能を付けるFireQueryというのを使ってjQueryで適当に以下のコードを実行した。 var c=new Array("red","yello","blue","green","black","pink"); $("div").each(function(i){ $(this).attr("style",("border:1px solid "+c[i%6])) }) 結果 こんなHTMLどうやって作ったんだろうか。 もし手打ちなら根気の居る作業だったんだろうなぁと思いました。 追
経済産業省 会見・スピーチ 大臣記者会見
昨日までのことは既にご承知だと思いますが、残された中でどうしても、最重要であるということで２点、先ほど財務大臣、それから与党の政策責任者の方々いらっしゃいましたけれども、１点目は中小企業支援対策、法律が３本あって、若干重複もあるということで、それを統合してわかりやすくといいましょうか、効率的な法律にすると同時に、内容も充実をするということで、中小企業を中心にした事業体の連携した異業種間を含めた連携によるプラス効果を支援するための補助金について、トータル２６億円、一部認められておりましたけれども、ぜひ要求どおりお認めいただきたいということで２６億円増になりまして、これを認めていただいたわけでございます。 ２点目が物理探査船でございまして、今まで、内示から昨日の復活折衝もゼロでございましたが、財務大臣、それから両政調会長のもとで私なりのご説明を申し上げまして、その結果、１７年度で約１０１億円、
Dropboxでデモページを作ろう | CSS Radar
Dropboxの底力 私はDropboxのヘビーユーザ。 すでに50GB($9.99/月または$99/年)は残り60%に達している。 ファイルの同期、共有、公開。シンプルながら面倒なタスクがシンプルにできることが最大の魅力だ。 The Ultimate Dropbox Toolkit & Guideにて30以上のTips&Tricksが紹介されていたが、 iTunesのライブラリを同期 Eye-Fi経由で撮った写真をiPadで閲覧 ローカルサーバ用のwwwフォルダに設定 TextExpanderとBreevyのスニペットを同期 メール添付ファイルをDropboxに格納 ソーシャルメディア用プロフィール画像の格納 とベーシックな機能以外に様々なライフハック的な活用法がある。 D.B. デモボイラープレート 様々な機能の中でも意外に見落としがちなのが、publicフォルダの存在だ。 その
[CSS]パンくずの実装はどのようにするのがよいかの考察
パンくずは何要素で実装していますか？ ul要素？ ol要素？ p要素？ パンくずをどのように実装するのがよいかの考察を紹介します。 Exploring Markup for Breadcrumbs [ad#ad-2] 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 -ul要素で親子 パンくずのマークアップの考察 -ol要素で順序づけ パンくずのマークアップの考察 -セパレーターの使用 パンくずのマークアップの考察 -Googleを参考に パンくずのマークアップの考察 -HTML5の使用 パンくずのマークアップの考察 -おわりに パンくずのマークアップの考察のきっかけ -ul
HugeDomains.com
Captcha security check the389.com is for sale Please prove you're not a robot View Price Processing
HTML5 での引用と引用元のマークアップ
前回の記事 で、HTML5 における引用と引用元のマークアップについて以下のような提案をしました: <blockquote> <p>エレベーターはきわめて緩慢な速度で上昇をつづけていた。おそらくエレベーターは上昇していたのだろうと私は思う。</p> <footer> 村上春樹『<cite>世界の終りとハードボイルド・ワンダーランド</cite>』より </footer> </blockquote> 引用元についての情報を footer 要素でマークアップし、かつ blockquote 要素の中に置くというアプローチです。かなり気に入っていたのですが、はてなブックマークでこんなコメントをいただきました (ありがとうございます): “Content inside a blockquote must be quoted from another source” なので引用文以外の情報を含めるのは
【レビュー】HTMLのidとclassでいい名前をつけるテクニック | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLを書く際に悩むことは多々あるが、中でも悩ましいことのひとつにidやclassで指定する「名前」がある。idやclass属性はCSSやJavaScriptで対象となる要素を特定するために使われる。わかりやすく一貫性がある名前をつけることは、WebプログラマやWebデザイナにとって欠かすことができないスキルであり、悩ましいところでもある。 How To Compose HTML ID and Class Names like a RockstarにおいてMeitar Moscovitz氏がidやclassの名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次
簡単で完璧な阻止率100%のスパム対策の実装について - ヽ( ・∀・)ノくまくまー(2010-04-01)
● 簡単で完璧な阻止率100%のスパム対策の実装について 日々増大する中国からのスパムアクセス。全てのWebサーバ管理者が悩まされていると言っても過言ではないだろう。これを低コストで完璧に排除する活気的な方法を思いついたので、以下に提案する。キーワードは「発想の転換」である。 ブラックリスト方式 (DNS) 中国からのアクセスを弾くために という排除方法を考えてみる。この場合、問題が2つある。 効率性 (HostNameLookups on にする必要がありパフォーマンスが悪い) 完全性 (全ての中国IPが .cn のDNS付与されているわけではない) 1の速度面を我慢したとしても、「中国で利用されているホスト情報」というブラックリストが定義不能であるため、この方式は完全ではない。 ホワイトリスト方式 (DNS) 発想を逆にして、ホワイトリストを定義してみる。話を簡単にするために、もう大雑
address要素の正しい使い方 « HTML5.JP ブログ
本日、html5doctor の記事「The Address Element」の日本語訳を公開しました。私の翻訳がうまくないためかもしれませんが、個人的には、この記事には誤解を招いてしまうのではないかと感じるところがありましたので、個人的な見解ですが、私なりの補足を。 該当の記事では、address 要素に住所を入れてはいけないと読み取れてしまいます。しかし、私は、そう思っていません。HTML5 仕様の address 要素の定義でも、そのようなことは言っていないと解釈しています。 address 要素の用途の本質は、address 要素に住所を入れて良いかどうかどうかが問題なのではなく、ドキュメントやセクションに関する著者への連絡先情報に相当するかどうかです。もし、これに該当するのであれば、住所でも構わないと思います。 HTML5 仕様では、次のように言っています： The addres
Webサイトの「Copyright～」にaddressタグは適切？ – メール人語
皆さん、ホームページの著作権表示のタグは何使ってますか？ よくWebサイトのフッターに、「Copyright ～」みたいな著作権の表示がされているのを見かけますよね。 あの著作権表記のHTMLのタグは何を使ってますか？ 個人的に、ずーっと気になってたのが、著作権表示に利用されるaddressタグです。 実際に有名なサイトでも多数使われています。 Yahoo! JAPAN <address>Copyright (C) 2009 Yahoo Japan Corporation. All Rights Reserved.</address> mixi <address>Copyright (C) 1999-2009 mixi, Inc. All rights reserved.</address> 三井住友銀行 <address lang="en" class="en">Copyright
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ
Makes you HTML souce eautifully indented - Ham Cutlet
HTML書く人まわりの熱い一日
