レイアウトの最近のブログ記事

例えば、サイドメニューとメインコンテンツが横並び(2カラム)になっていて、それぞれ背景色が違う場合、それぞれの高さが違っても、下まで背景色を揃えたいときがあります。

例えば、サイドメニューとメインコンテンツを囲んだdiv要素に2種類の色に分けた背景画像を設定する方法、ネガティブマージン(margin-bottom:-32768px; padding-bottom:32768px;)を利用する方法などがあります。

前者のほうは、レスポンシブなデザインには向きませんし、後者はIEの印刷時に問題があります。

そこで、:before擬似要素を利用すれば、CSSのみでレスポンシブにも対応したやり方ができるのではないかと試行錯誤してみたところできました!

(X)HTMLコード

<div id="contents">
	<div id="sub">
	</div><!-- /#sub -->
	<div id="main">
	</div><!-- /#main -->
</div><!-- /#contents -->

CSSコード

#contents {
	position:relative;
	overflow:hidden;
	width:980px;
	margin:0 auto;
	background:#fbfbfb;
}

#contents:before {
	position:absolute;
	top:0;
	left:0;
	width:30%;
	height:100%;
	content: '';
	background:#1f2124;
}

#sub {
	position:relative;
	float:left;
	width:30%;
}

#main {
	position:relative;
	float:right;
	width:70%;
}

ポイントは、それぞれの要素に『position』を指定することです。

今回は、メインコンテンツの背景に表示させたい色を親要素に指定して、サイドメニューの背景に表示させたい色を親要素の:before擬似要素に指定しています。

ボックスの高さを固定(heightで高さを指定)させていないと使えない方法ですが、例えば、Webページのヘッダーやフッターのメニューを上下中央寄せしたい場合に便利です。

(X)HTMLコード

<div>
<p>
テキスト
</p>
</div>

CSSコード

div {
    height:100px;
}

div p {
    position:relative;
    top:50%;
    transform:translateY(-50%);
}

ポイントは、『top:50%』で要素の上部をボックスの真ん中に合わせた後、『transform:translateY(-50%)』で、要素の高さ分の半分を上方向に移動させているところです。

尚、『transform』プロパティはCSS3になるのですが、IEはバージョン9からの対応になります。

レスポンシブWebデザインでWebサイトを作っている時に便利な方法ですが、例えば、PCでは画像、スマートフォンではテキストというように、切り替えたいコンテンツが有るとします。

基本となる画像サイズを横900px・縦300pxとすると、縦横比は33.33%になります。

こういう場合、画像は『img』タグで指定しないで、CSSの『background』で背景画像として指定します。

デモページ

(X)HTMLコード

<div class="bg">テキスト</div>

というようにし、画像を表示させるCSSは、

CSSコード

@media screen and ( min-width:768px) {
    .bg {
        text-indent:-9999px;
        display:block;
        width:100%;
        height:0;
        padding-top:33.33%;
        background:url(photo.jpg) no-repeat 0 0;
        background-size:contain;
    }
}

というようにします。 テキストを表示させるCSSは、特にテクニックは必要ないので、ここでは割愛します。

『background-size:contain;』は、『縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する』ものです。

高さは、『heightは0』にして、『padding-top』で算出するようにします。これは、以前、Youtube動画をレスポンシブWebデザイン対応にさせる方法で紹介したテクニックです。

こういうように、縦横比を維持したまま、拡大・縮小させたいコンテンツがある場合、とても使えるテクニックなので、是非覚えておきたいものですね。

個人的メモです。

例えば、固定幅中央揃えのボックスに対して、横幅100%の背景をつけるとき、背景用のdiv要素にコンテンツのdiv要素を入れ子にするのが一般的なのですが、これをひとつのdiv要素で実現できるかどうか、という問題です。

CSSコード

div{
    background-image:url(img1.jpg),url(img2.jpg);
    background-size:900px auto,auto;
    background-position:center 0,0 0;
    background-repeat:no-repeat,repeat;
    padding:0 calc(50vw - 900px/2);
}

なるほどー。clac()ファンクションで自動的にpaddingを算出すればよいのですねー。backgroundは複数指定でもよいですし、横幅が固定(px指定)であれば画像をひとまとめにして作ってもよいですね。古いブラウザには対応していない書き方ですが、最近は1カラムのサイトも多いのでこういうのは使えそうですね。勉強になりました!

レスポンシブWebデザインのWebページにYoutube動画を埋め込むことがあったのでメモです。

(X)HTMLコード

