講師コラム

初心者の為のCSS: 画像の上に文字や画像を重ねる方法 – 後編

  • このエントリーをはてなブックマークに追加

前回(初心者の為のCSS: 画像の上に文字や画像を重ねる方法 – 前編)はpositionプロパティは使用することで画像や文字を重ねることが出来るということをご説明しました。

absoluteとrelativeは非常に使い勝手は良いですが、慣れるまでは癖が強いために難しく感じてしまうかもしれません。

そこで、後編では予告通りabsoluteとrelativeを利用したレイアウトと、そのまま使えるコードを付けてご紹介します。
ブログのサムネイル付き記事一覧、ECサイトの商品一覧などで使用できるような汎用性の高いレイアウトをご用意したので幅広いシーンで利用が可能です。

是非色々なコードを試して、オリジナルレイアウト作成にチャレンジしてみてください。

「NEW」アイコンをつける

新着記事や、新商品などに着けるとアイキャッチとして有効です。
“new_icon”のクラスで分岐させることができるため、Wordpressで使用している方はphpに新着アイコン表示期間を判定するループを作成しクラスのつけ外しを自動化させると楽かもしれません。

四角いNEWアイコン

CSS
.p_box{
 width: 200px;
 height:130px;
 border: 1px solid #ccc;
 position: relative;
}
.new_icon:after{
 position: absolute;
 content: “NEW”;
 top:-10px;
 left: -5px;
 background:#C00000;
 color: #fff;
 padding: 2px 15px;
}
.p_box img{
 width: 100%;
}
HTML
<div class=”p_box new_icon”>
 <img src=”sample_img.jpg” alt=””>
</div>

丸いNEWアイコン

CSS
.p_box{
 width: 200px;
 height:130px;
 border: 1px solid #00DE94;
 position: relative;
}
.new_icon:after{
 position: absolute;
 content: “new”;
 top:-10px;
 left: -10px;
 background:#00DE94;
 border-radius: 50%;
 color: #fff;
 padding: 10px 5px;
}
.p_box img{
 width: 100%;
}
HTML
<div class=”p_box new_icon”>
 <img src=”sample_img.jpg” alt=””>
</div>

「詳しく見る」アイコンをつける

トップページからのカテゴリ分類や、特集ページからの誘導用によく見られます。
CSSで文字を入れるため1行を修正することで適用している全箇所を修正することが可能です。

右下に「more」アイコンをつける

CSS
.p_box{
 width: 200px;
 height:130px;
 border: 1px solid #ccc;
 position: relative;
}
.more_icon:after{
 position: absolute;
 content: “more”;
 bottom: 0;
 right: 0;
 background:#333;
 color: #fff;
 padding: 5px 15px;
}
.p_box img{
 width: 100%;
}
HTML
<div class=”p_box more_icon”>
 <img src=”sample_img.jpg” alt=””>
</div>

右下に丸い矢印アイコンをつける

CSS
.p_box{
 width: 200px;
 height:130px;
 border: 1px solid #777;
 border-radius: 10px;
 position: relative;
}
.more_icon:after{
 position: absolute;
 content: “\003e”;
 font-size:10px;
 bottom: 3px;
 right: 3px;
 border-radius: 50%;
 background:#555;
 color: #fff;
 font-weight: bold;
 padding: 10px 13px;
}
.p_box img{
 width: 100%;
}
HTML
<div class=”p_box more_icon”>
 <img src=”sample_img.jpg” alt=””>
</div>

右下に「詳しく見る」アイコンをつける

CSS
.p_box{
 width: 200px;
 height:130px;
 position: relative;
}
.more_icon:after{
 position: absolute;
 content: “> 詳しく見る”;
 font-size:10px;
 bottom: 3px;
 right: 3px;
 background:#fff;
 color:#BF9000;
 font-weight: bold;
 padding: 10px 15px;
}
.p_box img{
 width: 100%;
}
HTML
<div class=”p_box more_icon”>
 <img src=”sample_img.jpg” alt=””>
