CSS基礎編：各種装飾設定

Bootstrapフレームワークのグリッドレイアウトの練習として作成したコンテンツについて、Transitionや:hover、jQueryを応用して色々とエフェクトやギミックを試したので、こちらも備忘録として書いておきたいと思います。Bootstrapのページでも紹介していますが、作成したグリッドレイアウトのコンテンツはこちら：

Bootstrap導入からグリッドレイアウトの作成までは別ページで紹介しているので、今回はコンテンツ導入編です。まずはコンテンツのコードの紹介から：

ソースコード

<div class="container" style="margin-bottom: 24px">
  <div class="row">
    <div class="blog-post col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 0px">
      <div class="sample-a"><a href="#" class="sample-cover">
        <div class="sample-bg bg-1"></div>
        <div class="sample-borderline"></div>
        <div class="sample-comment">History</div>
        <div class="roll-button">Click for details</div>
      </a></div>
    </div>
    <div class="blog-post col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 0px">
      <div class="sample-b"><a href="#" class="sample-cover">
        <div class="sample-bg bg-2"></div>
        <div class="sample-borderline"></div>
        <div class="sample-comment">Tradition</div>
        <div class="roll-button">Click for details</div>
      </a></div>
    </div>
    <div class="blog-post col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 0px">
      <div class="sample-c"><a href="#" class="sample-cover">
        <div class="sample-bg bg-3"></div>
        <div class="sample-borderline"></div>
        <div class="sample-comment">Nature</div>
        <div class="roll-button">Click for details</div>
      </a></div>
    </div>
    <div class="blog-post col-md-8 col-sm-6 col-xs-12" style="margin-bottom: 0px">
      <div class="sample-d"><a href="#" class="sample-cover">
        <div class="sample-bg bg-4"></div>
        <div class="sample-borderline"></div>
        <div class="sample-comment">Views</div>
        <div class="roll-button">Click for details</div>
      </a></div>
    </div>
  </div>
</div>

別ページにてsample-aからdまでのクラスでコンテンツの高さを設定しているところまでは説明していたかと思いますので、今回はその先の解説になります。

コンテンツのリンク、影、隙間

sample-aからdの要素の直下にあるのがリンクを反映させるためのaタグで囲った.sample-coverという要素。この要素には下記CSSが反映されています：

.sample-cover {
    position: absolute;
    top: 0px;
    overflow: hidden;
    box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    margin: 2.5px;
}

positionとtopの記述でsample-aからdの各種要素の上に載る形にしています。over-flow: hiddenは後ほど出てくる背景のズームエフェクトの際に画像が枠からはみ出さないようにするための記述です。box-shadowは、ブログの背景があり少し見づらいのですがコンテンツのうしろに影をつけるための記述になります。

この要素でポイントとなるのがwidthとheightの設定かと思います。今回はコンテンツとコンテンツの間に2.5pxの隙間を設けるように設定していますが（margin）、幅と高さを100%にするとコンテンツ同士が重なってmarginが隠れてしまい隙間が発生しません。かといって、具体的な、例えば295px、というような数値を縦横の長さに設定すると画面によって小さく見えたり大きく見えたりしてしまいます。そこで使ったのがcalcというファンクションです。これは数値を設定するにあたって、異なる単位同士であっても計算式を入れるだけで数字を出してくれるという非常に優れたもので、今回は高さ、横幅共に100%から上下、左右のmargin分の5pxを引いた数字が反映されるようにしました。この100%というのが画面の幅に応じて可変するので、どんな画面の大きさでも常に一定の比率の大きさで、かつ常に5px引いた大きさになります。仮に隙間を10pxにしたい場合は、calc内の計算式を100% – 20pxにしてmarginを10pxと設定することになります。

aタグの要素の直下には4つの要素が独立して格納してあります（背景、枠線、タイトル、ボタン）。今回は、aタグ要素にマウスオーバー（PC）、もしくはスクロールしてa要素が可視領域に入ったら（タブレット・スマホ）、この4つの要素がそれぞれ独立した動きをするような構成になっています。

背景

4つの要素のうち一つ目は背景です。.sample-bgというクラスが全てのコンテンツに共通している設定で、.bg-1から4という4つの要素でそれぞれの背景画像を指定しています。まずは.sample-bgから説明していきます。

.sample-bg {
    position: absolute;
    height: 100%;
    width: 100%;
}

.sample-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.sample-bg, .sample-bg::before {
    -webkit-transition: all 5s ease;
    -moz-transition: all 5s ease;
    -o-transition: all 5s ease;
    transition: all 5s ease;
}

positionとheight、widthは文字通り位置、縦横のサイズを指定しています。.sample-bg::beforeが少しややこしいのですが、これは背景画像以外に背景色の変更も反映させるために設けた擬似クラスで、のちほど解説しますが画像とは別に::beforeクラスにエフェクト発生時の背景色の設定を行います。ここでは位置とサイズの設定しか行っていません。最後に、transition設定でエフェクトが作動した際に何秒で変化するかを指定しています。背景画像、背景色と別の設定も出来ましたが、今回は両方とも5秒で変化するように設定しています。

マウスホバー／ホバーアウト時の動作はそれぞれ設定できますが、:hover擬似クラスに別のtransition設定を行わない限りマウスホバー／ホバーアウト時の両方ともこの設定が反映されます。

次に各種bg-*シリーズです。これらは単純に画像の指定と配置の設定を行っているのみです。******の部分に残りのURLと画像のファイル名が入ります。

