サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Nintendo Direct
webbibo.com
タイトルだけ見ると、おーっと驚くようなテクニックですけど、実際は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
ページを印刷すると自分の意図しない箇所で途切れてしまう時ってありませんか?CSS(スタイルシート)を使うと、改ページして欲しい箇所、または改ページして欲しくない箇所を指定することができます。 印刷時の改ページに関するプロパティ 改ページに関するCSS(スタイルシート)は下記のとおりです。 対象セレクタ
タイトルやボタンの背景にグラデーションを施したいとき、グラデーションの画像を用意して、それを背景に敷くと思います。ただ、線形グラデーションのような単純なものなら、画像を使わずスタイルシートだけで表現するのもあり・・・かな?一応、メモとして載せておきます。 各ブラウザで表現できるCSSグラデーション方法の一覧表 左項目のボックスにグラデーションがかかっていたら、実際に適用されている証拠です。 6/7 8 2/3 9.5 4 2 filterで グラデーション
/* CSS(スタイルシート)に関する知識・テクニックなどの備忘録 */ 文字サイズ 大 中 小 現在のページ: HOME » CSS フォーム » ページの文字コードとは違う任意の文字コードをformから送信する方法 Google検索や楽天検索などの検索窓を設置したとき、設置したページの文字コードと違う文字コードで検索キーワードを送らないといけない場合(例:UTF-8の設置ページで、EUC-JPの検索キーワードを送る場合)、少し面倒な処理が必要なんですね。 Googleへ送信する場合は文字列(引数)に &ie=UTF-8 を付加すればいいので、今回は楽天で試してみます。あ、今回はCSSに一切触れませんので、あしからず。 普通にformを設置したら、キーワードが文字化けする。 設置ページの文字コードと検索先の文字コードが異なるので、上手く検索できません。 <fo
/* CSS(スタイルシート)に関する知識・テクニックなどの備忘録 */ 文字サイズ 大 中 小 現在のページ: HOME » CSS レイアウト・ボックス » floatを使わずにinline-blockで横並びにする方法 floatを使ってボックスを横並びにする場合、その中で高さが違うボックスが混ぜっていると、そこでレイアウトが崩れてしまいます。ブログやCMSなど自動的にボックスを生成するとき、高さの違うボックスがでてくる場合があるので、この方法を知っておくと便利だと思います。 floatで横並びにするとレイアウトが崩れる場合がある 先述しましたが、floatで横並びにすると高さが違うボックスが混ぜっている場合、レイアウトが崩れてしまいます。 <div class="wrap"> <div class="box">float 1</div> <div class
/* CSS(スタイルシート)に関する知識・テクニックなどの備忘録 */ 文字サイズ 大 中 小 現在のページ: HOME » CSSハック・条件分岐 » Firefoxのバージョン別CSSハック一覧表
プロパティの前後に"_"(アンダースコア)や"#"などを付けることでCSSを特定のブラウザだけに適用させる技。 ※海外ではこの方法はあまり使われていないらしい(最近では国内でも使ってる人は少ないかも) IE8の検証を載せました。
- CSS(スタイルシート)に関する知識・テクニックなどの備忘録 - 文字サイズ 大 中 小 現在のページ: HOME » フォント・リンク » 外部リンクや各ファイルに合ったアイコンを自動的につける CSSで外部リンク、PDF、Excel、Word、zipなどのファイルへのリンクにアイコンを自動的に付ける方法です。 HTML <p><a href="http://webbibo.com/">ホームに戻る</a></p> <p><a href="http://www.google.co.jp/" target="_blank">GoogleのTOPページ</a></p> <p><a href="test.pdf">Webアンケート結果</a></p> <p><a href="test.doc">FAX送付状</a></p> <p><a href="test.x
- CSS(スタイルシート)に関する知識・テクニックなどの備忘録 - 文字サイズ 大 中 小 現在のページ: HOME » レイアウト・ボックス » IE6とモダンブラウザにmin-widthを疑似的に指定する方法 IE6はmin-widthに対応していませんが、Javascriptを使わず、CSSだけで擬似的にmin-widthを指定できるのでご紹介します。 min-heightを指定したい場合は、「IE6にもmin-heightを疑似的に実現させる方法」をご覧ください。 HTML <div class="wrap"> <div class="content">指定の幅まできたら、ウィンドウを縮めても、ボックスはそれ以上は縮まりません。このボックスだと幅500pxより小さくなりません。</div> </div> CSS /* モダンブラウザ向け */ .wrap
- CSS(スタイルシート)に関する知識・テクニックなどの備忘録 - 文字サイズ 大 中 小 現在のページ: HOME » CSSハック・条件分岐 » CSSプロパティを記述する際の順番 人によって様々な書き方があるCSSプロパティの順番。今回は参考になりそうなサンプルを紹介します。 「CSSプロパティの記述順序 - かたつむりくんのWWW」で紹介されていました分かりやすくキレイにまとまったサンプルです。Mozillaの順序をベースに、W3Cの仕様書(CSS2 Specification)と「Web標準の教科」の順番をミックスしたものらしいです。 CSSプロパティの記述の順番 1.表示や配置など「視覚整形モデル」に関するプロパティ display list-style** 1. list-style-type 2. list-style-image 3. list-
「セレクタ」の前後に"*"や"+"などを付けることでCSSを特定のブラウザだけに適用させる技。 一般的に「プロパティ:値」レベルのハックよりこちらのハックが使われているケースが多い。 IE8の検証を載せました。
このページを最初にブックマークしてみませんか?
『http://webbibo.com/』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く