「HTML&CSS」の編集履歴（バックアップ）一覧はこちら
「HTML&CSS」(2012/07/05 (木) 16:23:57) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
PageLastUpdate:&date()/today:&counter(today)/yesterday:&counter(yesterday)
#contents()
とにかく基本は[[Another HTML-lint gateway>http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html]]で自分のサイトをチェックして、ダメなところを徹底的に潰すこと。これをやってるうちに、少しづつ知識がついてくる。
*印刷時のみ適用するcss
とりあえず＠ウィキのこのデザインで印刷時に余計な要素を表示させないサンプル
2012/07/05
#highlight(css){{
@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のテーマとか選んでいるうちに、いじらざるを得なくなってきた。せっかくなので勉強しよう。
-tDiaryテーマの作り方 http://www.tdiary.org/doc/HOWTO-make-theme.html
-テーマ向けHTMLの構造図解 http://tnat.net/img/tdiary_css.png
-テーマ別によるスタイルシートサンプル http://joram.agz.jp/hatena/theme_body.html#link
**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の掟
http://blog.livedoor.jp/dankogai/archives/50828720.html
>+HTTPリクエストは最小限に - Make fewer HTTP requests
>+CDNを活用 - Use a CDN
>+Expiresヘッダを利用 - Add an Expires header
>+コンテンツはGzipせよ - Gzip components
>+CSSは上に - Put CSS at the top
>+JSは下に - Move JS to the bottom
>+CSSのexpressionの利用は控えよ - Avoid CSS expressions
>+JSとCSSは外部化せよ - Make JS and CSS external
>+DNS参照を抑えよ - Reduce DNS lookups
>+JSを「縮刷」せよ - Minify JS
>+リダイレクトは控えよ - Avoid redirects
>+スクリプトの重複を削除せよ - Remove duplicate scripts
>+ETagはオフにせよ - Turn off ETags
>+AJAXを小さくしてキャッシュ可能にせよ - Make AJAX cacheable and small
*よく使うサイト
HTML鳩丸倶楽部 http://www.ne.jp/asahi/minazuki/bakera/html/hatomaru
----
*comment
このページの記述で聞きたいこととか間違ってることとかありましたらコメントを。
#comment_num2
----
PageLastUpdate:&date()/today:&counter(today)/yesterday:&counter(yesterday)
#contents()
とにかく基本は[[Another HTML-lint gateway>http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html]]で自分のサイトをチェックして、ダメなところを徹底的に潰すこと。これをやってるうちに、少しづつ知識がついてくる。
*印刷時のみ適用するcss
とりあえず＠ウィキのこのデザインで印刷時に余計な要素を表示させないサンプル
2012/07/05
#highlight(css){
@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のテーマとか選んでいるうちに、いじらざるを得なくなってきた。せっかくなので勉強しよう。
-tDiaryテーマの作り方 http://www.tdiary.org/doc/HOWTO-make-theme.html
-テーマ向けHTMLの構造図解 http://tnat.net/img/tdiary_css.png
-テーマ別によるスタイルシートサンプル http://joram.agz.jp/hatena/theme_body.html#link
**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の掟
http://blog.livedoor.jp/dankogai/archives/50828720.html
>+HTTPリクエストは最小限に - Make fewer HTTP requests
>+CDNを活用 - Use a CDN
>+Expiresヘッダを利用 - Add an Expires header
>+コンテンツはGzipせよ - Gzip components
>+CSSは上に - Put CSS at the top
>+JSは下に - Move JS to the bottom
>+CSSのexpressionの利用は控えよ - Avoid CSS expressions
>+JSとCSSは外部化せよ - Make JS and CSS external
>+DNS参照を抑えよ - Reduce DNS lookups
>+JSを「縮刷」せよ - Minify JS
>+リダイレクトは控えよ - Avoid redirects
>+スクリプトの重複を削除せよ - Remove duplicate scripts
>+ETagはオフにせよ - Turn off ETags
>+AJAXを小さくしてキャッシュ可能にせよ - Make AJAX cacheable and small
*よく使うサイト
HTML鳩丸倶楽部 http://www.ne.jp/asahi/minazuki/bakera/html/hatomaru
----
*comment
このページの記述で聞きたいこととか間違ってることとかありましたらコメントを。
#comment_num2
----
