HOME > 背景

背景一覧

2015.05.28

CSSで共通の要素につけた背景を任意の要素だけ消す方法

02

ウェブサイトを作っていて共通箇所はなるべくCSSでまとめてしまいたい。でも、共通箇所の中で1つだけ違う設定が必要なんて事がたまにあります。背景色なんかも全部同じにしたい場合、例えばdiv全部に設定しちゃうなんて事もありますが、その中の1ヶ所は背景いらないんだよなぁ~って事がたまにありました。そんな時はその1ヶ所に別のclassを追加して、背景を消しちゃいましょう。

2015.05.14

CSSで背景をブラウザ横100%で表示した時に横スクロールした時の背景を切れずに表示する方法

CSSで背景をブラウザ横100%で表示した時に横スクロールした時の背景を切れずに表示する方法

背景色でも背景画像でもブラウザ横100%で表示する事は普通にあると思います。背景の上にそのままコンテンツを展開する場合は問題ないのですが、中に「width固定」を入れると、ブラウザの横スクロールが出るまで縮めてスクロールすると、背景が切れている場合があります。なぜでしょうねぇ。

2014.08.17

CSSで背景画像を100%で表示する方法をまとめました

CSSで背景画像を100%で表示する方法をまとめました

背景画像を使用する際方法は色々とありますね。レスポンシブWebデザインを使用した際は背景画像を使う事も多いと思います。今回は同じ背景画像を使った場合に幅一杯に背景を設置する方法をご紹介します。

2014.08.12

背景をrgbaで設定した時にIE8以下で透過する方法

rgbaとfileter

背景をrgbaで設定すると透過しやすいです。でもIE8以下だと透過せず背景色が無くなって表示されてしまいます。ではIE8以下でrgbaを使って背景を透過するにはどうしたら良いのでしょうか。設定方法をまとめてみました。

2014.06.19

背景画像CSSで設定する時に縦横真ん中に設定する方法

背景を真ん中にする

少し前、CSSを背景で設置する時に縦横真ん中に揃える事がありました。今まで考えずに設定していたのですが、その時はあれ?縦の真ん中って・・・?とふと考えた事がありました。特別難しい事はないのですが、ちょっとややこしいので記載しておきます。

2014.06.13

opacityとrgbaの違いは?cssで背景を透過する方法

cssで透過

CSS3.0以前は背景を透過する時は、photoshopなどの画像編集ソフトで透過したものを「PNG」形式で書き出していました。今でもブラウザなどに合わせたり複雑な背景を使用する場合は画像を使いますが、単色である場合はcssで対応する事が多くなりました。その際背景色を透過する場合はどうしたらいいのか。opacityを使って設定する?rgbaを使って設定する?どう違うの?今回は両方実験してみましょう。

2014.04.19

YouTubeの映像をjqueryを使わずに背景全面に設置する方法

Youtubeを背景にする

トップページを開いた時に背景全面が映像になっているサイトってかっこいいですよね。某有名スポーツグッズサイトや海外の制作会社のサイトでもよく見る様になりました。最初の頃は映像が重たくてもういいやぁ~とサイトを落ちていましたが、最近では結構軽いサイトが多いです。増えた要因も使いやすくなったそこにあるのかもしれませんね。

2014.03.14

CSSを使ってボタンのデザインを背景に設置する方法

ボタンを背景に設置

メニューは通常画像を切って設置しています。ロールオーバー時にはjqueryを使ってon、offで画像を切り替えたりします。PCサイトだけですとそれで問題ないのですが、レスポンシブWebデザインの様なブラウザによって可変するサイトなどでは、レイアウトが取りずらい。そこで、ボタンのデザインをCSSを使って背景にする方法で解決したいと思います。使い方によって色々できるので面白いと思いますし、htmlも綺麗になりますよ。