CSS3アニメーションでつくるインターフェイス表現

第5回 画像にポインタを重ねるとキャプションが現れる

この記事を読むのに必要な時間:およそ 5.5 分

今回のお題は,画像にキャプションを示すアニメーションだ。マウスポインタを画像に重ねると説明書きが現れるサンプル1)。画像にもちょっとしたアニメーションが加えてある。用いる設定は,さほど目新しいものではない。組み合わせや細かな調整を加えてつくり上げた表現だ。

サンプル1 CSS3: Hover effect of an image and a caption

キャプションを加えた画像の静的スタイル

<body>要素に書くコードはつぎのように構成した。画像の<img>要素に続けて<div>要素class属性"mask")を置き,<div>要素の中に,タイトルの<h3>要素class属性"figure-title")と説明書きの<div>要素class属性"figure-caption")を加えた。それらを<div>要素class属性"figure")でひとつにまとめ,さらに<div>要素class属性"container")で包んでいる。

<div class="container">
    <div class="figure">
        <img src="images/photo_001.png" alt="pen" width="300" height="200">
        <div class="mask">
            <h3 class="figure-title">Figure Title</h3>
            <p class="figure-caption"><!-- テキスト省略 --></p>
        </div>
    </div>
</div>

この<body>要素の記述に対して,つぎのような<style>要素を与える。画像にキャプションを重ねただけで,まだアニメーションもマウスインタラクションもない図1)。なお,CSSにベンダープレフィックスを付けなくて済むように,<script>要素で-prefix-freeを読み込んでいる(第1回のベンダープレフィックスと-prefix-freeの項参照)。

<script src="lib/prefixfree.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" type="text/css">
<style>
img {
    vertical-align: bottom;
}
.container {
    width: 340px;
    margin: 20px auto;
    cursor: default;
}
.container::after {
    content: "";
    clear: both;
    display: block;
}
.figure {
    position: relative;
    color: white;
    overflow: hidden;
    float: left;
    margin-left: 20px;
    font-family: "Open Sans", sans-serif;
}
.figure-title,
.figure-caption {
    position: absolute;
    left: 20px;
    width: 260px;
    text-align: center;
}
.figure-title {
    top: 10px;
    font-size: 24px;
    font-weight: 600;
}
.figure-caption {
    top: 60px;
    font-size: 12px;
    font-weight: 400;
}
</style>

図1 画像に重ねられたキャプション

図1 画像に重ねられたキャプション

Google Fontsと回り込みの解除

アニメーションに取りかかる前に,2つほど補っておく。ひとつは,Google Fontsのフォントを使ったことだ。サイトのページ左側にある検索のフールドやフィルタで好みのフォントが絞り込める。今回はOpen Sansを用いた図2)。[Quick-use]のボタンから開くページで,選べるオプションや<link>要素の書き方などが示される。

図2 Google FontsのフォントOpen Sans

図2 Google FontsのフォントOpen Sans

もうひとつは,つぎのような::after擬似要素clearプロパティの定めにより,画像への回り込みを解除していることである(「CSS の after 擬似要素で回り込みを解除する参照)。サンプル1は回り込むものがないので,このCSSの記述はなくても問題ない。だが,以下のコードのように<div>要素class属性"container")の後に<p>要素でテキストを加えると,画像に回りこんでしまう図3上)。::after擬似要素の記述を加えることで,これが防げる図3下)。

.container::after {
    content: "";
    clear: both;
    display: block;
}
<div class="container">

</div>
<p><!-- テキスト省略 --></p>

図3 ::after擬似要素で回り込みが解除される

図3 ::after擬似要素で回り込みが解除される

図3 ::after擬似要素で回り込みが解除される

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入