<div class="youtube">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/RLK2In1JMvE" frameborder="0" allowfullscreen></iframe>
</div>

CSSコード

.youtube {
    position:relative;
    width:100%;
    padding-top:56.25%;
}

.youtube iframe {
    position:absolute;
    top:0;
    right:0;
    width:100% !important;
    height:100% !important;
}

Youtube動画は横縦比が16:9なので、横縦比を変えないように画像自体を縮小させようとしたら、横が縮んだらその9/16分、つまり56.25%分も縦が縮まないといけないことになります。それを「padding-top:56.25%;」で実現させています。

この考え方は、比率を変えたくない場合のものを縮小させるのに使えそうですね。勉強になりました。

参考サイト

ありがとうございます。

HTMLページ内に、iframe(インラインフレーム)ではなくて、縦スクロールバー付きの小窓を作りたい場合は、以下のようにします。

(X)HTMLコード

<div class="scrollbox">テキスト</div>

CSSコード

.scrollbox {
    width:300px;
    height:300px;
    overflow-y:scroll;
}

小窓よりもテキスト領域が小さいときに縦スクロールバーを出し無くないなら、

CSSコード

.scrollbox {
    width:300px;
    height:300px;
    overflow-y:auto;
}

というようにします。

大きめのヘッダー画像(見出し画像やアイキャッチ画像など)を利用する際、画像より小さい画面で見ると横スクロールバーが出てしまったり、スマートフォンやタブレットで閲覧するとバランスが悪く見えてしまいます。そこで、きれいに見せるために、ブラウザの横幅を小さいときには画像の左右側から非表示にしていきたい場合があります。

うまく日本語で説明できないので、デモページを見てください。

デモページ

デモページでは、ブラウザの横幅を小さくしていくと、画像の左右から非表示になっていくのがわかるかと思います。つまり、画像の真ん中は常にページの中心に存在します。

ポイントは、画像を絶対配置にして50%の位置に指定し、画像の半分のサイズをネガティブマージンで指定することによって、画像のページの中央に配置しているところです。

「text-align:center;」を使っても中央寄せにはなるのですが、ブラウザの横幅を小さくした時に、画像の左端がブラウザの左端に固定されて、画像の右端部分しか非表示になりません。

CSSコード

.image {
    position:relative;
    overflow:hidden;
    width:100%;
    height:200px;
}

.image img {
    position:absolute;
    left:50%;
    width:1200px;
    height:200px;
    margin-left:-600px;
}

参考サイト

ちょうど、案件で必要で、背景画像指定するのが面倒だったので、大変助かりました。

今まで、ボックス要素を上下左右中央する場合、トリッキーな方法を用いて実現させていました。

でも、IE8以降から、次のような、簡単なCSSで実装可能になったようです。

(X)HTMLコード

<div class="box"></div>

CSSコード

.box {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    width:500px;
    height:500px;
}

どうして、このような書き方で実装可能なのかというのは、以下のブログに詳しく書いてあります。

私は勝手に、「top」と「bottom」、「left」と「right」は同時指定できないと思っていたのですが、勘違いでしたね。もっとしっかり仕様書を読まなければ...。

ということは、次のように、topなどで位置を決めることで、widthやheightを固定しない方法もできるのですね。

CSSコード

.box {
    position:absolute;
    top:20%;
    left:20%;
    right:20%;
    bottom:20%;
}

この場合であれば、「margin:auto;」の指定や、width、heightの指定は不要になります。

画像をコンテンツの中央に配置したい場合は、marinを使います。ポイントは、画像を表示するimgタグはインライン要素ですがそれではmarinが有効にならないので、ブロック要素にすることです。

(X)HTMLコード

<img src="image.gif" alt="" class="center" />

CSSコード

.center {
   display:block;
   margin:0 auto;
}

コンテンツ量が少なくても常に縦スクロールバーを出す方法は、昔に以下の記事を書きました。

これらの記事を書いてから約2年が経ち、ブラウザの実装状況も変わってきました。

2010年5月現在は、主要の最新ブラウザで、以下の記述で、コンテンツ量が少なくても常に縦スクロールバーを出すことができます。

CSSコード

html {
   overflow-y:scroll;
}

最新のブラウザならCSS3の草案を取り入れているようですね。

また、以前は有効であったhtmlの高さを100%にし、マージンを1px空けて、縦スクロールバーを出す方法はFirefox3.6.3では効かなくなっていたので注意です。今のところ他のブラウザ(safari、Opera、Chome)には有効のようです。

CSSコード

html {
   height:100%;
   margin-bottom:1px;
}

最近のブログ記事