Another HTML Lint 5
Another HTML-lint 5 is a free checker tool for HTML syntax. You may freely reuse and repost this as long as it is for non-profits. Please make sure to link to this website and specify explicitly your (website manager's) location and contact details. Advertising or any service associated with advertising is forbidden. Note: This is currently Beta version. Please contact us at the following e-mail i
Meta Descriptionで正しく遊ぶ方法について調査してみた。
Meta Descriptionで正しく遊ぶ方法について調査してみた。 2011-09-25 SEO Japanさんの記事を見ていた時に、Meta Descriptionをアスキーアートで表示しているサイトがあり、 ちょっと気になったので、GoogleのMeta Descriptionの出方について調べてみました。 Meta Descriptionの調査 複数のテストページを作成し、Googleさんにインデックスさせてみました。 Meta Descriptionのテストページのリストを見る 英数、記号の200文字 <meta name="description" content="abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ ! '§ $%& /() =? * '__ |; ²³~ @`´ ©«» ¤
Convert a Menu to a Dropdown for Small Screens | CSS-Tricks
The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu. When you’re on a small screen (iPhone shown here) and click the dropdown, you get an interface to select an option where each option is nice and big and easy to choose. That sure makes it easier to pick
Another HTML-lintのHTML5対応を試みた過程の覚書 - 厳選、メタ検索・メタディレクトリ付属日記
未分類Another HTML-lint Downloadからファイルを落として、パソコンにローカルサーバーを立ち上げて利用させていただいているのだが。このたび、HTML5対応を試みた過程の覚書。 「common.rul」ファイルに以下を追加。 'html5' => { doctype => 'html$', name => 'html5|xhtml5', guide => 'HTML5', abbr => 'HTML5', group => 'HTML5', order => ++$doctypescnt, version => 5, scheme => 'urn', charref => 1114112 }, versionを「5」にするとXHTMLとして判定される。HTMLとして判定したい場合、あるいは両方でそれなりに支障なく判定したい場合は、「htmllint.pm」を直接いじる必
Movable Type 5でコメント投稿フォームをポップアップする
Movable Type 5でコメント投稿フォームをポップアップするカスタマイズを紹介します。これはMTQにあった質問に対する回答の情報展開です（最近このパターンが多い・・・）。 ちなみに、過去のバージョン（MT3.x）では次のような設定を行うことで簡単にポップアップを行えてましたが、その後、セキュリティ強化によりGETメソッドでコメントスクリプトが起動しないなど、簡単にポップアップできなくなりました。 ここでは一旦別のスクリプト（mt-popup-comments）を呼び出し、そこから通常のコメントスクリプトを起動する方法を紹介します。 試していませんが、多分MT4でも動作すると思います。 １．機能 新たに追加したポップアップコメント用のリンクをクリックすると、 次のようにコメント投稿フォームがポップアップで表示されます。 サインインしたところです。 認証コメントのみを受け付ける場合は次
hAtomに対応した
フィードの将来を模索してるとやはりhAtomは避けて通れないかなーという感じなので、今更ながら対応した。blosxomのビルトイン変数とフレーバーで実現できるのでそんなに面倒でもない。 <div class="hentry" id="$fn"> <h3 class="entry-title"><a rel="bookmark" href="$url$path/$fn.$default_flavour">$title</a></h3> <div class="entry-content">$body</div> <p> Posted on <abbr class="published" title="$yr-$mo_num-$da6$ti:00+09:00">$da $mo, $yr</abbr> in <a rel="tag" href="$url$path/">$path</a>
[CSS]画像のロールオーバーにフェード効果を与える方法の理想と現実
CSSスプライトを使用した画像のロールオーバーにアニメーションでフェード効果を与える際の、妥当な実装方法、理想の実装方法、現実の実装方法を紹介します。 Fade Image Into Another (within a Sprite) デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 最初の方法：妥当 二番目の方法：理想 三番目の方法：現実 デモでは、上から順番に実装されています。 最初の方法：妥当 HTML 元のエレメント内にspanを一つ配置します。確かにこれは余分のマークアップと感じるかもしれませんが、spanを使用せずに疑似要素を使用すると対応ブラウザが限られてしまうのが現状です。 <a href="#" class="arrow">Arrow<span></span></a> 矢印画像はテキストを画像に置換して配置します。 .arrow { display:
[CSS]IE6, IE7, IE8, IE9の各バージョンの分岐をvalidで処理する方法
CSS Specific for Internet Explorer デモページ（※IE7で表示） [ad#ad-2] デモ紹介 1. 条件付きコメントの利用 2. CSS Hackの利用 3. 条件付きのHTML class デモ紹介 デモページは、下記のように設定されています。 スタンダードブラウザ（IE9, Firefox, Chrome, Safari, Operaなど） 背景色がグレー IE8 背景色がピンク IE7 or IE8互換モード 背景色がグリーン IE6 背景色がブルー 下記はデモページをIETesterで表示したものです。 IETesterの詳しい説明は、「IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester」を参照ください。 デモページ（※IE8で表示） IE9もWin7+IE9で確認したところ、背景はグレーに表示されていました。 [a
jsdo.it
We’re getting things ready Loading your experience… This won’t take long.
cite 要素 - テキストレベルの意味づけ - HTML要素 - HTML5 タグリファレンス - HTML5.JP
4.5.6 cite 要素 カテゴリー: フロー・コンテント フレージング・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: フレージング・コンテントが期待される場所 コンテントモデル: フレージング・コンテント コンテント属性: グローバル属性 text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: あらゆるロールの値 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DOM インタフェース: HTMLElement を使う。 cite 要素は創造的な作品への参照を表します。作品のタイトルや著者の名前（個人、人々、組織）や URL 参照を入れなければいけません。これらは、引用メタデータの追記によく使われる省略表記に入れること
はてなダイアリーに任意のiframeを貼り付ける - monthly gimite
2011/3/2追記: 2011/3/2以前にこのコンバータで変換されたガジェットが正しく表示されない不具合が起きていました。現在は修正済みです。→詳細 最近はiframeを使ったブログパーツがいろいろありますが、はてなダイアリーではiframeが使えません。 Google Gadgetを使えば任意のiframeを埋め込めるのですが、めんどくさいので、iframeを自動でGoogle Gadgetに変換するものを作ってみました。 iframe → Google Gadgetコンバータ ためしにGoogleドキュメントのプレゼンテーションを貼り付けてみました。 ニコニコ動画のサムネイルもこれを使って埋め込めますが、ニコニコ動画のGoogle Gadgetもあります。
自分的HTMLテンプレートの組み方 | Takazudo Clipping*
自分的HTMLテンプレートの組み方と例です。 まぁ、やるたびにちょこちょこ変えてるんですけど、2009年7月版ってことでざっくり説明。 空テンプレ モジュール一覧 サンプル ダウンロード用 エリアとモジュール 繰り返し使用される要素の塊をモジュールと呼び、エリアの中にこれを並べてページを作成するのを基本とする。 モジュールの開始要素には、「mod_moduleName」のようにclass（もしくはid）をつける。 モジュールやエリアのclass/idを起点に全てのスタイルを指定する。p、h1～h6、blockquote、table等、要素自体に直にスタイルを指定してはいけない。（グローバル変数を使っているような状態になってしまうため、以降考慮するのが面倒。リセット程度に済ます。） モジュールにスタイルを指定する際には、mod_moduleNameを起点としてスタイルを指定し、カプセル化を
Source Code Cleaner（ソースコード・クリーナー） - Movable Type プラグイン | かたつむりくんのWWW
Movable Type, Craft CMS, Drupal, HTML, CSS, JavaScript, jQuery etc. Source Code Cleaner（ソースコード・クリーナー）とは、Movable Type で構築されるページの余分な改行や空行などを全部削除するお掃除機能と、tabindex や accesskey、さらには外部リンクに特定のクラス名などを自動で付与してくれる便利機能を兼ね備えたプラグインです。 お掃除機能 Movable Type で構築されたページのソースって、余分な改行がたっぷりでなんだか嫌ですよね。 Source Code Cleaner はそれらの改行、空行をきれいさっぱり削除してくれます。余分な改行、空行を削除することでソースコードが見やすくなるだけでなく、ページの表示速度も若干速くなると思います。 当ブログのトップページのソースは、動
【所感】WEBサイトのヘッダ・フッタの描画方法: それほど間違ってないプログラマ用語辞典
今制作している自サイトは、PHPやRuby等を使わずに、極力ピュアなHTMLとJavaScriptで作ることをモットーにしている。将来的な負荷に備えるというあまり現実味のない理由と、可搬性の高さを目指して。 プログラミング言語が必要になる場合は、最低限の値だけを吐くコードを書いて、Ajax通信でその値を取得するようにしている。これもビューとビジネスロジックの分離と呼ぶのだろうか。きっと呼ばない。 あと、全てのHTMLをStrictにして、HTML ValidatorにOKと言ってもらうことを義務としている。無駄なことにこだわることこそ、プログラマの本分と知る。 で、そういったサイトを作る場合、コンテンツのヘッダ的な部分やフッタ的な部分、パンくずなどの、全てのページで共通の項目を、どうまとめるべきか悩む。PHPとかJSPなら共通ファイルを一言includeするだけなわけですが、HTML+Ja
こらない - prevとnextと「前へ」「次へ」とAutoPagerizeとMicroformats
自分のサイトを、AutoPagerizeに対応させるにあたって、の話。 AutoPagerizeが何なのか、については、日を改めて。 AutoPagerizeに対応させるには、「次へ」のリンクのアンカータグに「rel="next"」を設定しておけばいい。 それ自体は簡単。 しかし。 ブログで、「次へ」「前へ」って言われても、どっちがどっちだかよく分かんない。 例えば、こらないのトップページを上から順に見ていくと、下へ行くほど古い記事になっていく。 で、下まで辿り着いて、もっと読みたいと思ったら、「次へ」をクリックする。 すると、さっき読んだ一番古い記事より、もうひとつ古い記事が表示される。 これはこれでいいと思う。 直感的だよねえ？ で、その「もうひとつ古い記事」のページ下部に、「次へ」ってあったら、「ああ、さらに古い方へ遡るんだな」と思いそう。 その場合、「前へ」ってあったら、「さっき読
ウェブブラウザなんかに気を遣わなくてもいい理由 (agenda)
いつの間にか2009年になってしまった。 IE6に気を使わなくてもいい理由とか「そういう系」 の話を聞くと、なんで非営利個人サイトが自分の嫌いなウェブブラウザなんかに一々気を遣わなきゃならないんだとか思う。もちろん気を遣うのには色々理由があるだろう。だが「気を遣わなくてもいい理由」というのもあっていいんじゃないか。そう思ってだらだらと悪文を書いてみた。本当に悪文だからまとまりはないよ。 相手にしていられないほど膨大な種類の「ウェブブラウザ」 この文脈においてはウェブブラウザではなく、所謂レイアウトエンジンやHTMLパーサの種類を把握すべきだろう。たとえばSleipnirもfubも、同じMSHTML.dllを利用しているなら一つとしてカウントできる。 ウェブページのレイアウトエンジン レイアウトエンジン等の名称主なバージョン（2009年1月現在）応用しているプロダクト他
ppBlog official
こんにちは、martinです。日本に帰国して1年が経ちました。昨年は２月から新しい職場で働き始めたり、9月６日に第１子が生まれたりとバタバタな一年でして、まるでppBlogの開発・サポートが出来ませんでしたが、今年はなるべく時間を作ってppBlogをいじれたらと思っています。 世界中の皆さんにとって、良い年でありますように。 久しぶりのカキコ。 静的リンクでの挙動を変えています。URLのパスに日付情報などを含ませるように。まだ、いじっている段階なので、色々と不具合があるだろうけれど、まぁ気にしないと。 日付情報がある以外には、現状、PermaLink用の英数文字からなる記事タイトルを別に指定できたのですが、これはそのまま取っておくとして、そうでない場合は、記事のタイトルがそのままブラウザのアドレスバーに表示されるような感じにしてます（静的リンクが有効な場合ですが）。今時のブラウザならエンコ
jQuery でテキストエリア内の文字はどのメソッドで取得する？ | JavaScript | かたつむりくんのWWW
「jQuery でテキストエリア内の文字はどのメソッドで取得する？」と、ちょっと疑問に思ったので実験した備忘録です。 jQuery では、指定した要素の中の文字列は「 .text() 」、指定した要素の中のHTML は「 .html() 」で取得できます。また、input 要素（ type="text" ）の value については「 .val() 」で取得できます。 さて、では textarea 要素の中の文字列については、上記のすべてのメソッドで取得できそうなのですが、実際のところどうなの？というのが今回の疑問です。 問題 ここにテキストエリアとボタンが一つずつあります。 テキストエリアの初期値は「かたつむりくん」です。ボタンをクリックすると、「 .text() 」「 .html() 」「 .val() 」の三つのメソッドでテキストエリア内の文字列を取得し、下の定義リストの項目名の下の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML&PHP風コードで表現する人間の身体：ネタ画像置き場
HTML 5 Outliner