サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
www.webbibo.com
商品を並べたり、フォトギャラリーを作る際に、次のようにコードを書くと思います。 HTMLコード <div class="box-row"> <dl class="box"> <dt><img src="orange.jpg" width="120" height="100" /></dt> <dd>商品：オレンジ1</dd> <dd>数量：3kg</dd> <dd>価格：\1,575（税込）</dd> </dl> <dl class="box"> <dt><img src="orange.jpg" width="120" height="100" /></dt> <dd>商品：オレンジ2</dd> <dd>数量：3kg</dd> <dd>価格：\1,575（税込）</dd> </dl> </div> <div class="box-row"> <dl class="box"> <dt><i
inputボタンに type="image" を使って送信ボタンを作成することがあると思いますが、こうするとそのボタンのx,y座標がGET値で送信されます。GET値で送りたいけど、x,y座標は表示したくない場合はスタイルシートを使ってinputボタンの背景に画像を指定します。 type="image"だとURLの後に座標の値がくっつく。 <form> <input type="image" alt="Sample" width="100" height="30" src="http://www.webbibo.com/assets/images/tips/image_btn.png" /> </form> このボタンを押してみてください。アドレス欄のURLが座標の値がついたURLになります。 CSSで解決 <form> <input type="submit" value="" id="i
ご使用のブラウザのデフォルトフォントサイズを取得 Javascriptでフォントサイズを取得するスクリプトを作ってみました。こちらのページで今お使いのブラウザのデフォルトフォントサイズを知ることができます。ただ、動作は不安定です。Javascriptで取得したサイズと上記表のフォントサイズで、食い違ってる部分もあります（Safariとか）。なぜサイズが違うのかわかる方いましたら、ご連絡ください。多分、Javascriptが上手く動作していないんだろうなぁ・・・ →ブラウザのデフォルトフォントサイズを取得
注意書きや箇条書きなど段落の1行目に見出し項目がある文章で、項目を目立たせるために、2行目以降を字下げすることがあります。これを簡単に実現する方法です。 注意書きとか箇条書きなど、非常に使う場面が多いと思うのでので、かなり役立つテクニックです。ていうか、このテクニック皆さん知ってますよね。。。一応、CSS初心者の方向けということで載せておきます。 HTMLコード <ul> <li>※ああああああああああああああああああああああああああああああああああああ</li> <li>※いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</li> <li>※うううううううううううううううううううううううううううううううううううううううう</li> </ul> CSSコード ul { list-style: none; width: 250px; font-size: 0.8em; lin
画像の下に隙間ができるサンプル 画像をリストで並べた場合、画像の下に隙間が生じます。この隙間を消す方法。解決策は以下のとおり。 HTMLコード <ul> <li><img src="/images/tips/list_img_space.jpg" alt="" /></li> <li><img src="/images/tips/list_img_space.jpg" alt="" /></li> <li><img src="/images/tips/list_img_space.jpg" alt="" /></li> </ul> CSSコード ul { list-style-type: none; } li img { vertical-align: bottom; } →隙間を消したサンプル リストの中のimgタグにvertical-align: bottom;を指定することで解決でき
CSSのa:hoverを用いて背景画像を切り替えると、画像がちらついたり砂時計のマークが表示されたりします。これはインターネットオプションでインターネット一時ファイルの設定を「Webサイトを表示するたびに確認する」としている方に起こりやすい現象なんですが、このような設定をしている方にも画像をちらつかせずロールオーバーを実現する方法を紹介します。 HTML記述 <ul id="menu"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> CSS記述 ul#menu { list-style-type: none; margin: 0; padding: 0; width: 360px; } ul#menu li { float: left; m
<a>タグの中に<img>タグを入れたら画像の下に下線が付いてしまいます。アフォーダンスを応用したボタンや明らかにクリックできるバナーなどに下線がつくのは好ましくないので、この下線を消す方法を紹介します。 HTMLを記述 <p><a href="http://www.webbibo.com/">CSSのTipsサイト「webbibo」<img src="./images/img_underline_01.png" /></a>でCSSのテクニックを公開しています。個人の備忘録として初めましたが、自分と同じCSSに悩まされた人にも解決していただきたく、このようなページを設けて公開しています。</p> CSSを記述 a img { margin: 0px 0px -6px 0px; border: 3px solid #FFFFFF; } →画像に付いた下線を消したサンプル 画像の周りに背景色
通常、table要素の属性「width」が定められてない場合、列の幅は内容に応じて決定され表示されますが、表の内容がすべて読み込まれてから列の幅が決められるので、表全体が表示されるのに時間がかかってしまいます。 table-layout: fixed;を指定すると、表の1行目が読み込まれた時点で列幅が決定されるので、表のレンダリング速度を向上させることができます。 CSS記述 table { width: 450px; border: 1px solid #999999; border-collapse: collapse; table-layout: fixed; font-size: 0.8em; line-height: 1.3; } th.property { width: 80px; } th,td { background: #FFEEEE; border: 1px soli
imgタグにpositionを利用して背景画像を敷いている様に見せています。幅100%を指定することで画像も拡大・縮小します。
ブラウザごとに不透明度の指定方法が違うのですが、コリスさのページで透明化のスタイルシートについてまとめたものを紹介されていましたので、メモしておきます。 不透明度のスタイルシート指定方法 pan style="color: #336699;"> selector { opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */ filter: alpha(opacity=75); /* IE lt 8 */ -ms-filter: "alpha(opacity=75)"; /* IE 8 */ -khtml-opacity: .75; /* Safari 1.x */ -moz-opacity: .75; /* FF lt 1.5, Netscape */ }
ナビゲーションメニュー等を作る際、CSSのa:hoverを用いて背景画像を切り替えますが、その背景画像にマウスカーソル（ポインタ）をあわせると、画像がちらついたり砂時計のマークが表示されたりします。 ちらつきのサンプルを見る これは「background flickr」っと呼ばれるIE6限定のバグで、IE6で表示するとロールオーバー時に毎回画像を読み込むみたいです。なので大きいファイルサイズの画像になると動作遅延が起こり砂時計のマークが表示されたりします。まったく迷惑な話です。。。解決策は以下の2通りです。 CSSで解消 html { filter: expression(document.execCommand("BackgroundImageCache", false, true)); } 「expression()」は「ダイナミックプロパティ」というもので、CSS中でJavaScri
会社概要のページ・個人のプロフィールページ・Q&Aなどにdl,dt,ddを用いた定義リストを良く使います。この定義リストは思うように横並びにならないんですよね。 そこで、試しにいくつかサンプルを作ってみましたので参考にしてみて下さい。個人的にはサンプル4・5がお薦めです。 サンプル1 （borderを使った縦ライン） dtのテキスト量が多い場合・・・縦ボーダーが途切れる。FireFoxだとddはdtの高さに合わせてくれない。 ddのテキスト量が多い場合・・・縦ボーダーが途切れる。dtはddの高さに合わせてくれる。 →サンプル 1 サンプル2 （backgroundを使った縦ライン） dtのテキスト量が多い場合・・・縦ボーダーは途切れないが、FireFoxだとddはdtの高さに合わせてくれない。 ddのテキスト量が多い場合・・・縦ボーダーは途切れない。dtはddの高さに合わせてくれる。
10.10.30テキストにグラデーション効果をつける テキストにグラデーション効果をつける方法。 タグ： CSS テキスト フォント10.10.30画像の周りに写真風の枠をつける 画像の周りに写真風の枠をつけるテクニックです。 タグ： CSS イメージ 画像10.10.30サイズの異なる文字が上下の行に重なるのを防ぐ 同じ行内にサイズの違う文字が含まれてた際に、文字が上下の行に重なるのを防ぐ方法。 タグ： CSS テキスト フォント フォントサイズ10.10.30IE6以下で透過PNGを使用する（JavaScript使用） JavaScriptを使って透過PNGをIE6以下でも使えるようにするちょっとしたテクニックを紹介します。 タグ： CSS IE6 イメージ 画像 透過10.10.30フォント100.01％指定でフォントサイズの継承問題を解決 フォントサイズをemで指定した場合、IEで
リストタグを使用してメニューを作ることは良くあると思いますが、この時にIEだけに変な隙間が入る事があります。Firefox、Safari等で見るとちゃんと隙間なく詰まってるのに。。。またIE様のバグですかぁ。と憤る方もいると思います。 これはmarginやpaddingの問題でなく、IEではリスト内のインライン要素をブロック化した場合、line-heightの解釈がおかしくなるみたいです。 →メニューの間に隙間ができるサンプル 解決策は以下のとおり。 HTMLコード <ul> <li><a href="#">メニュー01</a></li> <li><a href="#">メニュー02</a></li> <li><a href="#">メニュー03</a></li> </ul> CSSコード ul { list-style-type: none; width: 300px; } a { d
JavaScriptで効果を与えたとき、別ページに飛んだあとブラウザの戻るボタンで、その効果が残っている時の対処法です。 例えば、画像にマウスオーバー処理を与えます。その画像をクリックし、別ページに飛んだあとブラウザの戻るボタンで戻るとマウスオーバー時の画像がそのまま残ってしまいます（Firefox、Safariのみ。IEは大丈夫。）これをどうやって解決するかというと window.onunloadを使ってキャッシュを無効に 上記の様な現象が起こるのはブラウザのキャッシュのせいで、これを無効にすればいいのです。 FirefoxやSafariはonunloadイベントがあるとキャッシュしないみたいなので window.onunload=function(){} と書けばOK。 試してみたい方はこのコードを使ってみてください。 <body onload="alert('test');"> と書
SEO的に検索エンジンに読ませたい内容（3カラムの場合、たいがい真ん中のメインコンテンツ）をHTMLの先頭にもっていきたいところですが、どうしても左サイドと真ん中ボックスを囲む<div>タグを1回使わないと真ん中のコンテンツを先頭にもっていくことができません。 <div id="containar"> <div id="header">header</div> <!-- wrapを1回挟まないとcontentsを先頭にもっていけない --> <div id="wrap"> <div id="contents">contents</div> <div id="sideL">sideL</div> </div> <div id="sideR">sideR</div> <div id="footer">footer</div> </div> ですが、ネガティブマージンを使えばその<div>タグを
タイトルやボタンの背景にグラデーションを施したいとき、グラデーションの画像を用意して、それを背景に敷くと思います。ただ、線形グラデーションのような単純なものなら、画像を使わずスタイルシートだけで表現することができます。一応メモとして載せておきますが、使える方法かどうかは個人の判断に任せます。-webkit-gradientの方法は各サイトで取り上げられているCSS3の注目の方法なので覚えておいても損はないかと思います。 各ブラウザで表現できるCSSグラデーション方法の一覧表 左項目のボックスにグラデーションがかかっていたら、実際に適用されている証拠です。 6/7 8 2/3 9.5 4 2 filterで グラデーション
Firefoxで印刷プレビューした時、1ページ目は正常に表示されるのですが、2ページ目以降、ページが切れて表示されない現象があります。（実際に印刷しても1ページしか印刷されませんでした。） この現象を調べた結果、bodyタグに指定したoverflow: auto;に原因があることが分かりました。 どうやら、この現象はMozilla Firefoxや、Netscape7.1などのMozilla Gecko系のブラウザで発生しているバグみたいです。IEやOperaでは問題なく消えずに改ページしてくれます。 解決方法は、プリント用CSSにoverflow: visibleを指定すれば問題ないと思います。@media printで指定しても構いません。 CSSコード ＠media print { body { overflow: visible !important; } } ※このソースをその
人によって様々な書き方があるCSSプロパティの順番。今回は参考になりそうなサンプルを紹介します。 「CSSプロパティの記述順序 - かたつむりくんのWWW」で紹介されていました分かりやすくキレイにまとまったサンプルです。Mozillaの順序をベースに、W3Cの仕様書（CSS2 Specification）と「Web標準の教科」の順番をミックスしたものらしいです。 CSSプロパティの記述の順番 1.表示や配置など「視覚整形モデル」に関するプロパティ display list-style** 1. list-style-type 2. list-style-image 3. list-style-position 4. marker-offset（CSS2.1勧告候補では削除） position** 1. top 2. right 3. bottom 4. left float clear z
タイトルだけ見ると、おーっと驚くようなテクニックですけど、実際はbackground-imgではなくimgタグを使ってるんですよね。なかなかこのテクニックを使う機会は無いと思うので、こんなテクニックもあるんだぁーっ、へぇーって思って頂けるぐらいで、十分です。では、やり方を。 HTMLを記述 <img src="bg_dimension.jpg" alt="" id="bg-img" /> <p id="text">imgタグにpositionを利用して背景画像を敷いている様に見せています。幅100%を指定することで画像も拡大・縮小します。</p> CSSを記述 body { overflow: hidden; } #bg-img { width: 100%; position: absolute; top: 0; left: 0; } #text { background: url(ima
よく使う正規表現例 メールアドレスを検索 例1：[\w.-]+@[\w.-]+ 例2：[\w\d_-]+@[\w\d_-]+\.[\w\d._-]+ 例3：[a-zA-Z0-9!$&*.=^`|~#%'+\/?_{}-]+@([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,4} ※例3はメールアドレスを厳しくチェックする場合 URLを検索 (\S+)://([^:/]+)(:(\d+))?(/[^#\s]*)(#(\S+))? IPアドレスを検索 (\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3}) 郵便番号を検索 \d{3}-\d{4} [ ]で囲まれた文字列を検索 \[[^\[]*?\] HTMLタグを検索 <("[^"]*"|'[^']*'|[^'">])*> 正規表現を使うにあたって注意すること new RegExp()の引数には正規表
IE6はmin-heightが使えないのですが、Javascriptを使わず、CSSだけを使って簡単にmin-heightを実現する方法がありますので、ご紹介します。 min-widthを指定したい場合は、「IE6とモダンブラウザにmin-widthを疑似的に指定する方法」をご覧ください。 HTMLコード <div>テキストテキストテキストテキスト</div> 今までは下記のようなCSSハックを使ってmin-heightを実現してきました。 今までのmin-heightを実現させる方法 div { /*全ブラウザに適用*/ height: 150px; } html>body div { /*モダンブラウザに適用*/ min-height: 150px; height: auto; } ですが、もっとスマートに簡単なコードで実現できる方法を紹介します。 スマートに簡単なコードで実現させる方
「画像を使わずにCSSだけで角丸を作る方法、PART1」では、HTMLタグを何個にも重ねて角丸を作る方法でしたが、今回は角丸用のCSSプロパティを使って実現する方法です。 CSSで角丸 下記のコードだけで実現できます。 div { border-radius: 10px; /* CSS3草案 */ -webkit-border-radius: 10px; /* Safari,Google Chrome用 */ -moz-border-radius: 10px; /* Firefox用 */ } いろんな角丸を試してみた サンプル 大変便利なborder-radiusですが、このプロパティはWebkit系(Safari、Chrome)とGecko系(Firefox)のみにしか適用されません。IEやOperaにも実装させるならJavaScript等を使用します。 JavaScriptで角丸 「
ページを印刷すると自分の意図しない箇所で途切れてしまう時、page-break-beforeやpage-break-afterを使って、印刷時の改ページ部分を制御します。
プロパティレベルで使うCSSハックを一覧にしてみました。 CSS Validation Serviceには全て通りませんので、検証にひっかからないハックを使いたいと思っている方は、「セレクタでのCSSハック一覧表」をご覧下さい。また、「Firefoxのバージョン別CSSハック一覧表」も載せたので良かったら、ご覧ください。 更新情報 ・09/05/21 対象ブラウザをSafari2からSafari3に変えました。 ・09/05/18 IE8正式版の検証をしました。 「プロパティ：値」レベルのCSSハック （invalid）
Firefoxのバージョン別のCSSハック一覧表です。他のブラウザのCSSハックが知りたい場合は、 「セレクタでのCSSハック一覧表」、「プロパティでのCSSハック一覧表」をご覧ください。
contentプロパティを使って、項目の前に「Q.」「A.」を挿入 まずは、HTMLを記述 <dl id="faq"> <dt>質問</dt> <dd>テキストテキスト</dd> <dd>テキストテキスト</dd> <dt>質問</dt> <dd>テキストテキスト</dd> <dd>テキストテキスト</dd> <dt>質問</dt> <dd>テキストテキスト</dd> <dd>テキストテキスト</dd> </dl> 次に、項目の前に「Q.」を挿入するCSS（スタイルシート）を記述します。 <dt>タグにcounter-incrementを指定。任意の値（今回はquestion）を付けます。:before疑似要素を使ってcontent: counter();を指定します。 #qa dt { counter-increment: question; } #qa dt:before { cont
CSSでレイアウトして、フッターを設置する際、コンテンツの量が少ないページの場合、フッターが画面の下から離れてしまいます。そこでフッターを画面下部に固定する方法を使います。 ただ、他サイトで色々な方法が載っていますがOpera 9.51だとレイアウトが崩れることがわかりました。 まずは下記ソースをご覧ください。 HTMLコード <div id="container"> <div id="header">ヘッダー</div> <div id="contents"> <h1>タイトル</h1> <p>コンテンツ</p> </div> <div id="footer"><p>フッター</p></div> </div> CSSコード * { margin: 0; padding: 0; } html,body { height: 100%; background-color: #222222; t
<blockquote>タグでの引用をオシャレに表示するCSSサンプルです。 <blockquote>タグの子要素にはブロックレベルの要素を XHTML 1.0 Strict記述の場合、<blockquote>タグの直下にはインライン要素（spanとか）は置けないので、記述するときは大体このようなHTMLになると思います。（XHTML 1.0 Transitional記述はインラインを使ってもいいですけど、Strictに合わせたほうが何かと都合がいいかと） <blockquote> <p>アメイジング・グレイスは、ジョン・ニュートンの作詞による賛美歌である。特にアメリカで愛唱され、またバグパイプでも演奏される。"grace"とは「神の恵み」「恩寵」の意。</p> </blockquote> 文字量によって画像の位置が変わるサンプル <p>タグをインラインにすれば、文字量によって画像の位置が
次のページ
このページを最初にブックマークしてみませんか？
『http://www.webbibo.com/』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
