社員ブログ
HOME  社員ブログ

アーカイブ

‘CSS’ カテゴリ

[CSS]背景画像を中央から相対指定する方法

2015年08月25日 12時12分00秒

こんにちは、ピーターです。
最近はCSSをよく書いています。


例えば、1280pxの幅のページに、500pxの画像を横に3つ並べたいとします。
その時、「text-align: center;」したように中央に寄せる必要があるとします。
こんなイメージです。


スクリーンショット 2015-08-25 11.20.35


これを実現するのは簡単です。


HTML:

<div id="images"><!--
    --><img src="left.png" /><!--
    --><img src="center.png" /><!--
    --><img src="right.png" /><!--
--></div>

CSS:

#images {
    width: 1500px;
    position: relative;
    left: 50%;
    margin-left: -750px;
}


これだけです。


まず、画像を3つ並べます。
img間の<!– –>は、img間の隙間をなくすためのものです。
これだけでは中央に寄りませんので、1500pxのdivの左端を中央に合わせ、幅の半分をネガティブマージンとすることで中央に寄せています。


しかしこの場合、1500pxに対してページ幅が1280pxなので、横スクロールバーが出てしまいます。横スクロールバーが出てもいい場合もあると思いますが、出したくない場合もあると思います。横スクロールバーを出さないようにするにはどうすればいいでしょうか。


CSSのbackgroundプロパティを使ってみたらどうでしょうか。


HTML:

<div id="images"></div>

CSS:

#images {
    width: 1500px;
    height: 500px;
    position: relative;
    left: 50%;
    margin-left: -750px;
    background:
        url(left.png)   no-repeat left   top,
        url(center.png) no-repeat center top,
        url(right.png)  no-repeat right  top;
}


これも横スクロールバーが出てしまいます。


横スクロールバーが出る原因は、ページ幅を超えるwidth指定です。
なのでまずは「width: 1500px;」を外します。
中央に寄せたdivでなくても、背景画像を中央に表示するのは簡単です。


HTML:

<div id="images"></div>

CSS:

#images {
    height: 500px;
    background: url(center.png) no-repeat center top;
}


これで1枚の画像を中央に表示することができます。
では、左右の画像はどうしたらいいでしょうか。


background-positionプロパティは、位置を相対指定できます。

 

background: url(left.png) no-repeat left 5px top 10px;


これで、左から5px、上から10pxとなります。
これを使って、中央からの位置を指定すれば良さそうです。

 

background: url(left.png) no-repeat center -500px top;


残念ながら、left, right, top, bottomからの位置は指定できるのですが、centerからの位置は指定できません。
そこでcalc関数を使ってみます。


HTML:

<div id="images"></div>

CSS:

#images {
    height: 500px;
    background:
        url(left.png)   no-repeat calc(50% - 500px) top,
        url(center.png) no-repeat center top,
        url(right.png)  no-repeat calc(50% + 500px) top;
}


たしかにこれはうまくいきます。横スクロールバーも出ません。


しかしIEだけは、background-positionプロパティにcalc関数を使うとうまくいかないという問題があります。


別の方法を考えてみます。
width: 50%; のインラインブロックを2つ横に並べることで、左のインラインブロックの右端と、右のインラインブロックの左端が中央の位置になります。このことを利用して、インラインブロックの右端または左端からの位置を指定した背景画像とすれば良さそうです。


HTML:

<div id="images"><!--
    --><div class="left"></div><!--
    --><div class="right"></div><!--
--></div>

CSS:

#images {
    height: 500px;
    background: url(center.png) no-repeat center top;
}
#images > div {
    display: inline-block;
    width: 50%;
    height: 100%;
}
#images .left {
    background: url(left.png) no-repeat right 250px top;
}
#images .right {
    background: url(right.png) no-repeat left 250px top;
}


これでうまくいきました。IEでも問題ありません。
真ん中の画像は外側のdivの中央に表示しています。
左の画像は右から250px、右の画像は左から250pxの位置とすることで、中央からの位置指定を行っています。


最後のソースの全ソースと画像はこちらです。

left.png
center.png
right.png

 

<!DOCTYPE html>
<html>
<head lang="ja">
    <meta charset="UTF-8">
    <title>[CSS]背景画像を中央から相対指定する方法</title>
    <style>
        body { margin: 0; }

        #images {
            height: 500px;
            background: url(center.png) no-repeat center top;
        }
        #images > div {
            display: inline-block;
            width: 50%;
            height: 100%;
        }
        #images .left {
            background: url(left.png) no-repeat right 250px top;
        }
        #images .right {
            background: url(right.png) no-repeat left 250px top;
        }
    </style>
</head>
<body>
    <div id="images"><!--
        --><div class="left"></div><!--
        --><div class="right"></div><!--
    --></div>
</body>
</html>

 


CSS, 社員:ピーター

iOS Webページでスクロールを滑らかにしたい。

2015年03月4日 9時33分17秒

こんにちは、コブラです。

 

iOS向けにWebページに慣性スクロールを適用し、

スクロールを滑らかにしたいと思ってググってみたらCSSにて実現できました。


-webkit-overflow-scrolling: touch;
overflow-y: auto;


これだけでOKでした。

 


CSS, HTML, iOS, 社員:cobra

HTML cssを使ってpreタグ内で自動改行させる方法。

2014年07月7日 9時45分15秒

こんにちは、コブラです。

 

タイトルの通りですが、

preタグ内のテキストは改行されない為、

文章が多いと横にながーく伸びてしまいます。

そこで、以下のブログ様を参考に解決しました。

 

preタグ内のテキストを自動改行させるスタイルシート – クロノドライブ様

 

pre {
  /* Mozilla */
  white-space: -moz-pre-wrap;
  /* Opera 4-6 */
  white-space: -pre-wrap;
  /* Opera 7 */
  white-space: -o-pre-wrap;
  /* CSS3 */
  white-space: pre-wrap;
  /* IE 5.5+ */
  word-wrap: break-word;
}

 

 Chromeでも有効でした!

 

ちなみに、preタグ内はフォントもブラウザに依存して小さくなってしまうことも。

そんなときは上のクラスタ内にfont-size: Npxを追加すればOKです!


CSS, HTML, 社員:cobra