非推奨 / 廃止要素や属性の使用を防ぐ CSS | ヨモツネット
概要 Web ページの作成や運用時に、意図しないタグや属性が使われてしまうのを防ぐための CSS です。 動作確認用の demo (CSS 適用前) 動作確認用の demo (CSS 適用後 ただし IE 7 未満では無効) ダウンロード この CSS ファイルを読み込むことで 廃止 / 非推奨 / 独自拡張タグを使用すると警告が表示し、意図しないタグや属性の使用を防ぎます。(ただし、CSS の都合で IE 7 以下では表示できません) img やhr などの置換要素については、content プロパティが使用できないためボーダーのみを表示します。 表示するテキストは Unicode エスケープしてあるので文字化けの心配はありません。 使用方法 CSS ファイルを読み込むだけで使用できます。この CSS ファイルをいつでも取り除けるように import 用の CSS ファイルから読み込むと
XHTML 1.1 の DTD | ヨモツネット
<!-- ....................................................................... --> <!-- XHTML 1.1 DTD ........................................................ --> <!-- file: xhtml11.dtd --> <!-- XHTML 1.1 DTD This is XHTML, a reformulation of HTML as a modular XML application. The Extensible HyperText Markup Language (XHTML) Copyright 1998-2007 World Wide Web Consortium (Massachusetts Institute of T
ヨモツネット 実験室 » 入力されたテキストを自動で指定の形式(半角,全角,ひらがな,全角カタカナ)に変換する
概要 ユーザがフォームに入力したとき、指定の形式 (半角,全角,ひらがな,全角カタカナ) に自動で変換してあげるための JavaScript ライブラリです。 動作確認用の demo ダウンロード 使い方と説明 動作させるためには、ダウンロードした valueconvertor.js を (X)HTML ファイルの head 要素内などで読み込みます。 <script type="text/javascript" src="js/valueconvertor.js"></script> さらに、変換の動作の目印とするための class 属性値を設定します。<input type="text" class="ascii" />のように、input 要素に対して、指定の class 属性値をつけると動作します。class 属性値と動作の内容の対応表については以下の通りです。 値の形式 clas
CSS だけで複数の box の高さをそろえる | ヨモツネット
CSS だけで複数の box の高さをそろえる方法についての demo と解説です。この方法では JavaScript は使用しません。 テキストが数行程度の box に限定されてしまいますが、JavaScript のエラーの心配がなかったり、JavaScript を無効にしている環境にも対応します。 動作確認用の demo box の高さが変わる要因のほとんどは、テキストの量によるものなので、テキストの入るp要素などにheightをemで指定します。max で 3 行とするなら div.sample p.sampleText{ height:4.8em; line-height:1.1; overflow:hidden; } のように指定します。 1 行の高さは 1.1 em、box の高さは 4.8 emで 3 行分 + バッファを指定します。 em で高さを指定しているので、フォン
画像の下にテキストが回りこまないレイアウト | ヨモツネット
概要 画像の横にテキストがあるようなレイアウトですがテキストが画像の下に回りこまないという CSS の書き方です。float を使うと、画像の下部にテキストが流れ込みますが、この方法は、画像の下にはテキストは流れ込みません。 さらに、画像の大きさは自由に設定できて、スタイルの使い回しが可能なレイアウトです。(画像が配置されるスペースの横幅は画像のサイズにフィットします。) これにより、画像のサイズごとに class 属性を設定したりスタイルを作る必要がありません。 また、画像がない場合でも画像分が詰められて表示されます。 これを応用すれば柔軟に対応できるコンポーネントをつくることができます。 動作確認用の demo 動作確認用の demo (左右逆版) 説明 display プロパティに table や table-cell を設定して実現します。構造を table 要素に置き換えて考えて
height が決まっている領域で上下左右中央揃えにする CSS | ヨモツネット
概要 height が決まっている領域で上下左右中央揃えにするレイアウトのための CSS のコードです。position で実現する方法と違い、height が可変しても常に上下は縦横揃えが維持されます。 この方法はコンテンツエリアをウィンドウに対して上下中央揃えにしたいときにも応用ができます。 height が一定のエリア内で上下左右中央揃えの demo height が一定のエリア内で上下左右中央揃えの demo (expressionを使用したバージョン) コンテンツエリアをウィンドウに対して上下中央揃えの demo (expressionを使用したバージョン) height が一定である必要がない場合や、IE で JavaScript の機能が利用できない環境を考慮する場合は、position を使って実現する方法や、expression を使用せずに、上下中央揃えを実現ができる、
外部リンクだけにアイコンをつけることのできる CSS のセレクタ | ヨモツネット
概要 リンクで、外部の Web ページが参照先のときにアイコンなどをつけて区別するケースがよくあります。 そのときに、参照先が外部の Web ページの a 要素だけにスタイルを適用するための CSS コードです。 動作確認用の demo この方法は外部リンクの a 要素だけに class 属性をつけるというような処理が必要ないので、CMS やブログのエントリーなどにいいかもしれません。 似た方法で JS でまとめて class 属性を付与する方法もありますが、CSS だけで完結したほうがスマートかなと思ったのでサンプルを作りました。 demo で使用した CSS コード a[href^="http"]{ background:url(img/ico_conductor.png) no-repeat right center; padding-right:15px; } a[href^="h
Firefox 1.0, 1.5, 3.0 用の CSS ハック | ヨモツネット
概要 Firefox 1.0 以降用, Firefox 1.5 以降用, Firefox 3.0 以降用の CSS ハックの手法とその仕組みの説明です。 動作確認用の demo 説明 複数のセレクタに同じ宣言を共有する場合、h1, h2, h3 { font-style: bold } のようにセレクタをカンマで区切ってグループ化 (Grouping) することができます。 しかし、グループ化したセレクタ群の中に、Web ブラウザが未対応のセレクタが一つでも含まれている場合、グループ化した別のセレクタも無効化されてしまい、グループ化した全てのスタイルが適用されなくなります。 例えば、h2, p:first-child { font-weight:bold } のように宣言した場合、h2 要素と最初の子要素の p 要素が太字でレンダリングされます。しかし、IE 6 では :first-chi
横幅が 100% の header を ~inner を使わずに実現する | ヨモツネット
概要 Web ページのデザインで、ヘッダ部分やフッタ部分の横幅がウィンドウに対して100% になっているとき、~inner のような不要な div を使わないでこれを実現する方法です。 動作確認用の demo 構造 動作確認用の demo のページの構造は body 要素 div#document div#header div#content div#footer となっています。 HTML のソースコード 動作確認用の demo の HTML のソースコードは最小限で抜き出すと <body> <div id="document"> <div id="header">ヘッダ領域</div> <div id="content">コンテント領域</div> <div id="footer">フッタ領域</div> </div> </body> となっています。 CSS のソースコード Fire
imagemap で簡単にロールオーバー | ヨモツネット
概要 地図などの img 要素に、map 要素と area 要素で imagemap を指定したとき簡単にロールオーバー効果を与えることができる JavaScript ライブラリです。 動作確認用の demo ダウンロード 使い方 画像のファイル名を目印にしてロールオーバー効果を与えることができます。 例えば、次のような XHTML のソースの断片があったとします。 <p><img src="img/map_swap0.gif" alt="地図" width="300" height="200" usemap="#imagemap" /><p> <map name="imagemap" id="imagemap"> <area shape="rect" coords="0,0,30,30" href="#area1" alt="エリア1" /> <area shape="rect"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
