Written by
watanabe
画像の下にテキストを回り込ませる
画像の下にテキストを回り込ませる方法をご紹介いたします。 画像が左寄せ、右寄せのクラスを作成しました。「.img_l」が左寄せ、「.img_r」が右寄せになります。それぞれ、imgにタグに直接記述します。 .img_l { float: left; margin: 0 20px 20px 0; } .img_r { float: right; margin: 0 0 20px ...
Written by
watanabe
画像の下にテキストを回り込ませる方法をご紹介いたします。 画像が左寄せ、右寄せのクラスを作成しました。「.img_l」が左寄せ、「.img_r」が右寄せになります。それぞれ、imgにタグに直接記述します。 .img_l { float: left; margin: 0 20px 20px 0; } .img_r { float: right; margin: 0 0 20px ...
Written by
watanabe
CSSだけでサイドバーの位置を固定する方法をご紹介いたします。 IE6にも対応させるため、画像も使用しています。 まず、IE6でサイドバーがスクロール時に発生するガタつきを防止するために、bodyに背景画像を使用します。背景に使用する画像は特に指定はありません。ここでは、白画像を1x1で繰り返してbodyいっぱいに表示させています。3行目に記述しいている、「background...
Written by
watanabe
スマートフォン表示で、スペースの空いた要素と長さの違う要素を、縦の位置に対して合わせる方法をご紹介いたします。 画面いっぱいに表示する、5つのリストからなるナビゲーションリンクを例にしてCSSからご紹介いたします。 1行目の「ul.navi li」クラスでリストの基本プロパティを指定しています。 2行目の「display: inline-block;」でリストを横並びにし、3行...
Written by
watanabe
テーブルタグを使用せずに、縦と横に可変可能な角丸画像を表示する方法をご紹介いたします。 使用する画像は下記の4つです。 左上の角丸画像(13x13) 右上の角丸画像(13x13) ......
Written by
watanabe
%指定とは違った、フォントを可変にするプロパティをご紹介します。 rem(「root+em」)はCSS3から追加された新しい単位で、ルートであるhtmlに指定されたフォントサイズを基準とします。 %指定とは違い、親要素のフォントサイズの継承を気にせず使用することができます。 基準となるサイズを「62.5%」とした場合、「font-size: 1.3rem;」は「font-siz...
