ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
看板画像に文字を重ねて表示する方法
最後に、冒頭でご紹介した「画像の上に文字やオブジェクトを重ねる」サンプル3つを実現するHTML＋CSSソースをご紹介いたします。 看板画像に文字を重ねて表示する方法 まずは、以下のような看板画像の内側に文字を重ねる方法をご紹介いたします。 上記のように画像に文字を重ねるには、以下のようにHTMLとCSSを記述します。ここでは、どこにどんなスタイルを適用しているのかを分かりやすくするため、HTMLの各要素の中にstyle属性を使って直接CSSソースを記述しています。 <p style="position: relative;"> <img src="dog.jpg" width="320" height="140" alt="犬看板" /><br /> <span style="position: absolute; top: 15px; left: 150px; width: 150px;
『印刷用CSSで背景画像を印刷する方法』
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ Webサイトを印刷対応にしたい場合、印刷用cssを用意して 印刷用に最適化する。 通常背景を印刷する場合はブラウザの設定で背景も印刷する に設定されていないとできない。 なんとかしたいと思って調べた対応策をメモ デモはこちら まず cssのメディアタイプをprintにする。 <link rel="stylesheet" type="text/css" href="css/print.css" media="print"> cssで対象となる箇所を display:list-item; にする。そして list-style-image に印刷したい画像を
[CSS]IE6, IE7, IE8, IE9の各バージョンの分岐をvalidで処理する方法
CSS Specific for Internet Explorer デモページ（※IE7で表示） [ad#ad-2] デモ紹介 1. 条件付きコメントの利用 2. CSS Hackの利用 3. 条件付きのHTML class デモ紹介 デモページは、下記のように設定されています。 スタンダードブラウザ（IE9, Firefox, Chrome, Safari, Operaなど） 背景色がグレー IE8 背景色がピンク IE7 or IE8互換モード 背景色がグリーン IE6 背景色がブルー 下記はデモページをIETesterで表示したものです。 IETesterの詳しい説明は、「IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester」を参照ください。 デモページ（※IE8で表示） IE9もWin7+IE9で確認したところ、背景はグレーに表示されていました。 [a
IE6用透過png対応策、DD_belatedPNGの使用法と注意点
以前もこの「DD_belatedPNG.js」に関してはエントリーしましたが 『IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」』、あまりの素晴らしさにオススメするだけして使用法とか注意事項など大事な部分に触れずじまいでした。 この素敵な透過png対応策であるDD_belatedPNGちゃんですが、img要素に使用する際にも、div要素やp要素等の背景画像に対して使用する際も、ほんのちょっとしたクセがあります。 なので、今回はこの偉大なる「DD_belatedPNG.js」の使用方法と、使用に関するちょっとした注意点などをエントリーしようと思います。 DD_belatedPNGの使用法と注意点 1.使用するための準備 まずはこの「DD_belatedPNG.js」自体をダウンロードしないコトには始まりません。 配布元のDrew Diller’s bl
CSSスプライトで画像を円滑に表示させる
2014年8月13日 CSS, Webサイト制作 CSSスプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつです。画像の数を減らすことにより、サイトの表示を速めることができます。以前よりYoutubeなどに使用されているので、その名前を一度は聞いたことがあるかもしれません。ここではCSSスプライトを使用したメニュー画像の作り方を紹介します。 ↑私が10年以上利用している会計ソフト！ CSSスプライトを使うデメリット メリットは上記にあるとおり、サイトの高速化が期待できます。ではデメリットとは？ alt属性が使えない 背景画像のリピート表示ができない 更新する時に手間がかかる（サイズを変えるとCSSも変えなければいけないため） 以上をふまえて、私はいつもメニューの背景やボタンなど、マウスオーバー時に変化する画像のみCSSスプライトを
IE8でのCSS崩れに悩む。 - Awayannのブログ
とりあえずＷｅｂページをカットオーバーしてみたけれど、IE8での検証が環境上できていなかったので、慌てて調査。 イヤな予感は的中。やっぱり崩れてる(T T;) IE5/6/7、Chrome、Firefox3、iphone用Safariではきちんと出てたのに。 振る舞いが違うのは困るよなあ、ホント。MSのばか〜！せっかくあんたんとこのブラウザに合わせてCSS必死に合わせこんだのに、今度は5/6/7がOKで8がNGって、、、とグチっても仕方ないので対策を調べる。今んとこシェアは20%程度みたいだけど、置き換えで今後シェアは伸びる方向のブラウザだしねえ。 ｢ie8 css 崩れる｣ でググってみると、デザイナーの嘆き、恨み節が出る出る（笑）やっぱり、本職Webデザイナーの方々もこれには悩んだようで。 とりあえずはIE8対応はIE7互換モードで凌げるらしい、ということが判明。head部に以下のメタ
[CSS]ブラウザ間の差異を無くすリストのスタイルシート | コリス
Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel
Flash(swfファイル)の上位にHTMLレイヤーを重ねる方法 | webwedge.jp
※以前のサイトでアップしていた記事の転載です。 通常Flashの上にHTMLのレイヤーを重ねようとしても、Flashの方が上位に表示されてしまいます。 あまりそういう機会も無いかもしれませんが…。 以下の方法を使う事でFlashの上にHTMLレイヤーを重ねる事ができます。 サンプルでは、水色の背景と流れている文字がFlash、黒文字がHTMLです。 HTMLのソース <div id="fla_css"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0 width="200" height="100"> <param name="mo
リスト全体の余白を調整する
margin の値には auto（自動）を指定することもできます。 マージンとパディングの指定については、以下のページをご覧ください。 ボックスのマージン（外側の余白）を指定する ボックスのパディング（内側の余白）を指定する デフォルトの余白を取り除く方法 一般的なブラウザでは、リストの周囲に適度な余白が設定されています。 この余白を取り除きたい場合は、ul要素（またはol要素）に対して次のスタイルを設定します。 ul { margin: 0 0 0 1em; padding: 0; } 左マージンは、少なくともリストマーカー1つ分以上の大きさが必要です。（以下は1つの目安です） ul要素に設定する場合 … 1em 程度 ol要素に設定する場合 … 1.5em ～ 2em 程度 マージンとパディングを 0 にして、左マージンにだけ上記の値を設定する、といった感じになります。 余白の比較 u
CSS TIPS » floatした際の背景表示
親ボックスに背景を設定して、内包する子ボックスに対してfloatを適応した場合、IEでは子ボックスを内包する形で背景が表示されるのに対して、Firefoxでは親ボックスの背景が表示されなくなります。 サンプルとなるhtmlは <div class="parent"> 親ボックス <div class="child"> 子ボックス </div> <div class="child"> 子ボックス </div> </div> とします。 これに対して div.parent{ width:204px; background:#39FF6B; } div.child{ border:1px dotted #000; height:100px; width:100px; float:left; } このようなCSSを適応した場合、以下のような表示になります。 サンプル これはIEがfloatの処理が
vistaＩＥ7環境は同じなのに、お客様のいっているバグが再現できません。 - HPを作成する仕事をしておりますが、すべて独学のため... - Yahoo!知恵袋
vista ＩＥ7 環境は同じなのに、お客様のいっているバグが再現できません。 HPを作成する仕事をしておりますが、すべて独学のためわからない部分があります。 現在直面している問題は…。 当社で作成したＨＰなのですが、 本来 １行目（改行） ２行目（改行） で表示されるべきなのですが、 お客様の環境では、 １行目（改行）２行 目（改行） と表示されてしまいます。 スタイルはＣＳＳ、文字は固定長 環境はvista ＩＥ7（バージョンも同じ）状況で確認しましたが、 お客様のいうバグは見られませんでした。 が、お客様からいただいた画面コピーではやはり上記の現象がでてしまっています。 当社でも同じ状況を再現したいのですが、再現できない原因としては他に何が考えられますか？
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
テキストの横に並ぶ画像の位置合わせ その１
こんにちは 馬場です。 「テキストの横に並ぶ画像の位置合わせ」 について、2回に分けてお話します。 今回は、vertical-alignを使った方法を ご紹介します。 「テキストの横に並ぶ画像の位置合わせ」と 言葉で表現してもピンと来ませんが、 サイトで更新があった項目などに 「New」などのアイコンが 表示されているのを ご覧になったことがありますよね？ あの「New」アイコンの 縦方向の位置調整というイメージです。 ・指定なしの場合 ・vertical-align:middleを設定 ・vertical-alignに数値を設定 ▼ 指定なしの場合 何も意識せず、 テキストと画像を 横に並べてみました。 なんだか高さが合ってくれません。 （htmlコーディング） <p>新しい<img src="icon_new_01.gif" /> 新しい</p> ▼ vertical-align:mi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
position：fixedのright , bottomをIE6に対応させる | CSS Lecture
「display:none」と「visibility: hidden」と「text-indent」はスパム？ | 無料SEO対策のススメ
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker
http://www.stylish-style.com/csstec/hi-level/print-css.html
TableとCSSいろいろ - DesignWalker
ＩＥとfirefox、行間の表示が異なってしまう - OKWAVE
