![CSS Spriteを活用しよう - DesignWalker](https://cdn-ak-scissors.b.st-hatena.com/image/square/4ff1f0b6088f4085799229c562dcb3525e2a3b27/height=288;version=1;width=512/https%3A%2F%2Fg.twimg.com%2FTwitter_logo_blue.png)
HTML文書の文法をチェックし、採点します htmllint.cgi ver1.21 / htmllint.pm ver3.30 文法しか採点しません。内容の良し悪しは採点されません。結果に疑問を感じたら必ず結果の解説を読んでください。満点で慢心しないでください。 チェックしない警告は減点対象外で、満点は 100点です。チェックしても減点されない警告もあります。気に入らないチェック項目は外すことができます。お好みに調整してください。 また、基本的な設定項目だけの簡易ゲートウェイもあります。いちいちオプションなんかどうせ指定しないや、という方はご利用ください。 ダイアルアップはつらいので、ローカル環境でチェックしたいとお考えの方は、ダウンロードのページを参照してください。 チェック方式 チェックしたいHTMLのURLを指定するか、HTMLを下のテキスト領域に直接記述して、[チェック] ボタ
「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。 h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; text-indent:-9999px; } <h5>SITE TITLE</h5> h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; } h5 span{ display:none; } <h5><span>SITE TITLE</span></h5> 上記のようなCSSだと「CS
はてなブックマークをみていたら、気になるエントリーを発見。 [戯] target="_blank" を使わないで新しいウィンドウでリンクを開く方法 target="_blank"という書き方がXHTML 1.1 や XHTML Basicに準拠していないので、これらに準拠するようにしつつ、別ウィンドウで開くにはどうすればよいかという話です。 別ウィンドウで開くにはJavaScriptを使えってのが推奨される方法なんですが、onclickを使って定義するのはめんどうということで、この記事では、aタグにclass="popup"という属性を与えておけば、JavaScriptで別ウィンドウを開くということをしています。 この件については友人のHTML、CSSマスターなkawachi君と話したことがあって、そのときは、下のエントリで紹介されているrel="external"という方法を使うのがいい
DOCTYPE 宣言の種類によって、ブラウザのレンダリングが標準準拠モードになったり後方互換モードになったりすることを DOCTYPE スイッチと言います。 今回は要点だけ手短かに行きたいので詳しくは解説しませんが、 IE 6 だと DOCTYPE 宣言より前になんらかの文字 ( 記述が推奨される XML 宣言であっても ) があれば問答無用で後方互換モードになるバグがあるとか、まあよく聞く話題です。 標準準拠モードと後方互換モードでレンダリングにどんな違いが現れるかは Lucky bag::blog: xml宣言についてや !DOCTYPE スイッチが良いリソースなのでそちらをご覧下さい。 既存の DOCTYPE スイッチ一覧表に "?" ここ数日、この DOCTYPE スイッチについて調べていたのですが、書籍やサイトに書かれている情報と、実際に試してみた結果が少し違うんですよね。 ある
授業内で、既存サイトをXHTML+CSSで組み直す練習をするのですが、生徒が提出したのが「mixi」を書き直したもので、とてもよく出来てました。 mixiはテーブルレイアウトで組まれていて、基本は3カラムだけど、もとがテーブルなだけあって、ヘッダーのメニューが少し複雑だったり、セクションごとのビジュアル的なデザインや、細かい文字の余白のとり方が難しい。 現在のCSSは「どんな見栄えも出来てしまう」とは言えない。本当は言いたいのだけど、実際にはブラウザーのバグを回避するためにバッドノウハウを駆使したり、CSSの限界から、見栄えとは切り離すべきXHTML部分を調整しなくては再現できない見栄えがある。 けど、生徒の提出したものは、見栄えのためだけのdivも無ければ、ヴァリデーターだけを100点で通過するような機械騙しのXHTMLでもない。(一部、リストとしてマークアップできるところはある) もち
How can user experience researchers make sure their voices are heard and their work is valued? By telling a good story. Gerry Duffy guides us through the thickets of research as storytelling by showing us how to recast an oft-maligned discipline as an opportunity to craft a convincing and exciting narrative.
授業中、生徒は課題制作で忙しく僕は用無し。ってことで、○○○をXHTML+CSSで組みなおすシリーズ(?)第二段を勝手にこっそり作ってた。 なるべく皆が知ってるサイトで、コーディングが楽しそうなサイトを探してたのだけど、なかなか決まらず、結局、生徒のリクエストでhatenaのトップページを組みなおす事にしました。 hatenaは一部レイアウトにテーブルを使っているものの、基本はCSSでの段組がされているので、mixiを組みなおすような大きな軽量化は出来そうにない。なので、楽しみ方としては、いかに無駄なマークアップを減らしてシンプルなXHTMLで同じ見栄えを再現するかだ。 これがまた、パズルで遊んでいるときの感覚に似ていてとっても楽しい。近い将来、CSSで1つの要素に複数の背景画像がおけるようになったとき、このパズル感が失われてしまうと思うと残念でならない。(半分ホンキ) で、帰ってきて手直
XHTML、CSS を学ぶ時にやりがちな間違いを私の個人的独断と偏見でつらつらと書いてみます。今から (X)HTML を学ぶのであれば、HTML よりも XHTML でしょということでタイトルや本文内では XHTML と書いていますが、ここは HTML に置き換えてもらっても同じだと思います。 1、とりあえず Dreamweaver を買ってくる 別に 「Dreamweaver」 だけに限らず、オーサリングツールさえ手に入れれば XHTML なんて簡単に習得できると思っている人は少なくない気がしますが、これは大きな誤解です。この誤解を抱えたまま 「オーサリングツールが使える = XHTML を理解している」 だと思い込んでいると後になって困ることになると思いますよ。 オーサリングツールは、コーディングスキルを補うツールではなく、コーディング作業を効率化するツールです。XHTML、CSS に
ルジョー(lujo)ニードルセラムは目に見えないほど小さいマイクロニードルが入った針美容液です。肌につけると直接角層まで美容成分を届けてくれる次世代エイジングケア用品です。 ルジョー ニードルセラムはその効果の高さから口コミサイトでも評判の商品です。 私もルジョー ニードルセラムの愛用者ですが、新感覚の使い心地の美容液で癖になりますし、しっかり肌に馴染むので効果も実感しやすいです。 ルジョー ニードルセラムはいつまでも美しい肌を維持していきたいという方に本気でオススメです。 ▼初回税込3,278円▼ ※送料無料! ※いつでも解約できるので安心 公式サイト:https://store.minorie-shop.com/ でも、どんなに高級なコスメでも実際に効果を実感できなきゃ意味が無いですよね。
最近のコメント PHP オブジェクト指向の勉強 └ Red - 2010.01.08 └ hogepage - 2010.01.21 └ Red - 2010.01.22 └ - 2011.11.27 └ houseiii - 2011.11.27 Fireworks トリミング画像を一括書出 CS4編 └ Iper - 2009.06.27 └ Red - 2009.06.27 └ mala - 2011.11.17 └ Red - 2011.11.18 jQueryでボックスを上下左右中央に簡単配置 └ ミラクル - 2009.03.15 └ Red - 2009.03.15 └ entZ - 2011.10.22 └ Red - 2011.10.24 overflow を使用したボックス背景のこと └ - 2007.12.13 └ Red - 2007.12.13 └ - 2007.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く