社員ブログ
HOME  社員ブログ

アーカイブ

‘開発言語’ カテゴリ

[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, 社員:ピーター

JavaScriptで画像フォーマット変換と縮小

2015年07月27日 12時15分41秒

こんにちは、ピーターです。

JavaScriptで画像フォーマットの変換と、幅と高さを縮小する必要があったので調べてみました。
今はJavaScriptだけで簡単にできるんですね。
備忘録としてサンプルを作成しました。
このソースだけで試せますのでよかったら試してみてください。
最近は脱jQueryを目指しています。

<!DOCTYPE html>
<html>
<head lang="ja">
    <meta charset="UTF-8">
    <title>JavaScriptで画像フォーマット変換と縮小</title>
</head>
<body>
    <form>
        <span id="file-wrapper">
            <input type="file" multiple id="file">
        </span>
        <table>
            <tr>
                <td>縮小率</td>
                <td>
                    <select id="scale">
                        <option>1.0</option>
                        <option>0.5</option>
                        <option>0.25</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>画像フォーマット</td>
                <td>
                    <select id="format">
                        <option value="image/jpeg">JPEG</option>
                        <option value="image/png">PNG</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>品質 (JPEGのみ)</td>
                <td>
                    <select id="quality">
                        <option>1.0</option>
                        <option>0.5</option>
                        <option>0.25</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>

    <!-- ここに画像を表示 -->
    <ol id="images"></ol>

    <script>
        (function($) {
            var fileWrapper = $('file-wrapper');
            var fileSelecter;
            var scaleSelecter = $('scale');
            var formatSelecter = $('format');
            var qualitySelecter = $('quality');
            var images = $('images');

            var fileChangehandler = function () {
                var files = this.files;

                for (var i = 0, n = files.length; i < n; i++) {
                    var reader = new FileReader();

                    reader.onload = function () {
                        var image = new Image();

                        image.onload = function () {
                            image.onload = undefined;

                            // canvasを生成
                            var canvas = document.createElement('canvas');
                            var ctx = canvas.getContext('2d');

                            // drawImageでcanvasに画像が描画される。
                            // drawImageの第三引数と第四引数を指定すると
                            // そのサイズに画像が拡大・縮小される。
                            // その場合、拡大・縮小後のサイズと
                            // canvasのサイズを合わせておく必要がある
                            var scale = parseFloat(scaleSelecter.value);
                            canvas.width = image.width * scale;
                            canvas.height = image.height * scale;
                            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

                            // toDataURLの第一引数に変換後の画像フォーマットを指定
                            // jpegの場合、第二引数に品質レベルを0.0から1.0の間で指定可能
                            var quality = parseFloat(qualitySelecter.value);
                            image.src = canvas.toDataURL(formatSelecter.value, quality);

                            var li = document.createElement('li');
                            li.appendChild(image);
                            images.appendChild(li);
                        };

                        image.src = this.result;
                    };

                    reader.readAsDataURL(files[i]);
                }

                resetFileSelecter();
            };

            var resetFileSelecter = function () {
                fileWrapper.innerHTML = fileWrapper.innerHTML;
                fileSelecter = $('file');
                fileSelecter.onchange = fileChangehandler;
            };

            resetFileSelecter();

        })(function (id) {return document.getElementById(id);});
    </script>
</body>
</html>

JavaScript, 社員:ピーター

画像選択ライブラリ iconselect.js

2015年04月12日 15時51分54秒

こんにちは、ピーターです。

htmlのセレクトボックスのような感じで画像を選択したいという話になり、探してみるとiconselect.jsが見つかりました。

スクリーンショット 2015-04-12 14.48.28

しかし、作成中のコードに組み込むと見た目が崩れてしまいます。

 スクリーンショット 2015-04-12 14.48.41

サンプルコードと何が違うのか調べた結果、 <!DOCTYPE html> の有無でした。
サンプルコードには <!DOCTYPE html> がありません。

これはめんどくさそうなバグだなと思い、他のライブラリを使おうかとも思ったのですが、見た目はiconselect.jsが一番気に入っていました。

よくよく見ると、幅と高さの指定が効いていないことに気づきました。
コードを追ってみると、JavaScriptで style.width などに数値を指定していますが、’px’などの単位も必要だった気がしたので’px’を付けてみると直りました。

最終的にiconselect.js内の

style.width = …
style.height = …
style.top = …
style.left = …
style.bottom = …
style.marginLeft = …
style.marginTop = …

といった箇所すべてを

style.width = … + ‘px’;

のように修正して直りました。


JavaScript, 社員:ピーター