YouTube動画にキャプションをつけてテキストを回り込ませる方法
YouTube動画にキャプションをつけてテキストを回り込ませる方法を紹介します。 １．はじめに YouTube動画にキャプションをつけてテキ... [記事ページへ]
Comments [0]
| Trackbacks [0]
画像を下揃えにしてテキストを回り込ませる方法
画像を下揃えにしてテキストを回り込ませる方法を紹介します。 （クリックで拡大） サンプル １．問題点 画像にテキストを回り込ませる方法はあり... [記事ページへ]
Comments [0]
| Trackbacks [0]
style要素にCSSの擬似要素は記述可能か？
style要素にCSSの擬似要素は記述可能か調べてみました。 １．はじめに ウェブページにCSSの擬似要素をHTMLタグに直接記述しないとい... [記事ページへ]
Comments [0]
| Trackbacks [0]
position:relativeを設定すると他の要素がずれる場合の対処
position:relativeを設定すると他の要素がずれる場合の対処方法を紹介します。 １．問題点 下記のサンプルを作りました。 <... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSSでタブ切り替えする方法
CSSでタブ切り替えを実現する方法を紹介します。 １．はじめに 「:target擬似クラスのまとめ」でエントリーしたとおり、リンク先のコンテ... [記事ページへ]
Comments [0]
| Trackbacks [0]
:target擬似クラスのまとめ
CSSの「:target擬似クラス」について調べてみました。 認識誤りがありましたらどこかでつぶやいてください。 １．:target擬似クラ... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSSでヘッダを固定したスクロールテーブルを作る方法
CSSでヘッダを固定したスクロールテーブルを作る方法を紹介します。 １．はじめに 次のようなHTMLでテーブルを作成しました。 <st... [記事ページへ]
Comments [0]
| Trackbacks [0]
レスポンシブウェブデザインで画像を縮小する方法
レスポンシブウェブデザインで画像を縮小する方法を紹介します。 １．はじめに Googleは、ページがモバイルに対応していることをモバイル検索... [記事ページへ]
Comments [0]
| Trackbacks [0]
disabledなボタンのhoverのスタイルを無効にする方法
「type="submit"」や「type="button"」のinput要素、またはbutton要素などのボタンをdisabledに変更し... [記事ページへ]
Comments [0]
| Trackbacks [0]
HTML要素を別の要素を基点にしてCSSで絶対配置する方法
HTML要素を別の要素を基点にして、CSSで絶対配置する方法を紹介します。 １．はじめに 次のようなHTMLマークアップで、画像の上に「co... [記事ページへ]
Comments [0]
| Trackbacks [0]
:not擬似クラスでCSS3のサポートをチェックする方法
CSS3の:notで擬似クラスのサポートをチェックする方法を紹介します。 １．はじめに 「:checked擬似クラスでチェックボックスに連動... [記事ページへ]
Comments [0]
| Trackbacks [0]
:checked擬似クラスでチェックボックスに連動して要素を表示させる方法
CSSの:checked擬似クラスを使って、チェックボックスに連動して要素を表示させる方法を紹介します。 １．はじめに 次のようなチェックボ... [記事ページへ]
Comments [0]
| Trackbacks [0]
ol要素の入れ子で親の番号を子に割り当てる方法
ol要素の入れ子で親の番号を子に割り当てる方法を紹介します。 HTMLマークアップ <ol class="list"> &l... [記事ページへ]
Comments [0]
| Trackbacks [0]
チェックボックスやラジオボタンを大きくする方法
チェックボックスやラジオボタンを大きくする方法を紹介します。 １．はじめに デフォルトのチェックボックスとラジオボタンのサイズは小さいです。... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSSで中央に配置する方法
CSSで画像やブロックレベル要素などを中央に配置、つまり上下左右中央寄せにする方法を紹介します。 イメージ １．問題点 以前、「CSSで背景... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSSで背景画像をページの中心に表示する方法
CSSで背景画像をページの中心に表示する方法を紹介します。 イメージ このエントリーはCSSビギナーの方向けの内容です。 １．問題点 背景画... [記事ページへ]
Comments [0]
| Trackbacks [0]
円マークがバックスラッシュで表示される理由
円マーク（円記号）がバックスラッシュで表示される理由について調べてみました。 １．はじめに ブログ記事に半角円マーク「\」を入力して投稿する... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSSでbold指定した文字の幅を狭くする方法
CSSでbold指定した文字の幅を狭くする方法を紹介します。 このエントリーはCSSのビギナーの方向けの内容です。 １．問題点 フォントをs... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが... [記事ページへ]
Comments [0]
| Trackbacks [0]
三点リーダが真ん中に表示されない理由
三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 １．三点リーダとは 説明するまで... [記事ページへ]
Comments [4]
| Trackbacks [1]
CSSでoption要素を非表示にするときの不具合について
CSSでoption要素を非表示にするときの不具合について紹介します。 タイトルでは「不具合」としていますがブラウザの仕様かもしれません。認... [記事ページへ]
Comments [0]
| Trackbacks [0]
レスポンシブWebデザインで3カラムと2カラムを切り替えるためのCSS
レスポンシブWebデザインで、Media Queriesを使って3カラムと2カラムを切り替えるためのCSSの設定について紹介します。 １．や... [記事ページへ]
Comments [4]
| Trackbacks [0]
CSS拡張メタ言語「LESS」の使い方
CSSを効率的に書くための拡張メタ言語「LESS」の使い方を紹介します。 LESS １．「LESS」でできること 簡単な例として、次のように... [記事ページへ]
Comments [0]
| Trackbacks [0]
Google検索結果の横に表示されるスクリーンショットのギザギザをCSSで表示する
Google検索結果の横に表示されるスクリーンショット上下のギザギザをCSSで表示する方法を紹介します。 １．Google検索結果の横に表示... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSS「ボックスモデル」の意味
CSSのボックスモデルについて、他の記事とは異なる観点で解説したいと思います。 １．はじめに いきなりですいませんが、CSSの「ボックスモデ... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSSでtable幅を設定するためのまとめ
CSSでtable幅を設定するためのまとめです。 以前、tableをレイアウトしたときに表示幅がなかなか思い通りにならず苦労したことがあった... [記事ページへ]
Comments [0]
| Trackbacks [0]
いまさら聞けないCSS font-familyのまとめ
CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 認識誤り... [記事ページへ]
Comments [0]
| Trackbacks [0]
ol要素のstart属性を使わずにCSSで番号を途中から振る方法
ol要素のstart属性を使わずに、CSSで番号を途中から振る方法を紹介します。 番号付きリストで「第10位以降のランキング」など、途中から... [記事ページへ]
Comments [0]
| Trackbacks [0]
Google推奨のブラウザレンダリングに関する4つのベストプラクティス
Googleが推奨する、ブラウザレンダリングに関する4つのベストプラクティスについて紹介します。 この記事は「Optimize browse... [記事ページへ]
Comments [0]
| Trackbacks [0]
del要素の取り消し線を文字と異なる色にする方法
HTMLのdel要素で、取り消し線を文字と異なる色にする方法を紹介します。 変更前 削除したコンテンツ 変更後 削除したコンテンツ １．de... [記事ページへ]
Comments [0]
| Trackbacks [0]
data URI Schemeを使ってHTTPリクエストを削減する
data URI Schemeを使ってHTTPリクエストを削減する方法を紹介します。 １．概略 HTMLで画像を表示する場合、 <im... [記事ページへ]
Comments [0]
| Trackbacks [0]
img要素でCSS Spriteする方法
「CSS Sprite」は背景画像などの複数の画像ファイルをひとつの画像にまとめて、画像の中から表示させたい部分の座標をbackground... [記事ページへ]
Comments [0]
| Trackbacks [0]
HTMLやCSSでのプロトコル表記（http:、https:）の省略について
HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べて... [記事ページへ]
Comments [0]
| Trackbacks [0]
「a:visited」のプロパティが配色系のものだけに限定された件について
Webデザインに携わっている方はすでにご存知と思われますが、「a:visited」に設定可能なプロパティが配色系のものだけに限定された件につ... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSSでリンクの文字と下線の間隔（スペース）を空ける方法
CSSでリンクの文字と下線の間隔（スペース）を空ける方法を紹介します。ビギナー向けの内容です。 変更前 変更後 １．リンクの文字と下線の間隔... [記事ページへ]
Comments [0]
| Trackbacks [0]
Google Chromeでテーブルのtd要素の高さが2倍になるCSSの不具合について
当ブログのカレンダーをGoogle Chromeで閲覧したとき、テーブルのtd要素の高さが2倍になる事象が発生しましたので、問題点と対処方法... [記事ページへ]
Comments [0]
| Trackbacks [0]
Google ChromeとSafariのCSSハック
Google ChromeとSafariのCSSハックを紹介します。 CSSハックに用いる文字列は以下です。 @media screen a... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSSの整形・圧縮が一瞬で行えるツール「csCSSc」
CSSの整形・圧縮が一瞬で行えるオンラインツール「csCSSc（Client-side CSS (De)Compressor）」を紹介します... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSSでブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法
ブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法です。ここではCSSを使った方法を紹介します。 動作は主要ブラウザ（IE/FF/... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSSで3D画像を実現するサンプルいろいろ
昨日の「Firefox10の新機能について」でも紹介しましたが、CSS 3D Transformの機能を使えば、3D画像をCSS（とHTML... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか
あちこちのウェブサイトのHTMLソースを見ると、CSSファイルやJSファイルを読み込むlink要素やscript要素のファイル名の末尾に「?... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSSでクラスセレクタをくっつけて並べる方法
クラスセレクタをくっつけて並べることで、特定の要素のスタイルを設定できる方法があまり知られていないようなので、エントリーしておきます。 通常... [記事ページへ]
Comments [0]
| Trackbacks [0]
pre要素で折り返しをするためのCSS
pre要素でソースコードを折り返すためのCSSです。最近は色々なSyntax Highlighterが登場しているので必要ないかもしれません... [記事ページへ]
Comments [0]
| Trackbacks [0]
Google Chromeでfloatレイアウトが崩れる件について
Google Chromeでfloatレイアウトが崩れる事象が発生しました。 かなりレアケースと思われますが、備忘録として以下に詳細を残して... [記事ページへ]
Comments [4]
| Trackbacks [0]
IE8/IE9の「ブラウザーモード」と「ドキュメントモード」のまとめ
先日エントリーした「IE6/IE7/IE8/IE9の共存まとめ」で書いたとおり、IE8/IE9の開発者モードには「ブラウザーモード」と「ドキ... [記事ページへ]
Comments [0]
| Trackbacks [0]
IE6/IE7/IE8/IE9のCSSハック
IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあ... [記事ページへ]
Comments [0]
| Trackbacks [1]
ColumnResizerリニューアル
当ブログでの配布テンプレートのカラムレイアウトサイズを簡単に変更するためのツール「ColumnResizer」をリニューアルしました。このツ... [記事ページへ]
Comments [0]
| Trackbacks [0]
ドロップシャドウつきの画像をセンタリングする
ドロップシャドウつきの画像をセンタリングする方法を紹介します。 以前紹介した、「CSSで画像に影をつける（ドロップシャドウ）」では、画像のセ... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSS で table に斜線を引く方法
CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動し... [記事ページへ]
Comments [0]
| Trackbacks [0]
IE7 で pre 要素が適正に表示されない不具合を修正
当サイトでは、ソースコード等を pre 要素（+code 要素）で表示していますが、「1行だけのソースコードを表示している場合、IE7では適... [記事ページへ]
Comments [3]
| Trackbacks [0]
YUI（Yahoo! User Interface Library）を利用したドロップダウン式グローバルナビゲーション
YUI（Yahoo! User Interface Library）を利用した、ドロップダウン式グローバルナビゲーションを紹介します。 ドロ... [記事ページへ]
Comments [0]
| Trackbacks [1]
CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする
CSS レイアウトでネガティブマージンを使っていると、一部のモダンブラウザでリンクがクリックできなかったり、マウスでテキストを選択できない状... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSS でヘッダーに画像を表示する for Movable Type 4
以前エントリーした「CSSでタイトルバナーに画像を表示する」の Movable Type 4 版です。 デフォルトテンプレート・配布テンプレ... [記事ページへ]
Comments [6]
| Trackbacks [0]
CSSでブログに影をつける（ドロップシャドウ：Movable Type 4.x 配布テンプレート版）
CSSでブログの横に影をつける方法です。 以前エントリーした、「CSSでブログに影をつける（ドロップシャドウ）」は、Movable Type... [記事ページへ]
Comments [4]
| Trackbacks [0]
Highslide JS でサムネイル画像を拡大表示する（設定方法の変更）
以前紹介した、「Highslide JS でサムネイル画像を拡大表示する」ですが、あれからバージョンアップが行われ、設定がかなり簡単になって... [記事ページへ]
Comments [0]
| Trackbacks [1]
サブカテゴリーリストを定義型リストでマークアップする
Movable Type の、2階層のサブカテゴリーリストで、定義型リスト（dl/dt/dd：または定義リスト）によるマークアップを実現する... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSS でブログ本文の画像だけをセンタリングする
ブログのエントリー本文は、一般的に左寄せで表示しますが、「本文中の画像だけをセンタリングしたい場合はどうすればいいですか？」というご質問を頂... [記事ページへ]
Comments [2]
| Trackbacks [3]
CSS の画像置換で画像にリンクを設定する
「画像置換」とは、ヘッダ部分にあるブログ名などのテキストを画像に置き換える手法で、文書構造やSEOを損ねないための複数のテクニックが紹介され... [記事ページへ]
Comments [7]
| Trackbacks [1]
XREA のバナー広告を固定レイアウトのヘッダに表示する
XREA を無料で利用する場合、表示が義務付けられている広告をヘッダ（タイトルバナー）にきれいに埋め込んで表示する方法です。質問を頂きました... [記事ページへ]
Comments [5]
| Trackbacks [0]
Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。
出遅れましたが、インプレスより XHTML+CSS 本が出版されています。 Web標準XHTML+CSSデザイン クリエイターが身につけて... [記事ページへ]
Comments [6]
| Trackbacks [0]
グローバルナビゲーション（その1：基本スタイル）
最近すっかりオーソドックスになった、順序なしリスト（ul/li）を用いたグローバルナビゲーションを紹介します。 2年ほど前に書いた「ナビゲー... [記事ページへ]
Comments [7]
| Trackbacks [4]
RSS フィードにスタイルシート（CSS）を適用する
ブログで配信する RSS/Atom フィード（index.xml や atom.xml）にスタイルシートを適用する方法です。 ブログを始めて... [記事ページへ]
Comments [0]
| Trackbacks [0]
「追記文章の折りたたみ 2.0」でIE7の不具合を解消する
「追記文章の折りたたみ 2.0」というカスタマイズで scriptaculous の Effect.BlindDown および Effect... [記事ページへ]
Comments [2]
| Trackbacks [0]
サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する
先日エントリーした「CSS 変更（2007.02.11）」でお知らせした通り、サブカテゴリーリストの親カテゴリーだけ異なる画像を表示させるカ... [記事ページへ]
Comments [29]
| Trackbacks [2]
公開テンプレートにフッタを追加する（2カラム版）
公開テンプレートの2カラムレイアウトの下に著作権表示等のフッタを追加するためのカスタマイズです。以前、3カラムレイアウトにフッタを追加する「... [記事ページへ]
Comments [2]
| Trackbacks [0]
CSS の after 擬似要素で回り込みを解除する
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併... [記事ページへ]
Comments [8]
| Trackbacks [2]
テンプレートカスタマイズ支援ツール Column Resizer
先日紹介した Slider を利用して、配布テンプレートの各カラムをダイナミックにリサイズできるツールを作ってみました。 このツールを利用す... [記事ページへ]
Comments [2]
| Trackbacks [0]
サイドバーのタイトル背景をカラム幅にあわせて表示する
公開テンプレートの固定レイアウトで、サイドバータイトル部分の背景をカラム幅に合わせて表示する方法ごを紹介します。 本カスタマイズはテンプレー... [記事ページへ]
Comments [21]
| Trackbacks [0]
公開テンプレートのサイドバーのカラム幅を変更する
公開テンプレートのサイドバーのカラム幅の変更方法についてご質問を頂いておりますので、本エントリーで変更方法をご紹介致します。 CSSは公開し... [記事ページへ]
Comments [21]
| Trackbacks [0]
JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ
月別アーカイブのリスト表示は、Movable Type のデフォルト機能では全ての年月を連続で表示することしかできませんが、プラグインを利用... [記事ページへ]
Comments [37]
| Trackbacks [6]
CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方
「CSSでブログに影をつける（ドロップシャドウ）」でドロップシャドウを背景画像として設定する方法を説明しましたが、肝心の背景画像の作り方で悩... [記事ページへ]
Comments [10]
| Trackbacks [1]
CSSでブログに影をつける（ドロップシャドウ）
ブログのサイドバー部分に影（ドロップシャドウ）を作成するカスタマイズを紹介します。 ブログを閲覧されている方なら、1度はこのドロップシャドウ... [記事ページへ]
Comments [46]
| Trackbacks [1]
IE7 の CSS ハック
「IE7 で閲覧すると表示が異なるのですが」というご質問を頂いたので、CSS ハックを利用して、IE7 のスタイルのみを変更する方法を紹介し... [記事ページへ]
Comments [3]
| Trackbacks [10]
CSSでブロックレベル要素をセンタリングする
インライン要素をセンタリングする場合は、その要素のCSSで text-align: center; という text-align プロパティ... [記事ページへ]
Comments [4]
| Trackbacks [3]
3カラムレイアウトをナビゲーションバー部分に適用する
タイトルバナー下にナビゲーションバーを設置している場合、その左右に別の部品を並べて配置したい時のテクニックです。 ここでは、以前紹介した「ナ... [記事ページへ]
Comments [4]
| Trackbacks [1]
CSS の background 画像にツールチップを表示するテクニック
CSS の background プロパティで設定した画像にマウスをポイントした時、img タグに title 属性（または alt 属性）... [記事ページへ]
Comments [0]
| Trackbacks [1]
リキッドレイアウトのサイドバー表示位置を補正する
公開テンプレートのリキッドレイアウトでサイドバーの表示開始位置を補正するカスタマイズです。 １．概要 左のスクリーンショットは当サイトで公開... [記事ページへ]
Comments [4]
| Trackbacks [1]
CSS のフォントサイズ指定が table に反映されない問題
CSS で px 指定のフォントサイズ等を設定している場合、IE.5.5/IE6.0 ではその子要素として記述された table（th/td... [記事ページへ]
Comments [8]
| Trackbacks [4]
CSSでタイトルバナーに画像を表示する
ブログの上部タイトル部分の背景に画像を表示するカスタマイズです。CSS のbackground プロパティを利用することで、スクリーンショッ... [記事ページへ]
Comments [57]
| Trackbacks [2]
CSSでエントリータイトルに画像を表示する
エントリータイトルの先頭に画像に表示する方法を紹介します。ここでは公開テンプレート（Movable Type）を用いた説明になりますが、HT... [記事ページへ]
Comments [13]
| Trackbacks [1]
CSS+JavaScript によるカラムレイアウト切り替え（cookieによる状態保持）
CSS+JavaScript によるカラムレイアウト切り替えでは基本的な切り替え方法を紹介しましたが、このエントリーでは cookie を用... [記事ページへ]
Comments [0]
| Trackbacks [0]
CSS+JavaScript によるカラムレイアウト切り替え
公開テンプレート（Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ）でカラムレイアウトをリアルタイ... [記事ページへ]
Comments [5]
| Trackbacks [3]
標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する
以前エントリーした「CSSで画像に影をつける（ドロップシャドウ）」で、IEで画像枠が表示されない不具合についての対処方法です。 対処すること... [記事ページへ]
Comments [14]
| Trackbacks [8]
エントリーを透過して背景画像を薄く表示する
背景画像を固定するのエントリーで背景画像を透過させるカスタマイズを紹介しましたが、背景画像を薄く透過する方法についてご質問を頂きましたので、... [記事ページへ]
Comments [3]
| Trackbacks [1]
中央カラムとサイドバーで異なる背景画像を表示する
先日、リキッドレイアウトの背景色を変更するというカスタマイズを紹介しましたが、本エントリーは中央カラムとサイドバーで異なる背景画像を表示する... [記事ページへ]
Comments [5]
| Trackbacks [0]
CSSで画像に影をつける（ドロップシャドウ）
CSSを利用して画像に影をつける（ドロップシャドウ）カスタマイズです。ご質問を頂いたのでこちらのエントリーで紹介致します。下のスクリーンショ... [記事ページへ]
Comments [36]
| Trackbacks [10]
背景画像を固定する
背景画像が固定されているサイトを時々みかけるのですが、ご質問を頂いたので本エントリーにてカスタマイズ方法をご紹介致します。今回は順を追ってサ... [記事ページへ]
Comments [8]
| Trackbacks [0]
本文に引用をつける
他のブログ記事や情報を引用する場合に、 これは引用文です という囲い枠を使っているのを頻繁に見かけると思います。これは「引用」という手法で、... [記事ページへ]
Comments [6]
| Trackbacks [6]
スタイルシート切り替え（プルダウンメニュー版）
スタイルシート切り替えをプルダウンメニューで行う方法です。画像のようにプルダウンメニューに表示されたスタイルを選択すると、選択した時点でスタ... [記事ページへ]
Comments [2]
| Trackbacks [1]
印刷用スタイルシート
印刷用スタイルシートにより出力の最適化を行うカスタマイズです。 左上の画像は通常のブラウザによる表示で、同じページを印刷すると左下のような出... [記事ページへ]
Comments [7]
| Trackbacks [2]
float 3カラムの折りたたみによるCSSの不具合
リニューアルで Mozzila 系のブラウザに中央カラムのコンテンツ折りたたみを導入しなかった理由です。 Netscape または Fire... [記事ページへ]
Comments [0]
| Trackbacks [0]
3カラム可変と3カラム固定を切り替える
当サイトで公開している3カラムテンプレートは可変と固定の2種類がありますが、これをスタイルシート切替を用いて瞬時に切り替えるカスタマイズです... [記事ページへ]
Comments [22]
| Trackbacks [5]
CSSで画像を半透明にする
CSSで画像等を半透明にして表示する方法を紹介します。 １．サンプル まずはサンプルをご覧ください。 通常の表示 半透明の表示 半透明の表示... [記事ページへ]
Comments [8]
| Trackbacks [1]
アンダースコア・ハック
CSSで設定したプロパティ（width/font-color等）の前にアンダースコア "_" を付与すると、WinIEではそれを正常なプロパ... [記事ページへ]
Comments [8]
| Trackbacks [8]
html 要素に lang 属性・xml:lang 属性を追加
XHTML では html 要素に対し、拡張要素である xmlns 属性が続きます。 <html xmlns="http://www.... [記事ページへ]
Comments [0]
| Trackbacks [0]
リストマークの画像のずれを修正する
サイドバーメニュー等の先頭のマーク（マーカー）表示に画像を使われている方は少なくないと思いますが、img タグをテンプレートに直接記述するの... [記事ページへ]
Comments [13]
| Trackbacks [2]
ナビゲーションバー・シンプルタイプ（その3：クリック時のロールオーバーを追加）
前回までのカスタマイズで、マウス・カーソルをリンクにポイントした時のロールオーバーを、ページ遷移しても保持するところまでできましたが、リンク... [記事ページへ]
Comments [8]
| Trackbacks [0]
ナビゲーションバー・シンプルタイプ（その2：クリックしたメニューのロールオーバーを保持する）
「その2」は、ナビゲーションバーにあるメニューをクリックした時、ジャンプしたページでクリックされたメニューのロールオーバーを保持、つまり選択... [記事ページへ]
Comments [17]
| Trackbacks [3]
ナビゲーションバー・シンプルタイプ（その1：基本スタイル）
最近ご近所のサイトでカレンダーやメニューの横配置が増えてきましたので、改めてナビゲーションバー（メニューバー）を作ってみました。まずは di... [記事ページへ]
Comments [44]
| Trackbacks [10]
IE5.xでのボックス表示を修正する
IE5.x（Netscape4.xも）やIE6の後方互換モードではCSSの width, padding, border の解釈にバグがある... [記事ページへ]
Comments [5]
| Trackbacks [1]
枠線（border）の指定
ご質問を頂きましたので、テンプレートで提供しているサイドメニュータイトルや本文のblockquoteタグで用いている枠線のスタイルシート指定... [記事ページへ]
Comments [6]
| Trackbacks [3]
リンク画像の枠線を消す
バナー等の画像にリンクを設定すると青い枠が表示されます。これをCSSを使って消去する方法を何通りかご紹介します。 消去前 消去後 １．スタイ... [記事ページへ]
Comments [14]
| Trackbacks [8]
カレンダーの本日に枠線を表示
カレンダーの本日の日付を強調表示していたのですが、我楽さんの今さら普通のカレンダー設置。を参考に、日付に枠線を表示するよう変更してみました。... [記事ページへ]
Comments [25]
| Trackbacks [11]
CSSでリンクをマウスオン（マウスオーバー）時にずらす
CSSでリンクをマウスオン（マウスオーバー）時にずらすカスタマイズを紹介します。 １．概要 通常、リンクにマウスをポイントすると、テキストリ... [記事ページへ]
Comments [8]
| Trackbacks [11]
スタイルシート切り替え
メイン各ページのスタイルシートを右上のリンクで切り替えられるようにしました。スタイルシートを切り替えるとページ全体のデザインをダイナミックに... [記事ページへ]
Comments [26]
| Trackbacks [17]
リンクのアンダーライン一部削除
なんとなく表示が煩わしい感じがすると思ったらリンクのアンダーラインが全部出っ放しでした（早く気がつけって？）。で全部消したらすごい違和感があ... [記事ページへ]
Comments [2]
| Trackbacks [1]
CSSでフォーム要素の空白を除去する方法
以前テーブルタグを用いてフォーム前後の空白を除去しましたが、以下のスタイルシートを追加すれば同様の効果がありました。 form { &nbs... [記事ページへ]
Comments [0]
| Trackbacks [0]
