CSS

htmlで謎の余白・隙間ができる時、なくすために試してみるCSS

htmlでもCSSでも指定していないのに、なぜだか2、3ピクセルの余白というか隙間が空いてしまったことってありませんか?WEBデザインをしているとこの2ピクセル、、、いえ、わずか1ピクセルでも意図しない余白や隙間があったりすると気になってしまいます。そんな時、その余白や隙間を消すために試していただきたいCSSをご紹介します。

続きを読む

CSS:vertical-alignが効かない!テキストを縦(高さ)中央揃えにするには

h1やpタグなどのブロック要素内のテキストを縦中央にする場合、vertical-align:middle;は効きません。vertical-alignはインライン要素とテーブルセルでしか効かないんです。では、ブロック要素内のテキストを縦中央にしたい場合どうすればいいのでしょうか。先日、これに苦しんだのでまとめておきます。

続きを読む

text-align:centerが効かない!text-alignは何に効くCSSか

テキストをセンター揃えにしたい時に、当たり前のように記述するtext-align:center;ですが、時々、text-align:centerが効かないように思う時があるんです。特にdivタグ、text-alignが効く時と効かない時があるような・・・。ちょっと苦労したので、text-alignの特徴について改めて整理してみました。

続きを読む

背景画像(background-image)を横幅100%、更に縦横比も維持するCSS【レスポンシブウェブデザインTIPS:RWD】

レスポンシブウェブデザイン(以下RWD)では、デバイスの幅に応じて、文字や背景画像の幅を可変させることになります。 その際、文字数に応じて高さを自動で可変させ、背景画像を横幅いっぱいに(100%)、更に縦横比も維持して表・・・

続きを読む