超軽量なレスポンシブフレームワーク「Responsive Grid System」を使う

ResponsiveGridSystem_01

備忘録です。WEBデザイナーでもエンジニアでもないが、レスポンシブ対応のサイトを作る際には軽量でかつ扱いやすいフレームワークを利用するとよい。当サイトは以前miで、丁度versionが3に上がったbootstrap3を利用して制作した。久しぶりにサイトを覗いてみたがbootstrap4というものは出ていないようだったのと、bootstrap臭を消すほどのカスタマイズはしたくなかったので、Responsive Grid Systemというフレームワークを利用することにした。

カスタマイズした箇所

レスポンシブな画像:フレームワーク自体にはほぼ手を入れていない。せっかくのレスポンシブ対応のグリットシステムなのに画像のレスポンシブ対応は自分でしなければいけない。画像全体になってよいのであれば、
img{max-width:100%;height:auto;width /***/:auto; /*IE8のみ適用*/}
とでも記載しておく。

画像のポップアップ:昔のlightbox風なものを簡単にやりたく、あまり入れたくなかったがjsフレームワークのjQuaryを入れて、Magnific Popupというプラグインをいれてみた。簡単設定で非常に良い。変なこだわりがないほうがよい。公式サイトに色々な設定方法が記載されているが自分はclass=”photos”で囲まれた画像でローテーションしてほしかったので下記のように記載した。下の例だとaタグで囲まれた画像をギャラリー形式で表示する。最後はネットの偉人な方のブログから転載させてもらったaltに記載したことをtitleとするという設定。

<script>
$(function(){
$(‘.photos’).magnificPopup({
delegate: ‘a’,
type: ‘image’,
gallery: { enabled: true },
image: { titleSrc: function(item) { return item.el.find(‘img’).attr(‘alt’);} }
});
});
</script>

トップバナースライド:ローテーションビッグバナーは少し廃れてきたけれども、お店のサイトをつくるときなどは非常に扱いやすいアイテム。magnific Popupと同じくjQuaryを使うslickというプラグインを入れてみた。矢印が小さかったのだが、デザイン用のCSSを弄ることで、ドットのサイズや左右矢印のサイズを変更することが可能。設定は公式サイトをみてもらえればよいのですが、class=”slider”で囲まれた画像がスライドになる。下記の例だとドットと矢印と自動ローテーション、2500msで切り替わるという設定になっている

<script>
$(function() {
$(‘.slider’).slick({
accessibility: true,
dots: true,
arrows: true,
autoplay: true,
autoplaySpeed: 2500
});
});
</script>

まとめ

年々WEB制作の現場も変わってきているのと、素人でも調べながらなんとか作れるようになってきているし、かわりにそもそも自分でコーディングする必要ないと感じる。が何か作るという点においては、WEB制作って楽しい。ビジネスだと個人商店でなおかつtoCサービスであるならWEBサイトにお金をかけてまで作る必要はないなと思う。例えば日常消費の飲食店などは、食べログやホットペッパーへの掲載、facebookとgoogleのサービスの利用(ローカルビジネス)で十分でなはいかと思う。

Tips (43件)の新着記事