HTML&CSS

PageLastUpdate:2012-07-05/today: - /yesterday: -
とにかく基本はAnother HTML-lint gatewayで自分のサイトをチェックして、ダメなところを徹底的に潰すこと。これをやってるうちに、少しづつ知識がついてくる。

印刷時のみ適用するcss

とりあえず@ウィキのこのデザインで印刷時に余計な要素を表示させないサンプル
2012/07/05
@media print {
    form {display: none; }
    .noprint {display: none; }
    .ddsmoothmenu {display: none; }
    .header {display: none; }
    .footer {display: none; }
    .ads {display: none; }
    #body-footer {display: none; }
    .outer {
        border-left: none;
        border-right: none;
    }
 
    body { font: 8pt serif; }}
 

ありがちな間違い

スクリプトでcgi呼び出すときに、パラメータ中に?a=1&b=2みたいな記述があるときに&を&にし忘れる。

tDiaryテーマとはてなテーマ

2007/05/01 なんかtDiaryのテーマとか選んでいるうちに、いじらざるを得なくなってきた。せっかくなので勉強しよう。

DOCUTYPE宣言ではまった

2007/05/04 検索語:はてなダイアリー/スキン/テーマ/デザイン/tdiary/崩れる
adiareyとimg0chに同じテーマを指定しても同じにならない。adiaryははてなとほぼ同じになるけどimg0chが崩れます。
要素を一個一個つぶしていっても直らない。まったく同じ構造までたどり着いて、img0chのDOCUTYPE宣言にloose.dtdがついてるのに気が付く。
adiary/はてな <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
img0ch <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
tDiary <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
で、これが原因でしたorz

そっかー、dtdのあるなしで標準モードと互換モードというのがあるのね。勉強になった・・・
http://desperadoes.biz/style/mode.php

追記:と思ったら、tDiaryはTransitionalじゃなくてstrict.dtdがついてる。これはデザインの共有で問題にならないのかしらん?
さらに追記:img0chのテンプレートや吐き出されてるのは<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">だった。なんで勘違いしたかというと、IEからHTMLとして保存すると、自動的に<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">になるようだ。

はてなのメニュー部分ではまった

はてなの一番上のメニュー部分はテーマによって違うらしい。テーブルレイアウトでくるときとそうじゃないときがあるよ。
たぶん古い <table border="0" width="100%" cellspacing="0" cellpadding="0" id="banner">...
たぶん新しい <div id="simple-header">...

wikiで使うための数値実体参照

2007/05/05 HTMLで使える文字実体参照 http://www.ne.jp/asahi/minazuki/bakera/html/reference/charref
文字 数値実体参照 用途
| | テーブル中で|を書く必要があるとき

Internet Explorer Developer Toolbar

2007/05/11
Webページの構造を検証できるMicrosoft純正IE用プラグイン。
http://www.forest.impress.co.jp/article/2007/05/11/iedevtoolbar.html

あなたのページを最速にする14の掟

  1. HTTPリクエストは最小限に - Make fewer HTTP requests
  2. CDNを活用 - Use a CDN
  3. Expiresヘッダを利用 - Add an Expires header
  4. コンテンツはGzipせよ - Gzip components
  5. CSSは上に - Put CSS at the top
  6. JSは下に - Move JS to the bottom
  7. CSSのexpressionの利用は控えよ - Avoid CSS expressions
  8. JSとCSSは外部化せよ - Make JS and CSS external
  9. DNS参照を抑えよ - Reduce DNS lookups
  10. JSを「縮刷」せよ - Minify JS
  11. リダイレクトは控えよ - Avoid redirects
  12. スクリプトの重複を削除せよ - Remove duplicate scripts
  13. ETagはオフにせよ - Turn off ETags
  14. AJAXを小さくしてキャッシュ可能にせよ - Make AJAX cacheable and small

よく使うサイト


comment

このページの記述で聞きたいこととか間違ってることとかありましたらコメントを。
名前:
コメント:

すべてのコメントを見る

最終更新:2012年07月05日 16:23