.bg-1 {
    background: url(https://yusakudays.com/******.jpg) no-repeat center center;
    background-size: cover;
}

.bg-2 {
    background: url(https://yusakudays.com/******.jpg) no-repeat center center;
    background-size: cover;
}

.bg-3 {
    background: url(https://yusakudays.com/******.jpg) no-repeat center center;
    background-size: cover;
}

.bg-4 {
    background: url(https://yusakudays.com/******.jpg) no-repeat center center;
    background-size: cover;
}

これで背景画像の設定と背景色変化の準備が完了です。

枠線

次に枠線です。今回のコンテンツでは、エフェクトが発生すると画像の中に枠線が浮き出てくるようなエフェクトをつけました。.sample-borderlineという要素で枠線の位置や色、太さなどを指定しています。

.sample-borderline {
    position: absolute;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    margin: 10px;
    border: solid;
    border-width: thin;
    border-color: #ffffff;
    opacity: 0;
    -webkit-transition: all 1.2s ease;
    -moz-transition: all 1.2s ease;
    -o-transition: all 1.2s ease;
    transition: all 1.2s ease;
}

.sample-coverの欄でも説明したcalcを今回も応用し、今回はそこにボーダーラインの設定も行っています。opacity:0にすることで普段は見えないように設定しています。transitionは1.2秒で設定していますが、ボーダーラインについてはエフェクト発生時はもっと素早く浮き出るように設定しているので、この1.2秒はマウスがホバーアウトしたときにかける時間となります。

タイトル

次はタイトルです。今回のタイトルは、エフェクトが発生すると上に移動するような設定にしています。まずはコードの紹介です：

.sample-comment {
    position: absolute;
    right: 0;
    left: 0;
    top: 50%;
    font-size: 25px;
    transform: translateY(-50%);
    margin: 0;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    padding-bottom: 10px;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    -ms-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
}

色々ありますが、まずはタイトルの位置について、top: 50%で上から50%の位置にずらし、transform: translateY(-50%)で要素の半分だけ上にずらすことで要素の中心がコンテンツの中心に来るようにしています。padding-bottomは次に紹介するタイトルの下についている横線への距離を決めるための記述です。ここで設定しているtransitionはマウスがホバーアウトしたときの設定で、エフェクト発生時はまた別の設定がしてあります。タイトル下の線ですが、コードとしては下記のようになります：

.sample-comment::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 50px;
    height: 1px;
    margin-left: -25px;
    background-color: #ffffff;
}

これについては今回のエフェクトの中で重要な要素ではないので、こう書けば横棒が描ける、という備忘録として書いておきます。

ボタン

次にボタンです。ボタンはページの別の場所でも使ったのですでにボタンの形状等についてはCSSファイルに記述があり、今回は.blog-post（今回のコンテンツのみに反映されるクラス）内にあるroll-buttonクラスに対して変更する箇所やエフェクトを指定しました。

.blog-post .roll-button {
    width: 120px;
    text-align: center;
    margin: 0px auto;
    transform: translateY(18px);
    -webkit-transition: all 0s ease-in;
    -moz-transition: all 0s ease-in;
    -ms-transition: all 0s ease-in;
    transition: all 0s ease-in;
    border: 1px solid #333333;
    color: #333;
    background-color: #ffffff !important;
}

初期位置がタイトルとかぶっていたので、transformで少し下にずらしています。幅を120pxに設定し、marginの左右をautoにすることで真ん中に寄せています。opacityはもとの設定で0にされていたので今回は記述していません。transitionを0としていますが、これはマウスアウトしたらすぐにopacity:0に戻るため、つまりすぐに消えるために0秒と設定しています。エフェクト発生時は別の設定をしてあります。

その他

他、細かい点で以下2つの設定を行っています：

.blog-post a {
    text-decoration: none;
}

.blog-post p {
    display: none;
}

.blog-post内のaタグのtext-decorationを消すことで、タイトルやボタン内のテキストに余計なデコレーションが施されるのを防いでいます。また、WordPressには意図していないところにpタグが入ることがあり、入るのは仕方がないとしてビジュアル的に改行されるのを防ぐためにdisplayを無しとしました。

各種ギミック

CSSによる装飾に加えて、ページをPC、タブレット・スマホのどちらで見ているかによって分岐する各種ギミックを導入しています。このギミックはサイズに応じて動作開始の条件を下記のように分けていています：

画面サイズ1024px以下はスクロールして可視領域に入ったら自動的に開始
画面サイズ1025px以上はマウスがホバーしたのを条件に開始

それぞれのギミックについてまとめたページを用意しましたので、興味のある方はこちらもご参照ください。

CSS応用編: ホバーエフェクト
https://yusakudays.com/web/css-hover-effect/

jQuery練習: スクロールエフェクト
https://yusakudays.com/web/jquery-scroll/

まとめ

特急で作ったコンテンツに対して特急で書いた解説ですが、自分にとっては良い備忘録となったと思いますし、今後同じようなエフェクトを作ろうとしている人にとって少しでもお役に立てれば幸いです。いずれはゴリゴリレスポンシブな日本の山や地域紹介サイトを外国人向けにでも作ってみたい。

Yusaku Days

CSS基礎編：各種装飾設定

ソースコード

もくじ

コンテンツのリンク、影、隙間

背景

枠線

タイトル

ボタン

その他

各種ギミック

まとめ