TopCSS

YouTube動画にキャプションをつけてテキストを回り込ませる方法

CSS
June 8,2022 11:55 PM
Tag:[YouTube]
YouTube動画にキャプションをつけてテキストを回り込ませる方法を紹介します。 1.はじめに YouTube動画にキャプションをつけてテキ... [記事ページへ]
Comments [0] | Trackbacks [0]

画像を下揃えにしてテキストを回り込ませる方法

CSS
April 29,2022 11:55 PM
Tag:[]
画像を下揃えにしてテキストを回り込ませる方法を紹介します。 (クリックで拡大) サンプル 1.問題点 画像にテキストを回り込ませる方法はあり... [記事ページへ]
Comments [0] | Trackbacks [0]

style要素にCSSの擬似要素は記述可能か?

CSS
September 28,2018 12:03 AM
Tag:[]
style要素にCSSの擬似要素は記述可能か調べてみました。 1.はじめに ウェブページにCSSの擬似要素をHTMLタグに直接記述しないとい... [記事ページへ]
Comments [0] | Trackbacks [0]

position:relativeを設定すると他の要素がずれる場合の対処

CSS
January 25,2018 12:03 AM
Tag:[CSS]
position:relativeを設定すると他の要素がずれる場合の対処方法を紹介します。 1.問題点 下記のサンプルを作りました。 <... [記事ページへ]
Comments [0] | Trackbacks [0]

CSSでタブ切り替えする方法

CSS
March 18,2015 1:55 AM
Tag:[CSS]
CSSでタブ切り替えを実現する方法を紹介します。 1.はじめに 「:target擬似クラスのまとめ」でエントリーしたとおり、リンク先のコンテ... [記事ページへ]
Comments [0] | Trackbacks [0]

:target擬似クラスのまとめ

CSS
March 16,2015 1:55 AM
Tag:[CSS]
CSSの「:target擬似クラス」について調べてみました。 認識誤りがありましたらどこかでつぶやいてください。 1.:target擬似クラ... [記事ページへ]
Comments [0] | Trackbacks [0]

CSSでヘッダを固定したスクロールテーブルを作る方法

CSS
March 10,2015 12:55 AM
Tag:[css]
CSSでヘッダを固定したスクロールテーブルを作る方法を紹介します。 1.はじめに 次のようなHTMLでテーブルを作成しました。 <st... [記事ページへ]
Comments [0] | Trackbacks [0]

レスポンシブウェブデザインで画像を縮小する方法

CSS
March 2,2015 12:55 AM
Tag:[CSS, Responsive]
レスポンシブウェブデザインで画像を縮小する方法を紹介します。 1.はじめに Googleは、ページがモバイルに対応していることをモバイル検索... [記事ページへ]
Comments [0] | Trackbacks [0]

disabledなボタンのhoverのスタイルを無効にする方法

CSS
January 14,2015 12:55 AM
Tag:[CSS]
「type="submit"」や「type="button"」のinput要素、またはbutton要素などのボタンをdisabledに変更し... [記事ページへ]
Comments [0] | Trackbacks [0]

HTML要素を別の要素を基点にしてCSSで絶対配置する方法

CSS
September 26,2014 12:55 AM
Tag:[CSS]
HTML要素を別の要素を基点にして、CSSで絶対配置する方法を紹介します。 1.はじめに 次のようなHTMLマークアップで、画像の上に「co... [記事ページへ]
Comments [0] | Trackbacks [0]

:not擬似クラスでCSS3のサポートをチェックする方法

CSS
September 17,2014 12:03 AM
Tag:[CSS]
CSS3の:notで擬似クラスのサポートをチェックする方法を紹介します。 1.はじめに 「:checked擬似クラスでチェックボックスに連動... [記事ページへ]
Comments [0] | Trackbacks [0]

:checked擬似クラスでチェックボックスに連動して要素を表示させる方法

CSS
September 16,2014 12:33 AM
Tag:[CSS]
CSSの:checked擬似クラスを使って、チェックボックスに連動して要素を表示させる方法を紹介します。 1.はじめに 次のようなチェックボ... [記事ページへ]
Comments [0] | Trackbacks [0]

ol要素の入れ子で親の番号を子に割り当てる方法

CSS
September 12,2014 1:55 AM
Tag:[CSS, HTML5]
ol要素の入れ子で親の番号を子に割り当てる方法を紹介します。 HTMLマークアップ <ol class="list"> &l... [記事ページへ]
Comments [0] | Trackbacks [0]

チェックボックスやラジオボタンを大きくする方法

