Sample Code

【CSSの小ネタ】

春

春はあけぼの。やうやう白くなりゆく山ぎはすこしあかりて、むらさきだちたる雲のほそくたなびきたる。

「枕草子 第一段」より

夏

夏は夜。月のころはさらなり、やみもなほ、ほたる飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。

右側の画像は背景画像です。

昔はこうやって背景画像にすることが多かった気がする。

秋

秋は夕暮れ。夕日の差して山の端いと近うなりたるに、烏の寝所へ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などの連ねたるが、いと小さく見ゆるは、いとをかし。日入りはてて、風の音、虫の音など、はた言ふべきにあらず。

ちょっと例えが悪いけど、何枚かの写真を組み合わせて1枚の画像にしたり。

もちろん単純に揃えるだけだとデザイン的にいまいちだったのでそういう風になったんです。

冬

冬はつとめて。雪の降りたるは言ふべきにもあらず、霜のいと白きも、またさらでもいと寒きに、火など急ぎおこして、炭もてわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の火も、白き灰がちになりてわろし。

やっぱり雪がないと冬っぽくないですよね。

こたつでみかん。あと小説とコーヒーがあると幸せな冬が過ごせますね。

と清少納言が言ったとか言わないとか。

株式会社アートグラフィック新潟
新潟県北蒲原郡聖籠町東港7-5989-12
TEL:025-256-1273
FAX:025-256-2470
http://www.agn.co.jp/

適当に画像を作ったにせよ、
あまりにいい加減で自分でうんざりしている。

雰囲気だけ感じてください。

ちなみにこのカラムに特に意味はない。

下のGoogle mapみたいなのもちょっと前流行りましたよね。

HTML

<div class="box-underimage box-summer">
    <div class="box-underimage-content">
        <h2 class="box-underimage-title">夏</h2>

        <blockquote>
            <p>夏は夜。月のころはさらなり、やみもなほ、ほたる飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。</p>
        </blockquote>

        <p>右側の画像は背景画像です。</p>
        <p>昔はこうやって背景画像にすることが多かった気がする。</p>
    </div>
</div>
<div class="box-underimage box-autumn">
    <div class="box-underimage-content">
        <h2 class="box-underimage-title">秋</h2>

        <blockquote>
            <p>秋は夕暮れ。夕日の差して山の端いと近うなりたるに、烏の寝所へ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などの連ねたるが、いと小さく見ゆるは、いとをかし。日入りはてて、風の音、虫の音など、はた言ふべきにあらず。</p>
        </blockquote>

        <p>ちょっと例えが悪いけど、何枚かの写真を組み合わせて1枚の画像にしたり。</p>
        <p>もちろん単純に揃えるだけだとデザイン的にいまいちだったのでそういう風になったんです。</p>
    </div>
</div>
<div class="box-underimage box-winter">
    <div class="box-underimage-content">
        <h2 class="box-underimage-title">冬</h2>

        <blockquote>
            <p>冬はつとめて。雪の降りたるは言ふべきにもあらず、霜のいと白きも、またさらでもいと寒きに、火など急ぎおこして、炭もてわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の火も、白き灰がちになりてわろし。</p>
        </blockquote>

        <p>やっぱり雪がないと冬っぽくないですよね。</p>
        <p>こたつでみかん。あと小説とコーヒーがあると幸せな冬が過ごせますね。</p>
        <p>と清少納言が言ったとか言わないとか。</p>
    </div>
</div>

Sass

.box{
    &-underimage{
        position: relative;
        overflow: hidden;
        padding-bottom: 800 / 600 * 100 + 5%;
        // +5％はコンテンツとの間の余白
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom center;
        margin: 4rem 0;
        @media(min-width : 769px){
            padding-bottom: 0;
        }
        &-content{
            @media(min-width : 769px){
                width: 460px;
                height: 640px;
            }
        }
    }
    &-summer{
        background-image: url(../images/170105/summer.png);
        @media(min-width : 769px){
            background-position: right top;
        }
    }
    &-autumn{
        background-image: url(../images/170105/autumn.png);
        @media(min-width : 769px){
            background-position: left top;
            .box-underimage-content{
                float: right;
            }
        }
    }
    &-winter{
        background-image: url(../images/170105/winter.png);
        @media(min-width : 769px){
            background-position: right top;
        }
    }
}