ウェブサイトをスマホ対応しました

      2018/03/06

MAMEプロダクションのウェブサイトをスマホ対応いたしました。
 
PC版と同じく、スマホ版も縦と横にスライド(スマホ版の場合はフリック)できるように、
swiperというライブラリを採用しました。
 
divを入れ子にするだけで、
縦にも横にも動くスライダーの実装が可能です。
 
<div class="swiper-container swiper-container-h"><!-- 横に動く外側のスライダー -->
 <div class="swiper-wrapper">
 <div class="swiper-slide">Horizontal Slide 1</div>
 <div class="swiper-slide">

 <div class="swiper-container swiper-container-v"><!-- 縦に動く内側のスライダー -->
 <div class="swiper-wrapper">
 <div class="swiper-slide">Vertical Slide 1</div>
 <div class="swiper-slide">Vertical Slide 2</div>
 <div class="swiper-slide">Vertical Slide 3</div>
 <div class="swiper-slide">Vertical Slide 4</div>
 <div class="swiper-slide">Vertical Slide 5</div>
 </div>
 <div class="swiper-pagination swiper-pagination-v"></div><!-- 縦に動くスライダーのナビゲーション -->
 </div>

 </div>
 <div class="swiper-slide">Horizontal Slide 3</div>
 <div class="swiper-slide">Horizontal Slide 4</div>
 </div>

 <div class="swiper-pagination swiper-pagination-h"></div><!-- 横に動くスライダーのナビゲーション -->
</div>
 
 
また、今回はスケジュールを考慮して
レスポンシブではなく、PC版とスマホ版を別HTMLにしています。
 
別HTMLでの検索順位などをウォッチしながら、
必要に応じてアップデートしていく予定です。
 
 
 
ホームページのスマホ対応をお考えの方は、ぜひお問い合わせください。

 - お知らせ, ウェブデザイン ,