chapters of dissertation writing a good introduction writing conclusion research methods for thesis

CSS一覧

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.05.25

CSSの「position:absolute」を使った時に真ん中に寄せる方法

absolute

cssのabsoluteを使うとdivで囲っている部分を画像に重ねたり自由にレイアウトできます。そのabsoluteで設定したdivを真ん中にしたい場合。。。marginやpaddingの数値設定でも真ん中に寄っている様には見えますが、正確じゃありません。windowsとmac、またブラウザの種類によって多少変わってきます。そこで、absoluteを使った時、%設定で真ん中に寄せてしまいましょう。

2014.04.16

CSSを使ってクルッと回るボタンを作る方法

クルリンパ

Webサイトには必ず必要なナビゲーション。メインナビゲーションの場合hoverした時にあまり大きなアクションではなく、色が変わるなどの方が見やすくて良いのかもしれません。ですが、特別なボタン、ビジュアルを使ったボタンなどはhoverした時にインパクトを与えるアクションがあっても良いかもしれません。CSSを使ってボタンをクルッと回転させてみましょう。

2014.04.05

リスト<li>にボーダーを付ける時に一番上のラインを表示させない方法

01

リストデザインにする際<li>はとても便利です。綺麗に並ぶし、CSSは一括で対応できるし。ですが、この一括という所が多少面倒で、全ての<li>が同じになってしまいます。ボーダーを付けると全ての<li>に付いてしまいます。デザイン上では一番上と一番下には付けたくないのにって事ありますよね。そういう時はCSSでボーダーを表示させない様にしちゃいましょう。

2014.03.16

hoverすると白黒画像が透過して背景画像が現れるボタン

透過ボタン

ボタンの作り方は色々あります。jqueryで画像を切り替えたり、aタグに背景を入れて切り替えたり本当に様々です。その中で1つ、ロールオーバーすると透過するボタンを設置してみようと思います。背景に設置する事で軽くもなるし、htmlも綺麗になります。1つのデザインを使いまわす用な使い方をすると読み込むデザインを変えるだけでサイト全体のボタンデザインを変える事もできるので、使い勝手は良いかと思います。

2014.03.15

CSS「opacity」でIE8以下まで対応し透過する方法

opacityをIE8に対応

CSSで「opacity」を設定すると透過する事ができます。しかしIE8以下となると(思った通りですが・・・)対応していません。んもぉ~またIE8以下ですか。と思ってしまいますね。せっかく透過が気軽に出来るのに、これではIE8が使われている段階では使えません。勿体ないので、IE8以下でも「opacity」を使える様にしちゃった方がいいですね。IEは手のかかる子の様な感じもしますが、WindowsXPが保証対象から外れてもまだIE8標準のVISTAが残ってます。IE6・7はあまり見る機会は無くなってくるかもしれませんが、IE8はまだ数年お付き合いして行かなければならないですね。

2014.03.14

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

ボタンを背景に設置

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