</div>

カテゴリ名やタイトルを掲載する


記事一覧や商品一覧ページでよく見られます。
サムネイルや商品画像に被せることで、より記事や商品と画像を結び付きやすくすることができます。

カテゴリ名とタイトルを画像の上に表示させる

CSS
.p_box{
 width: 200px;
 height: 130px;
 border: 1px solid #777;
 position: relative;
}
.p_box li{
 position: absolute;
 background:rgba(10,10,10,0.80);
 color: #fff;
 padding: 10px ;
}
.p_box .tag_area{
 font-size:8px;
 top: 10px;
 left: 0;
}
.p_box .title_area{
 width: calc(100% – 20px);
 font-size:12px;
 bottom: 0;
 left: 0;
}
.p_box img{
 width: 100%;
}
HTML
<div class=”p_box”>
 <img src=”sample_img.jpg” alt=””>
 <ul>
  <li class=”tag_area”>CSS</li>
  <li class=”title_area”>初心者の為のCSS:2017年流行レイアウト15選+テンプレート付き</li>
 </ul>
</div>

番外編:「セール」や「割引」アイコンをつける


商品に期間限定やタイムセールなど一時的に割引になる際にはCSSで装飾をすることで画像一つ一つを編集しなくて済むため非常に作業が楽になります。

割引価格を表示させる

CSS
.p_box{
 width: 200px;
 height: 130px;
 border: 1px solid #777;
 position: relative;
}
.p_box img{
 width: 100%;
}
.p_box div{
 position: absolute;
 bottom: 5px;
 right: 5px;
 min-width: 35px;
 background:#FF3300;
 color:#fff;
 font-size:12px;
 padding: 10px;
 text-align: center;
}
.p_box div span{
 font-size: 24px;
 font-weight: bold;
 margin-right: 5px;
}
.p_box div:after{
 content: “\Aoff”;
 white-space: pre ;
}
HTML
<div class=”p_box”>
 <img src=”sample_img.jpg” alt=””>
 <div><span>10</span>%</div>
</div>

タイムセールアイコンをつける

CSS
.p_box{
 width: 200px;
 height: 130px;
 border: 1px solid #777;
 position: relative;
}
.p_box img{
 width: 100%;
}
.p_box:after{
 position: absolute;
 top: 0;
 left: 0;
 content: url(“./sale_icon.png”);
}
HTML
<div class=”p_box sale_icon”>
 <img src=”sample_img.jpg” alt=””>
</div>

まとめ

今回はよく見るレイアウトを中心にご紹介しました。
冒頭でも記載した通り、absoluteとrelativeを使いこなせるようになると格段に表現の幅が広がります。
是非色々なレイアウトを試してみてくださいね。

次回の「初心者の為のCSS」はグローバルナビゲーションメニューを横並びにする方法についてをご紹介します。
→ 初心者の為のCSS:コピペでOK!横並びナビメニュー10選

  • このエントリーをはてなブックマークに追加

話題をチェック!

2017年11月2日

Excel VBA小技コラム – セルの検索

表計算ソフトのExcelは非常に便利なソフトですね。数字の計算からグラフ・抽出まで簡単な操作で出来ます。こんな便利なソフトですが、複雑な計算をさせたり、多くの条件で分けて計算をする際には、さすがに標準の数式では限界があり …続きを読む

2017年5月25日

SNSの危険性を忘れていませんか?

パソコンは一人一台以上、スマホ等のモバイルデバイスの普及によって、日常的にインターネットの世界とふれる時代となりました。それに伴って、年代や社会的地位を問わずSNS(ソーシャル・ネットワーキング・サービス)が一般的に利用 …続きを読む

2017年9月8日

WordPressの動画サムネイルを設定する方法

今回は記事に動画を埋め込んだ場合の、動画に任意のサムネイル(動画再生前に表示させておく画像)を設定する方法についてご紹介します。 WordPressの「メディアを追加(embed)」ではサムネイル設定できない WordP …続きを読む