CSS
August 21,2014 12:11 AM
Tag:[CSS]
チェックボックスやラジオボタンを大きくする方法を紹介します。 1.はじめに デフォルトのチェックボックスとラジオボタンのサイズは小さいです。... [記事ページへ]
Comments [0] | Trackbacks [0]

CSSで中央に配置する方法

CSS
June 11,2014 1:11 AM
Tag:[CSS, Image]
CSSで画像やブロックレベル要素などを中央に配置、つまり上下左右中央寄せにする方法を紹介します。 イメージ 1.問題点 以前、「CSSで背景... [記事ページへ]
Comments [0] | Trackbacks [0]

CSSで背景画像をページの中心に表示する方法

CSS
May 20,2014 1:23 AM
Tag:[CSS, Image]
CSSで背景画像をページの中心に表示する方法を紹介します。 イメージ このエントリーはCSSビギナーの方向けの内容です。 1.問題点 背景画... [記事ページへ]
Comments [0] | Trackbacks [0]

円マークがバックスラッシュで表示される理由

CSS
April 9,2014 1:55 AM
Tag:[CSS, HTML]
円マーク(円記号)がバックスラッシュで表示される理由について調べてみました。 1.はじめに ブログ記事に半角円マーク「\」を入力して投稿する... [記事ページへ]
Comments [0] | Trackbacks [0]

CSSでbold指定した文字の幅を狭くする方法

CSS
September 17,2013 1:11 AM
Tag:[CSS, Font]
CSSでbold指定した文字の幅を狭くする方法を紹介します。 このエントリーはCSSのビギナーの方向けの内容です。 1.問題点 フォントをs... [記事ページへ]
Comments [0] | Trackbacks [0]

CSSでfloatを解除する方法のまとめ

CSS
March 28,2013 12:55 AM
Tag:[CSS, float]
CSSのfloatを解除(クリア)する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが... [記事ページへ]
Comments [0] | Trackbacks [0]

三点リーダが真ん中に表示されない理由

CSS
February 27,2013 1:23 AM
Tag:[CSS]
三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 1.三点リーダとは 説明するまで... [記事ページへ]
Comments [4] | Trackbacks [1]

CSSでoption要素を非表示にするときの不具合について

CSS
November 20,2012 1:55 AM
Tag:[CSS, option, select]
CSSでoption要素を非表示にするときの不具合について紹介します。 タイトルでは「不具合」としていますがブラウザの仕様かもしれません。認... [記事ページへ]
Comments [0] | Trackbacks [0]

レスポンシブWebデザインで3カラムと2カラムを切り替えるためのCSS

CSS
October 25,2012 1:55 AM
Tag:[CSS, MediaQueries]
レスポンシブWebデザインで、Media Queriesを使って3カラムと2カラムを切り替えるためのCSSの設定について紹介します。 1.や... [記事ページへ]
Comments [4] | Trackbacks [0]

CSS拡張メタ言語「LESS」の使い方

CSS
October 3,2012 1:55 AM
Tag:[CSS, JavaScript, LESS]
CSSを効率的に書くための拡張メタ言語「LESS」の使い方を紹介します。 LESS 1.「LESS」でできること 簡単な例として、次のように... [記事ページへ]
Comments [0] | Trackbacks [0]

Google検索結果の横に表示されるスクリーンショットのギザギザをCSSで表示する

CSS
September 18,2012 1:55 AM
Tag:[CSS, Google]
Google検索結果の横に表示されるスクリーンショット上下のギザギザをCSSで表示する方法を紹介します。 1.Google検索結果の横に表示... [記事ページへ]
Comments [0] | Trackbacks [0]

CSS「ボックスモデル」の意味

CSS
September 11,2012 1:55 AM
Tag:[Boxmodel, CSS]
CSSのボックスモデルについて、他の記事とは異なる観点で解説したいと思います。 1.はじめに いきなりですいませんが、CSSの「ボックスモデ... [記事ページへ]
Comments [0] | Trackbacks [0]

CSSでtable幅を設定するためのまとめ

CSS
August 20,2012 12:55 AM
Tag:[CSS, table]
CSSでtable幅を設定するためのまとめです。 以前、tableをレイアウトしたときに表示幅がなかなか思い通りにならず苦労したことがあった... [記事ページへ]
Comments [0] | Trackbacks [0]

いまさら聞けないCSS font-familyのまとめ

CSS
August 13,2012 2:34 AM
Tag:[CSS, font-family]
CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 認識誤り... [記事ページへ]
Comments [0] | Trackbacks [0]

ol要素のstart属性を使わずにCSSで番号を途中から振る方法

CSS
July 18,2012 1:33 AM
Tag:[CSS, ol, start]
ol要素のstart属性を使わずに、CSSで番号を途中から振る方法を紹介します。 番号付きリストで「第10位以降のランキング」など、途中から... [記事ページへ]
Comments [0] | Trackbacks [0]

