今回は久しぶりに本業の記事を書いてみたいと思います。
昨今、インターネットにアクセスしているデバイスは、PCの比率をスマホやタブレットが上回っています。
これからもますます顕著になっていくでしょう。
レスポンシブデザインが登場して随分と時間も経ち、PCを除くデバイス環境は目まぐるしく変化しています。
※PCでも解像度が上がっていることはありますが。。。
スマートフォンではiPhoneにやAndroid、タブレット端末ではそれらに加えてWindows10があります。レスポンシブはそれら全てに対応をすることがユーザービリティーを上げることは言うまでもありません。
しかし、それに対応するには制作側で確認作業に相当な時間とスキルが求められます。それは、書くコードでAndroidでは動作するがiOSでは動作しないなどの問題が出てきます。
Google Chromeのデベロッパーツールで各デバイスの表示状態が確認でき便利にはなりましたが、マウスオーバーなどの振る舞いまで完璧に再現されるわけではありません。
今回掲載したコードは、HTMLのソースコードが非常にシンプルで管理しやすいのが特徴です。これもかなり苦労の末たどり着いたコードです。みなさまのお役に立てればと思い掲載しました。
また、サムネイル画像に指定したサイズ「44px」はタッチデバイスにおける最小限のpxサイズです。覚えておくと非常に便利です。
以下に例として、サムネイル画像にPCではマウスオーバー、タッチデバイスではタッチすると大きな画像と入れ替わるものです。
以下が上記のコードになります。
■CSS
/* マウスオーバー画像入れ替え */
.imgonmouse {
margin: 10px;
overflow: hidden;
width: 300px;
}
.imgonmouse img {
margin-top: 10px;
margin-bottom: 10px;
}
.imgonmouse ul {
padding: 0px;
margin-top: 0px;
}
.imgonmouse ul li img {
height: 44px;
width: 44px;
border: 1px solid #CCC;
padding: 2px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;
}
.imgonmouse ul li {
list-style-type: none;
margin: 0px;
padding: 0px;
float: left;
}
■JavaScript
//タッチデバイス対応マウスオーバー画像切り替え
<script type=”text/javascript”>
jQuery(document).ready(function($) {
var _src = ”,
_target = ”;
$(‘.imgonmouse li > img’).on({
‘touchstart, mouseenter’: function (e) {
_target = $(this).data( ‘targetid’ );
_src = $(this).attr(‘src’);
$(‘#’ + _target).attr(‘src’, _src);
},
‘touchend, mouseleave’: function (e) {
}
});
})
</script>
■HTMLコード
<div class="imgonmouse">
<div><img id="imgonmouse_main" src="https://andp.jp/wp-content/uploads/2017/11/bazf1.jpg?ssl=1" width="300" height="300" /></div>
<ul>
<li><img src="https://andp.jp/wp-content/uploads/2017/11/bazf1.jpg?ssl=1" width="280" height="280" data-targetid="imgonmouse_main" /></li>
<li><img src="https://andp.jp/wp-content/uploads/2017/11/bazf2.jpg?ssl=1" width="280" height="280" data-targetid="imgonmouse_main" /></li>
<li><img src="https://andp.jp/wp-content/uploads/2017/11/bazf3.jpg?ssl=1" width="280" height="280" data-targetid="imgonmouse_main" /></li>
<li><img src="https://andp.jp/wp-content/uploads/2017/11/bazf4.jpg?ssl=1" width="280" height="280" data-targetid="imgonmouse_main" /></li>
<li><img src="https://andp.jp/wp-content/uploads/2017/11/bazf5.jpg?ssl=1" width="280" height="280" data-targetid="imgonmouse_main" /></li>
</ul>
</div>
ホームページ制作、ウェブデザインのご用命は弊社まで
