CSSの小技の最近のブログ記事

例えば、サイドメニューとメインコンテンツが横並び(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;
}

というようにします。

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

でも、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の指定は不要になります。

テキストを左右中央寄せにする場合「text-align:center;」でできますが、ulタグを用いた場合ではリストマークが揃いません。リストの先頭を揃えて、かつ、リスト全体を左右中央寄せ少しCSSに工夫が必要です。

CSSコード

ul {
   position:relative;
   float:left;
   left:50%;
}

li {
   position:relative;
   left:-50%;
}

ポイントは、「float:left;」を設定することと、相対配置で親要素を半分ずらした後に、子要素でさらに元の方向にその半分をずらすことで、全体的に真ん中に配置するテクニックを使うことです。

「float」を使うことで、ulに本来指定されていたdisplayプロパティ(display:block;)が無視される(つまり内容物の範囲しかブロックボックスが存在しなくなる)ため、内容物(li内のテキスト)の横幅を基準に中央寄せにすることが可能となります。

ウェビメモさんのブログ記事を読んでたら知ったんですけど、「指定した長さからはみ出した文字列を省略表示するCSS」っていうのがあったのですね・・・。こういうのってPHPとか使わないとできないと思ってました・・・。

「text-overflow」というプロパティでテキストを省略表示するかどうかを指定します。

(X)HTMLコード

<ul>
   <li>ああああああああああああああああああああああああああああ</li>
   <li>いいいいいいいいいいいいいいいいいいいいいいいいいいいい</li>
   <li>うううううううううううううううううううううううううううう</li>
   <li>ええええええええええええええええええええええええええええ</li>
   <li>おおおおおおおおおおおおおおおおおおおおおおおおおおおお</li>
</ul>

CSSコード

 li{
   width:300px;
   overflow:hidden;
   text-overflow:ellipsis;
   -webkit-text-overflow:ellipsis;
   -o-text-overflow: ellipsis;
   white-space:nowrap;
}

どうやら、ブラウザによってはプレフィックス(接頭辞)を付けないと適用されないようで、あと、「white-space:nowrap;」も併せて記述しないと適用されないようです。

テキスト中に小さい画像をきれいに縦方向を揃えて表示したい場合は、vertical-alignを使用します。

(X)HTMLコード

<p>
あいうえお<img src="image.gif" alt="" class="middle" />かきくけこ
</p>

CSSコード

.middle {
   vertical-align:middle;
}

最近のブログ記事