Google推奨のブラウザレンダリングに関する4つのベストプラクティス

CSS
June 26,2012 12:33 AM
Tag:[CSS, Google, HTML, Performance]
Googleが推奨する、ブラウザレンダリングに関する4つのベストプラクティスについて紹介します。 この記事は「Optimize browse... [記事ページへ]
Comments [0] | Trackbacks [0]

del要素の取り消し線を文字と異なる色にする方法

CSS
June 25,2012 12:03 AM
Tag:[CSS, HTML]
HTMLのdel要素で、取り消し線を文字と異なる色にする方法を紹介します。 変更前 削除したコンテンツ 変更後 削除したコンテンツ 1.de... [記事ページへ]
Comments [0] | Trackbacks [0]

data URI Schemeを使ってHTTPリクエストを削減する

WebSEO
June 12,2012 1:23 AM
Tag:[CSS, HTML, Image, Scheme]
data URI Schemeを使ってHTTPリクエストを削減する方法を紹介します。 1.概略 HTMLで画像を表示する場合、 <im... [記事ページへ]
Comments [0] | Trackbacks [0]

img要素でCSS Spriteする方法

CSS
June 6,2012 11:55 PM
Tag:[CSS, Sprite]
「CSS Sprite」は背景画像などの複数の画像ファイルをひとつの画像にまとめて、画像の中から表示させたい部分の座標をbackground... [記事ページへ]
Comments [0] | Trackbacks [0]

HTMLやCSSでのプロトコル表記(http:、https:)の省略について

HTML(X)HTML
May 11,2012 1:23 AM
Tag:[CSS, HTML]
HTMLやCSSではプロトコル表記(http:、https:)の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べて... [記事ページへ]
Comments [0] | Trackbacks [0]

「a:visited」のプロパティが配色系のものだけに限定された件について

CSS
May 1,2012 1:55 AM
Tag:[]
Webデザインに携わっている方はすでにご存知と思われますが、「a:visited」に設定可能なプロパティが配色系のものだけに限定された件につ... [記事ページへ]
Comments [0] | Trackbacks [0]

CSSでリンクの文字と下線の間隔(スペース)を空ける方法

CSS
March 13,2012 2:55 AM
Tag:[]
CSSでリンクの文字と下線の間隔(スペース)を空ける方法を紹介します。ビギナー向けの内容です。 変更前 変更後 1.リンクの文字と下線の間隔... [記事ページへ]
Comments [0] | Trackbacks [0]

Google Chromeでテーブルのtd要素の高さが2倍になるCSSの不具合について

CSS
March 9,2012 12:55 AM
Tag:[Chrome, CSS]
当ブログのカレンダーをGoogle Chromeで閲覧したとき、テーブルのtd要素の高さが2倍になる事象が発生しましたので、問題点と対処方法... [記事ページへ]
Comments [0] | Trackbacks [0]

Google ChromeとSafariのCSSハック

CSS
February 26,2012 12:55 AM
Tag:[Chrome, CSS, Hack, Safari]
Google ChromeとSafariのCSSハックを紹介します。 CSSハックに用いる文字列は以下です。 @media screen a... [記事ページへ]
Comments [0] | Trackbacks [0]

CSSの整形・圧縮が一瞬で行えるツール「csCSSc」

CSS
February 21,2012 12:55 AM
Tag:[Compress, CSS, Decompress]
CSSの整形・圧縮が一瞬で行えるオンラインツール「csCSSc(Client-side CSS (De)Compressor)」を紹介します... [記事ページへ]
Comments [0] | Trackbacks [0]

CSSでブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法

