CSSとクエリパラメータでバナーの管理が超楽ちんになる小技

こんにちは。GWは楽しめましたか？
私はゴルフ→キャンプ（1泊）→お食事会という詰め込んだ二日間の反動から残りを寝て過ごすというメリハリの有る有意義なGWでした！
実はリア充志向ではなく引き篭もりたい派なので朝から一度も外出しない日に魅力を感じています。よくリア充の様に見られるのですが、あくまで仕事を通じてのリア充なだけなのでプライベートは反動からおとなしく過ごしたいんでしょうね。

さて、本日は主に楽天市場、もしくは自社サイトなどのCSSが外部呼び出し可能なサイトでCSSとクエリパラメータを使用した便利な小技です。楽天では画像の枚数を気にせずに何枚でもバナーを詰め込むことが出来ます。

1. CSSセレクタの話
2. URLクエリパラメータとは
3. 組合せて使用する実例
4. まとめ

CSSセレクタの話

CSSのセレクタといえば一般的には「.」を使用したクラスと「#」を使用したID、要素セレクタ（各種タグ）などですね。
その他にも以下のような物があります。

*（全ての要素に適応）

リセットCSSで使用するものですね。

E F （子孫要素セレクタ）

p a {display:block}
セレクタを半角スペースで切って下層の要素を選択します。

セレクタで1記事になってしまいそうなので中略します（笑
↓これが、今回の大事なセレクタ↓

E[foo$=”bar”]　（属性の値が指定した文字で終わる場合に適用する【CSS3】）

<a href=”~~~.com/#mail_button”>お問い合わせ</a>

a[href$=”#mail_button”] 

これでIDをやクラスを使用せずにaタグのアンカーがmail_buttonだけにCSSを適応させることが出来ます。
その他にも意外と知らないセレクタがありますのでコチラで確認してください。
http://weboook.blog22.fc2.com/blog-entry-268.html

URLクエリパラメータとは

さて、次はURLクエリパラメータです。何となく難しい気がしますが気のせいですｗ
簡単に言うと表示させるURL「~.com/mail.html」の後ろに任意の内容を組合せてURIを設定する方法です。URIとはURLの総称です。詳細は別の機会に。

URLクリエパラメータとは、？「~.com/mail.html?XXXXXX」という用に？以降に任意の文字を挿入することです。

広告の効果検証などで使用されたり、UI/UXの検証などでも使用されていますね。

これを組合せてhtmlタグにIDなどの要素をたさずにhref要素の中でIDを設定するという小技が実現します。

組合せて使用する実例

<a href=”http://item.rakuten.co.jp/xxxxxxxxx/zen3-laser-shock/?ban_promotion001”></a>

a [href$=”zen3-laser-shock/?ban_promotion001”]{
display: block;
	width: 98%;
	height: 150px;
/*バナーのURL*/
	background: url(http://image.rakuten.co.jp/xxxxxxx/cabinet/images/xxxxxxx.jpg) no-repeat 50% 50%;
	border: 1px solid #333;
	overflow: hidden;
	text-indent: -99999px;

}

もちろんメディアクエリにも対応します。

@media screen and (min-width: 769px){a{
		
		display: block;
		width: 650px;
		height: 150px;
		background: url(http://image.rakuten.co.jp/xxxxxxx/cabinet/images/xxxxxxx.jpg) no-repeat 50% 50%;
		border: 1px solid #333;
		overflow: hidden;
		text-indent: -99999px;
	
	}
}

PCとスマホで幅を設定することが可能です。

えっ？これの何が便利って？

楽天のスマホ商品ページでは画像の枚数制限が有ります、緩和されたおかげで普通にimgタグで問題ありませんが商品説明文が長いうえに関連の商品リンクが多いパターンなどでは大活躍します。また、リンク先は同じだけどPCとスマホでバナーの内容を切り替えたい。こういった需要にも柔軟に対応できますね。

また、CSSで管理するので書き換えも容易ですね。

レスポンシブ対応の見本を置いていますので見てみて下さい。

「サンプル」

まとめ

少し早足で説明でしたが、一度触ってみて下さい。使い方次第でかなり有益な使いかたができますよ。