Skip to content

tableとcss

tableとcss published on tableとcss へのコメントはまだありません

昔、HTMLのテーブルを使ってデザインを組むのが全盛だった時代、こういうテーブルを沢山使った。

<table border="0" cellspacing="0" cellpadding="0" >

○CSSで置き換える方法。
・border
→ border-widthをtable及びtd, thに適用
・cellspacing=”0″
→ border-collapse:collapse;
・cellpadding=”0″
→ td, thでpadding: 0px;
○補足
IE6で確認
その他のブラウザだと cellspacing=”0″ の代わりに border-spacing: 0px; というのが使えるそう。
ちなみに、CSSのborderは上下左右で別の太さを指定出来るので、色々と便利。
○参考ページ
どなたかのブログ?
掲示板での似たような質問

AタグとCSS

AタグとCSS published on AタグとCSS へのコメントはまだありません

CSS(Cascading Style Sheet)は色んな所で解説されているし、基本的な事はみんな知ってると思う。
今日のちょっとした問題&それの解決方法。
○問題
HTMLファイルで全体用のCSSファイルを読み込んでいる。そこではa:linkとかa:hoverが定義されている。
あるページのあるリンクだけ別のスタイルを適用したいので、こんな感じでやった

/* CSS */
.classFoo {
color: red;
}
(中略)
<a href="foo.html" class="classFoo">jump</a>

これだと、classFooの内容が適用されないで、全体用のCSSファイルで定義された内容が反映される。
○解決方法
結局こんな感じでやった

A.classFoo:link, A.classFoo:active, A.classFoo:visited {
color: red;
}

○その他
このページが分かりやすかった。
これとはちょっと違うけど、CSSの優先順位に関しても色々説明してるページがある。ググるべし。

Yahoo! UI Library

Yahoo! UI Library published on Yahoo! UI Library へのコメントはまだありません

Yahoo!が開発したユーザーインターフェース用のJavaScriptライブラリ。BSDライセンス。
詳しくはこちらから(英語)。
トップページから各コンポーネント(Drag and Drop, Calendarなど)のページに入って、そこのExamplesという所からデモが見られる。
これ、もっと早く知っていたら以前のプロジェクトで、出来の悪いフリーのライブラリとか使わなくてすんだのに。

HTMLフォームをdisabledに

HTMLフォームをdisabledに published on HTMLフォームをdisabledに へのコメントはまだありません

自分用メモ
HTMLフォームで、入力済みの所を変更させたくない場合がある。その時「disabled」を指定するとグレーアウトする。
ただ、disableを指定した場合、フォームの値が渡されない事に注意!単にフォームの形をした飾りと考えるべし。なので、実際に値を次のページに渡したい場合はtype=”hidden”のフォームを埋め込むとか。

参考ページ

JavaScriptのデバッグ

JavaScriptのデバッグ published on JavaScriptのデバッグ へのコメントはまだありません

結構alert文だけで頑張っている人もいるのではないかと思う。自分もその一人だけど。
今のプロジェクトではJavaScriptを使いまくりなので、MicrosoftのScriptDebuggerをダウンロードして使う事になった。普通のデバッガになれていると機能の貧弱さにちょっと泣けてくるけど、それでもalert文だけより大分マシ。
○使い方
使い方は、IEで普通にページを開いてスクリプトエラーがあるとウィンドが出てきてデバッグするか聞いてくる。「はい」を答えるとScriptDebuggerが立ち上がる。で、後は「コマンドウィンドウ」で変数名とかを入力するとその値が表示されたり「undefined」などと表示される。
立ち上がらない場合はIEの「ツール」→「インターネットオプション」→「詳細設定」タブ→「スクリプトのデバッグを使用しない」のチェックを外す
動作はあまり安定していないような気がするので、IEの強制終了などはしょっちゅう必要になる事を覚悟しておく。
○インストールなど
ダウンロードはこの辺りから。MSのサイトはURLがよく変わるので、リンク切れの場合は自分で検索して探してください。
自分は英語版をインストールして使った(英語版OSなので)。Windows Genuine Programをパスしないとダウンロード出来ない。

HTML特殊文字変換ツール

HTML特殊文字変換ツール published on HTML特殊文字変換ツール へのコメントはまだありません

blogに何か書く時(blogに限らずHTMLの場合)、HTMLタグやXMLタグなどを記述したい時がある。技術系の文書だと特に。そういう時にそのまま記述するとHTMLタグと認識されてしまい正しく表示されない。
> → &gt;
とか変換する必要があるんだけど、手動でやると面倒。検索したらWeb上で出来るページを発見。
HTML特殊文字変換ツール
それ以外にもツールとかあるけど、たったこれだけのためにソフトをダウンロードして解凍してダブルクリックしてって面倒くさい。