CSS
January 3,2012 1:23 AM
Tag:[CSS]
ブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法です。ここではCSSを使った方法を紹介します。 動作は主要ブラウザ(IE/FF/... [記事ページへ]
Comments [0] | Trackbacks [0]

CSSで3D画像を実現するサンプルいろいろ

CSS
December 23,2011 2:34 AM
Tag:[CSS, Firefox]
昨日の「Firefox10の新機能について」でも紹介しましたが、CSS 3D Transformの機能を使えば、3D画像をCSS(とHTML... [記事ページへ]
Comments [0] | Trackbacks [0]

CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか

CSS
August 29,2011 1:55 AM
Tag:[Cache, CSS, HTTP, JavaScript]
あちこちのウェブサイトのHTMLソースを見ると、CSSファイルやJSファイルを読み込むlink要素やscript要素のファイル名の末尾に「?... [記事ページへ]
Comments [0] | Trackbacks [0]

CSSでクラスセレクタをくっつけて並べる方法

CSS
June 16,2011 12:06 AM
Tag:[CSS, selector]
クラスセレクタをくっつけて並べることで、特定の要素のスタイルを設定できる方法があまり知られていないようなので、エントリーしておきます。 通常... [記事ページへ]
Comments [0] | Trackbacks [0]

pre要素で折り返しをするためのCSS

CSS
May 14,2011 1:55 AM
Tag:[CSS]
pre要素でソースコードを折り返すためのCSSです。最近は色々なSyntax Highlighterが登場しているので必要ないかもしれません... [記事ページへ]
Comments [0] | Trackbacks [0]

Google Chromeでfloatレイアウトが崩れる件について

CSS
March 2,2011 1:55 AM
Tag:[CSS, GoogleChrome, TroubleShooting]
Google Chromeでfloatレイアウトが崩れる事象が発生しました。 かなりレアケースと思われますが、備忘録として以下に詳細を残して... [記事ページへ]
Comments [4] | Trackbacks [0]

IE8/IE9の「ブラウザーモード」と「ドキュメントモード」のまとめ

CSS
February 7,2011 12:55 AM
Tag:[CSS, IE, IE6, IE7, IE8, IE9]
先日エントリーした「IE6/IE7/IE8/IE9の共存まとめ」で書いたとおり、IE8/IE9の開発者モードには「ブラウザーモード」と「ドキ... [記事ページへ]
Comments [0] | Trackbacks [0]

IE6/IE7/IE8/IE9のCSSハック

CSS
January 24,2011 1:55 AM
Tag:[CSS, IE, IE6, IE7, IE8, IE9]
IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあ... [記事ページへ]
Comments [0] | Trackbacks [1]

ColumnResizerリニューアル

CSS
September 30,2010 2:55 AM
Tag:[CSS, JavaScript, Template, Tool]
当ブログでの配布テンプレートのカラムレイアウトサイズを簡単に変更するためのツール「ColumnResizer」をリニューアルしました。このツ... [記事ページへ]
Comments [0] | Trackbacks [0]

ドロップシャドウつきの画像をセンタリングする

CSS
December 6,2009 3:55 AM
Tag:[Dropshadow, Image]
ドロップシャドウつきの画像をセンタリングする方法を紹介します。 以前紹介した、「CSSで画像に影をつける(ドロップシャドウ)」では、画像のセ... [記事ページへ]
Comments [0] | Trackbacks [0]

CSS で table に斜線を引く方法

CSS
October 26,2009 12:03 AM
Tag:[border, CSS, table]
CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル(クリックすればサンプルページに移動し... [記事ページへ]
Comments [0] | Trackbacks [0]

IE7 で pre 要素が適正に表示されない不具合を修正

CSS
March 29,2009 1:54 AM
Tag:[CSS, CSSHack, IE7]
当サイトでは、ソースコード等を pre 要素(+code 要素)で表示していますが、「1行だけのソースコードを表示している場合、IE7では適... [記事ページへ]
Comments [3] | Trackbacks [0]

YUI(Yahoo! User Interface Library)を利用したドロップダウン式グローバルナビゲーション

サービスYahoo
November 11,2008 1:11 AM
Tag:[CSS, JavaScript, YUI]
YUI(Yahoo! User Interface Library)を利用した、ドロップダウン式グローバルナビゲーションを紹介します。 ドロ... [記事ページへ]
Comments [0] | Trackbacks [1]

CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする

CSS
October 23,2008 1:55 AM
Tag:[CSS]
CSS レイアウトでネガティブマージンを使っていると、一部のモダンブラウザでリンクがクリックできなかったり、マウスでテキストを選択できない状... [記事ページへ]
Comments [0] | Trackbacks [0]

CSS でヘッダーに画像を表示する for Movable Type 4

CSS
September 30,2008 1:55 AM
Tag:[CSS, Image]
以前エントリーした「CSSでタイトルバナーに画像を表示する」の Movable Type 4 版です。 デフォルトテンプレート・配布テンプレ... [記事ページへ]
Comments [6] | Trackbacks [0]

CSSでブログに影をつける(ドロップシャドウ:Movable Type 4.x 配布テンプレート版)

CSS
September 11,2008 1:55 AM
Tag:[CSS, Dropshadow, Template]
CSSでブログの横に影をつける方法です。 以前エントリーした、「CSSでブログに影をつける(ドロップシャドウ)」は、Movable Type... [記事ページへ]
Comments [4] | Trackbacks [0]

Highslide JS でサムネイル画像を拡大表示する(設定方法の変更)

CSS
June 3,2008 2:02 AM
Tag:[CSS, HighSlide, JavaScript]
以前紹介した、「Highslide JS でサムネイル画像を拡大表示する」ですが、あれからバージョンアップが行われ、設定がかなり簡単になって... [記事ページへ]
Comments [0] | Trackbacks [1]

サブカテゴリーリストを定義型リストでマークアップする

Movable Typeカスタマイズカテゴリー
April 23,2008 1:33 AM
Tag:[Category, CSS, MovableType, XHTML]
Movable Type の、2階層のサブカテゴリーリストで、定義型リスト(dl/dt/dd:または定義リスト)によるマークアップを実現する... [記事ページへ]
Comments [0] | Trackbacks [0]

CSS でブログ本文の画像だけをセンタリングする

CSS
April 16,2008 12:30 AM
Tag:[CSS, Image]
ブログのエントリー本文は、一般的に左寄せで表示しますが、「本文中の画像だけをセンタリングしたい場合はどうすればいいですか?」というご質問を頂... [記事ページへ]
Comments [2] | Trackbacks [3]

CSS の画像置換で画像にリンクを設定する

CSS
November 21,2007 1:01 AM
Tag:[CSS]
「画像置換」とは、ヘッダ部分にあるブログ名などのテキストを画像に置き換える手法で、文書構造やSEOを損ねないための複数のテクニックが紹介され... [記事ページへ]
Comments [7] | Trackbacks [1]

XREA のバナー広告を固定レイアウトのヘッダに表示する

CSS
July 18,2007 1:53 AM
Tag:[CSS, Customize, Template]
XREA を無料で利用する場合、表示が義務付けられている広告をヘッダ(タイトルバナー)にきれいに埋め込んで表示する方法です。質問を頂きました... [記事ページへ]
Comments [5] | Trackbacks [0]

Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。

書籍Web
July 11,2007 1:35 AM
Tag:[Amazon, Book, CSS, XHTML]
出遅れましたが、インプレスより XHTML+CSS 本が出版されています。 Web標準XHTML+CSSデザイン クリエイターが身につけて... [記事ページへ]
Comments [6] | Trackbacks [0]

グローバルナビゲーション(その1:基本スタイル)

CSS
June 28,2007 2:11 AM
Tag:[CSS, NavigationBar]
最近すっかりオーソドックスになった、順序なしリスト(ul/li)を用いたグローバルナビゲーションを紹介します。 2年ほど前に書いた「ナビゲー... [記事ページへ]
Comments [7] | Trackbacks [4]

RSS フィードにスタイルシート(CSS)を適用する

WebRSS
May 1,2007 3:21 AM
Tag:[Atom, CSS, RSS, xml-stylesheet]
ブログで配信する RSS/Atom フィード(index.xml や atom.xml)にスタイルシートを適用する方法です。 ブログを始めて... [記事ページへ]
Comments [0] | Trackbacks [0]

「追記文章の折りたたみ 2.0」でIE7の不具合を解消する

CSS
April 19,2007 1:33 AM
Tag:[CSS, JavaScript, scriptaculous]
「追記文章の折りたたみ 2.0」というカスタマイズで scriptaculous の Effect.BlindDown および Effect... [記事ページへ]
Comments [2] | Trackbacks [0]

サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する

CSS
March 1,2007 12:17 AM
Tag:[Category, CSS, Tree]
先日エントリーした「CSS 変更(2007.02.11)」でお知らせした通り、サブカテゴリーリストの親カテゴリーだけ異なる画像を表示させるカ... [記事ページへ]
Comments [29] | Trackbacks [2]

公開テンプレートにフッタを追加する(2カラム版)

CSS
February 28,2007 1:01 AM
Tag:[Footer, Template]
公開テンプレートの2カラムレイアウトの下に著作権表示等のフッタを追加するためのカスタマイズです。以前、3カラムレイアウトにフッタを追加する「... [記事ページへ]
Comments [2] | Trackbacks [0]

CSS の after 擬似要素で回り込みを解除する

CSS
February 14,2007 12:30 AM
Tag:[CSS]
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します(通常の解除方法も併... [記事ページへ]
Comments [8] | Trackbacks [2]

テンプレートカスタマイズ支援ツール Column Resizer

CSS
February 13,2007 12:55 AM
Tag:[CSS, JavaScript, Template, Tool]
先日紹介した Slider を利用して、配布テンプレートの各カラムをダイナミックにリサイズできるツールを作ってみました。 このツールを利用す... [記事ページへ]
Comments [2] | Trackbacks [0]

サイドバーのタイトル背景をカラム幅にあわせて表示する

CSS
January 14,2007 2:39 AM
Tag:[CSS, Customize, Template]
公開テンプレートの固定レイアウトで、サイドバータイトル部分の背景をカラム幅に合わせて表示する方法ごを紹介します。 本カスタマイズはテンプレー... [記事ページへ]
Comments [21] | Trackbacks [0]

公開テンプレートのサイドバーのカラム幅を変更する

CSS
December 20,2006 1:36 AM
Tag:[CSS, Customize, Template]
公開テンプレートのサイドバーのカラム幅の変更方法についてご質問を頂いておりますので、本エントリーで変更方法をご紹介致します。 CSSは公開し... [記事ページへ]
Comments [21] | Trackbacks [0]

JavaScript 不要な月別アーカイブの年別ツリー化+折りたたみ

Movable Typeカスタマイズ月別アーカイブ
December 18,2006 12:39 AM
Tag:[Customize, MovableType, Tree]
月別アーカイブのリスト表示は、Movable Type のデフォルト機能では全ての年月を連続で表示することしかできませんが、プラグインを利用... [記事ページへ]
Comments [37] | Trackbacks [6]

CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方

CSS
November 30,2006 2:20 AM
Tag:[CSS, Photoshop]
「CSSでブログに影をつける(ドロップシャドウ)」でドロップシャドウを背景画像として設定する方法を説明しましたが、肝心の背景画像の作り方で悩... [記事ページへ]
Comments [10] | Trackbacks [1]

CSSでブログに影をつける(ドロップシャドウ)

CSS
November 29,2006 1:55 AM
Tag:[CSS, Dropshadow, Template]
ブログのサイドバー部分に影(ドロップシャドウ)を作成するカスタマイズを紹介します。 ブログを閲覧されている方なら、1度はこのドロップシャドウ... [記事ページへ]
Comments [46] | Trackbacks [1]

IE7 の CSS ハック

CSS
November 17,2006 1:50 AM
Tag:[CSS, Hack]
「IE7 で閲覧すると表示が異なるのですが」というご質問を頂いたので、CSS ハックを利用して、IE7 のスタイルのみを変更する方法を紹介し... [記事ページへ]
Comments [3] | Trackbacks [10]

CSSでブロックレベル要素をセンタリングする

CSS
October 24,2006 12:38 AM
Tag:[CSS]
インライン要素をセンタリングする場合は、その要素のCSSで text-align: center; という text-align プロパティ... [記事ページへ]
Comments [4] | Trackbacks [3]

3カラムレイアウトをナビゲーションバー部分に適用する

CSS
October 23,2006 1:17 AM
Tag:[CSS]
タイトルバナー下にナビゲーションバーを設置している場合、その左右に別の部品を並べて配置したい時のテクニックです。 ここでは、以前紹介した「ナ... [記事ページへ]
Comments [4] | Trackbacks [1]

CSS の background 画像にツールチップを表示するテクニック

CSS
September 13,2006 1:00 AM
Tag:[CSS]
CSS の background プロパティで設定した画像にマウスをポイントした時、img タグに title 属性(または alt 属性)... [記事ページへ]
Comments [0] | Trackbacks [1]

リキッドレイアウトのサイドバー表示位置を補正する

CSS
July 27,2006 12:30 AM
Tag:[CSS, Template]
公開テンプレートのリキッドレイアウトでサイドバーの表示開始位置を補正するカスタマイズです。 1.概要 左のスクリーンショットは当サイトで公開... [記事ページへ]
Comments [4] | Trackbacks [1]

CSS のフォントサイズ指定が table に反映されない問題

CSS
July 24,2006 2:12 AM
Tag:[CSS]
CSS で px 指定のフォントサイズ等を設定している場合、IE.5.5/IE6.0 ではその子要素として記述された table(th/td... [記事ページへ]
Comments [8] | Trackbacks [4]

CSSでタイトルバナーに画像を表示する

CSS
July 21,2006 1:31 AM
Tag:[CSS, Image]
ブログの上部タイトル部分の背景に画像を表示するカスタマイズです。CSS のbackground プロパティを利用することで、スクリーンショッ... [記事ページへ]
Comments [57] | Trackbacks [2]

CSSでエントリータイトルに画像を表示する

CSS
May 26,2006 1:38 AM
Tag:[CSS]
エントリータイトルの先頭に画像に表示する方法を紹介します。ここでは公開テンプレート(Movable Type)を用いた説明になりますが、HT... [記事ページへ]
Comments [13] | Trackbacks [1]

CSS+JavaScript によるカラムレイアウト切り替え(cookieによる状態保持)

Movable Typeテンプレート
May 18,2006 1:38 AM
Tag:[CSS, Customize, JavaScript, Template]
CSS+JavaScript によるカラムレイアウト切り替えでは基本的な切り替え方法を紹介しましたが、このエントリーでは cookie を用... [記事ページへ]
Comments [0] | Trackbacks [0]

CSS+JavaScript によるカラムレイアウト切り替え

Movable Typeテンプレート
May 17,2006 12:17 AM
Tag:[CSS, Customize, JavaScript, Template]
公開テンプレート(Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ)でカラムレイアウトをリアルタイ... [記事ページへ]
Comments [5] | Trackbacks [3]

標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する

CSS
March 11,2006 1:55 AM
Tag:[CSS, DOCTYPE, Dropshadow, Image]
以前エントリーした「CSSで画像に影をつける(ドロップシャドウ)」で、IEで画像枠が表示されない不具合についての対処方法です。 対処すること... [記事ページへ]
Comments [14] | Trackbacks [8]

エントリーを透過して背景画像を薄く表示する

CSS
March 6,2006 1:10 AM
Tag:[CSS, Image]
背景画像を固定するのエントリーで背景画像を透過させるカスタマイズを紹介しましたが、背景画像を薄く透過する方法についてご質問を頂きましたので、... [記事ページへ]
Comments [3] | Trackbacks [1]

中央カラムとサイドバーで異なる背景画像を表示する

CSS
February 7,2006 11:54 PM
Tag:[CSS, Customize, Template]
先日、リキッドレイアウトの背景色を変更するというカスタマイズを紹介しましたが、本エントリーは中央カラムとサイドバーで異なる背景画像を表示する... [記事ページへ]
Comments [5] | Trackbacks [0]

CSSで画像に影をつける(ドロップシャドウ)

CSS
January 30,2006 11:52 PM
Tag:[CSS, Dropshadow, Image]
CSSを利用して画像に影をつける(ドロップシャドウ)カスタマイズです。ご質問を頂いたのでこちらのエントリーで紹介致します。下のスクリーンショ... [記事ページへ]
Comments [36] | Trackbacks [10]

背景画像を固定する

CSS
January 20,2006 11:52 PM
Tag:[CSS, Image]
背景画像が固定されているサイトを時々みかけるのですが、ご質問を頂いたので本エントリーにてカスタマイズ方法をご紹介致します。今回は順を追ってサ... [記事ページへ]
Comments [8] | Trackbacks [0]

本文に引用をつける

CSS
October 20,2005 11:59 PM
Tag:[blockquote, CSS, quotetitle]
他のブログ記事や情報を引用する場合に、 これは引用文です という囲い枠を使っているのを頻繁に見かけると思います。これは「引用」という手法で、... [記事ページへ]
Comments [6] | Trackbacks [6]

スタイルシート切り替え(プルダウンメニュー版)

CSS
October 15,2005 11:38 PM
Tag:[Customize, MovableType, PulldownMenu, Stylesheet]
スタイルシート切り替えをプルダウンメニューで行う方法です。画像のようにプルダウンメニューに表示されたスタイルを選択すると、選択した時点でスタ... [記事ページへ]
Comments [2] | Trackbacks [1]

印刷用スタイルシート

CSS
September 20,2005 9:20 PM
Tag:[CSS, Customize, Print]
印刷用スタイルシートにより出力の最適化を行うカスタマイズです。 左上の画像は通常のブラウザによる表示で、同じページを印刷すると左下のような出... [記事ページへ]
Comments [7] | Trackbacks [2]

float 3カラムの折りたたみによるCSSの不具合

CSS
July 19,2005 11:58 PM
Tag:[CSS, Folding, Mozilla, Problem]
リニューアルで Mozzila 系のブラウザに中央カラムのコンテンツ折りたたみを導入しなかった理由です。 Netscape または Fire... [記事ページへ]
Comments [0] | Trackbacks [0]

3カラム可変と3カラム固定を切り替える

Movable Typeテンプレート
July 13,2005 11:51 PM
Tag:[CSS, Customize, StyleSwitcher, Template]
当サイトで公開している3カラムテンプレートは可変と固定の2種類がありますが、これをスタイルシート切替を用いて瞬時に切り替えるカスタマイズです... [記事ページへ]
Comments [22] | Trackbacks [5]

CSSで画像を半透明にする

CSS
July 1,2005 11:59 PM
Tag:[Background, CSS, Customize, Opacity, Semitransparent]
CSSで画像等を半透明にして表示する方法を紹介します。 1.サンプル まずはサンプルをご覧ください。 通常の表示 半透明の表示 半透明の表示... [記事ページへ]
Comments [8] | Trackbacks [1]

アンダースコア・ハック

CSS
June 25,2005 11:57 PM
Tag:[CSS, CSSHack, Underscore]
CSSで設定したプロパティ(width/font-color等)の前にアンダースコア "_" を付与すると、WinIEではそれを正常なプロパ... [記事ページへ]
Comments [8] | Trackbacks [8]

html 要素に lang 属性・xml:lang 属性を追加

CSS
June 20,2005 11:59 PM
Tag:[lang, WebStandards, XHTML, xmlns]
XHTML では html 要素に対し、拡張要素である xmlns 属性が続きます。 <html xmlns="http://www.... [記事ページへ]
Comments [0] | Trackbacks [0]

リストマークの画像のずれを修正する

CSS
June 14,2005 11:59 PM
Tag:[Background, CSS, list-style-image]
サイドバーメニュー等の先頭のマーク(マーカー)表示に画像を使われている方は少なくないと思いますが、img タグをテンプレートに直接記述するの... [記事ページへ]
Comments [13] | Trackbacks [2]

ナビゲーションバー・シンプルタイプ(その3:クリック時のロールオーバーを追加)

CSS
April 27,2005 11:11 PM
Tag:[Customize, MovableType, NavigationBar, Rollover]
前回までのカスタマイズで、マウス・カーソルをリンクにポイントした時のロールオーバーを、ページ遷移しても保持するところまでできましたが、リンク... [記事ページへ]
Comments [8] | Trackbacks [0]

ナビゲーションバー・シンプルタイプ(その2:クリックしたメニューのロールオーバーを保持する)

CSS
April 26,2005 8:45 PM
Tag:[Customize, MovableType, NavigationBar, Rollover]
「その2」は、ナビゲーションバーにあるメニューをクリックした時、ジャンプしたページでクリックされたメニューのロールオーバーを保持、つまり選択... [記事ページへ]
Comments [17] | Trackbacks [3]

ナビゲーションバー・シンプルタイプ(その1:基本スタイル)

CSS
April 25,2005 11:59 PM
Tag:[Customize, MovableType, NavigationBar, Rollover]
最近ご近所のサイトでカレンダーやメニューの横配置が増えてきましたので、改めてナビゲーションバー(メニューバー)を作ってみました。まずは di... [記事ページへ]
Comments [44] | Trackbacks [10]

IE5.xでのボックス表示を修正する

CSS
March 30,2005 11:59 PM
Tag:[CSS, Hack, IE]
IE5.x(Netscape4.xも)やIE6の後方互換モードではCSSの width, padding, border の解釈にバグがある... [記事ページへ]
Comments [5] | Trackbacks [1]

枠線(border)の指定

CSS
November 15,2004 1:00 PM
Tag:[]
ご質問を頂きましたので、テンプレートで提供しているサイドメニュータイトルや本文のblockquoteタグで用いている枠線のスタイルシート指定... [記事ページへ]
Comments [6] | Trackbacks [3]

リンク画像の枠線を消す

CSS
November 11,2004 1:01 AM
Tag:[CSS]
バナー等の画像にリンクを設定すると青い枠が表示されます。これをCSSを使って消去する方法を何通りかご紹介します。 消去前 消去後 1.スタイ... [記事ページへ]
Comments [14] | Trackbacks [8]

カレンダーの本日に枠線を表示

CSS
October 5,2004 12:40 PM
Tag:[]
カレンダーの本日の日付を強調表示していたのですが、我楽さんの今さら普通のカレンダー設置。を参考に、日付に枠線を表示するよう変更してみました。... [記事ページへ]
Comments [25] | Trackbacks [11]

CSSでリンクをマウスオン(マウスオーバー)時にずらす

CSS
September 29,2004 12:15 AM
Tag:[]
CSSでリンクをマウスオン(マウスオーバー)時にずらすカスタマイズを紹介します。 1.概要 通常、リンクにマウスをポイントすると、テキストリ... [記事ページへ]
Comments [8] | Trackbacks [11]

スタイルシート切り替え

CSS
September 7,2004 12:02 AM
Tag:[]
メイン各ページのスタイルシートを右上のリンクで切り替えられるようにしました。スタイルシートを切り替えるとページ全体のデザインをダイナミックに... [記事ページへ]
Comments [26] | Trackbacks [17]

リンクのアンダーライン一部削除

CSS
September 6,2004 1:38 AM
Tag:[]
なんとなく表示が煩わしい感じがすると思ったらリンクのアンダーラインが全部出っ放しでした(早く気がつけって?)。で全部消したらすごい違和感があ... [記事ページへ]
Comments [2] | Trackbacks [1]

CSSでフォーム要素の空白を除去する方法

CSS
July 9,2004 12:12 AM
Tag:[]
以前テーブルタグを用いてフォーム前後の空白を除去しましたが、以下のスタイルシートを追加すれば同様の効果がありました。 form { &nbs... [記事ページへ]
Comments [0] | Trackbacks [0]