2014年9月アーカイブ

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;
}

参考サイト

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