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

PC向けのCSSとスマートフォン用のCSSをセットで用意します。

PC

/********** 100%画像 **********/
#main-visual{
	position: relative;
	overflow: hidden;
}
#main-visual img{
	display:block; 
	position: relative;
	margin: 0 0 0;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	width: 100%;
	min-width: 1000px;
}

スマートフォン

スマートフォンは左右カットの幅は比率で決まっているため、vwや%で、カットすればOK。
画像をPC・スマートフォンで共有化しつつ、カットも思ったとおりにできる。

/********** 100%画像 **********/
#main-visual{
	position: relative;
	overflow: hidden;
}
#main-visual img{
	display: block;
	position: relative;
	left: -20%;
	width: 140%;
}

このコードで抑えておきたいポイントは、囲んでいるメインビジュアルのdivの範囲をオーバーフローしたときにはみ出すのだが、それを、はみ出した部分を表示しない:隠すという設定を行っているところ。

overflow:hidden;

使い方によってはこのプロパティは厄介なものではあるが、こういったテクニックでは必要なもの。範囲をしっかり指定して、特性を理解した上で利用すると大変便利。

そして、そのままでは隠れなかった時・その要素の中にさらにpositionが入っている時は、自分自身、親要素である#main-visual自体をposition:relative;にしてしまう。

そうすることで、基準が親要素になり、左上からどこどこ、と指定するときに、親要素の左上のつらを0として指定することができる。

#main-visual imgで指定しているポイントは、

leftとwidthとrelative。

width: 140%;

まずはあえて画像を大きくする。そうすることで、右側に40%はみ出す部分が出てくる。先にはみ出すと変な感じがするが、このあとのマイナスの位置をずらす方法がそれで活きることに。

left: -20%;

left-20%は、マイナス位置に移動している。つまり左に20%分ずらしている。そうすることで、幅140%となっている画像の位置を中央に配置することができる。左にはみ出した幅の半分の幅40%÷2=20%を左にずらすことで、真ん中になる。右側は必然的にカットされる20%はみ出しなので、overflow:hidden;がうまく効いて隠れる。

position: relative;

位置を指定するときにはこちらをセットで記述する。

ここで紹介しているコードについて

共通のバナーをCSSでそれぞれ書き分ける理由

PCは画面が大きいので、同じ画像を使うにしても、画面いっぱい100%としておいても、大丈夫。スマートフォンだと、画面いっぱいにするとどうも縦が短くてリンク先に飛ぶことができないとかあるいは、文字が小さいといったことも。そういったときにこれは役に立つアイデア。

利点

利点としては、画像が使いまわしできること。

使い輪回しできることで得られる利点としては、

  • 画像の読み込みが1箇所ですむので早い
  • レスポンシブWebデザインに対応できる
  • 1箇所だけのソースなので、ソースコードが短くなる
  • 1箇所だけの変更で済むので、ミスが少なくなる
  • 画像をわざわざ同じようなバナーを2枚作成しなくて良くなる