カテゴリー別アーカイブ: Responsive

レスポンシブサイトでイメージマップ（クリッカブルマップ）を設置する方法

1つの画像に複数のリンクを設置したいときに便利なイメージマップですが、レスポンシブサイトだと表示サイズによって1つのリンクしか反応しなくなります。
これはイメージマップの範囲がレスポンシブのように拡大縮小しないから。

レスポンシブサイトでイメージマップを利用したいときは「jQuery RWD Image Maps」というプラグインが便利です。
これでイメージマップの範囲も画像に合わせて拡大縮小します。
https://github.com/stowball/jQuery-rwdImageMaps

プラグインの読み込みとスクリプトの記述は下記。
━━━━━━━━━━━━━━━━━━━━
<script type=”text/javascript” src=”js/jquery.rwdImageMaps.min.js”></script>
<script type=”text/javascript”>$(‘img[usemap]’).rwdImageMaps();</script>
━━━━━━━━━━━━━━━━━━━━

また、イメージマップのコード生成には「HTML Imagemap Generator」が便利
http://labs.d-s-b.jp/ImagemapGenerator/

HTML Imagemap Generator

まずは画像をドラッグして読み込み

HTML Imagemap Generator

四角形・円形・多角形を選択し領域を作成します

※この記事は2018年12月現在の内容です。リンク先のドメイン変更やサイト構成変更によってリンク切れになる場合もあります。ご了承ください。

ブラウザチェック用 App

HP制作では、色々な環境で動作チェックをする必要があります。
PC以外（スマホ、タブレット等）の画面サイズチェックは、以前 miyakawa が紹介していましたが、今回はOS毎の各ブラウザチェックに便利なアプリをご紹介します。

Sauce
Mac App Store で紹介されている無料アプリです。（全機能を使う場合は有料）
https://itunes.apple.com/jp/app/sauce/id564308477?mt=12

Sauce

閲覧したいURL、OS、ブラウザ、画面サイズを選択してNavigateをクリック！（画面はお試し使用時）

使い心地は…というと、上記URLのレビューにもある通り「重い」。
でも、画面チェックとしてはかなり使えると思います。
ちなみに、全機能を使うならユーザー登録（無料 or 有料）が必要みたいですが、IE6〜10なら登録をしない「お試し」でもチェック出来ました。
ちなみにNavigateボタンをクリックした後、「Connecting…」画面の画像が動かないため、一瞬「フリーズか！？」と焦りました（笑）

販売元： SAUCE LABS INC

Google Map 設置、吹き出し削除、レスポンシブ

Googleの地図をホームページに入れる方法。

Googleサイト地図より住所を入れて検索
「神奈川県横浜市青葉区青葉台1-6-21 a・cube」

「リンク」アイコンをクリックするとウェブサイトへの地図埋め込み用 HTML コードがでるのでその中の「埋め込み地図のカスタマイズとプレビュー」をクリック。


地図の大きさを「大」にしてズームを調整し埋め込むHTMLをコピーして、自分のサイトへHTMLをペーストする。

実際に見ると吹き出しが表示されるので、吹き出しを非表示にする

HTML内の/iframeの最後の前部分に「&amp;iwloc=B」を追加
<iframe width=”640″ height=”480″—————–
————————–;output=embed&amp;iwloc=B“></iframe>

サイトがレスポンシブデザインなら「width」設定を「100%」にする。
<iframe width=”640″ height=”480″—————–
を
<iframe width=”100%” height=”480″—————–

iPhoneで見ると自動で横幅が調整される。

Bootstrap アイコン

Bootstrapは標準で140のアイコンが簡単な指定で表示できます。
黒のアイコンなら　 <i class=”icon-arrow-up“></i>
白のアイコンなら　 <i class=”icon-arrow-up icon-white“></i>
の赤字のそれぞれ入れればOKで簡単です。

さらに多くのアイコンを使用したい場合に2つのサイトを紹介します。

■Elusive Icons
271のアイコンがあります。

http://aristath.github.com/elusive-iconfont/

■Font Awesome
249のアイコンがあります。

設置方法：ダウンロードした中のCSS「font-awesome.min.css」と「font-awesome-ie7.min.css」をCSSフォルダーに入れる。
「font」フォルダーをそのまま、index.htmlと同じ階層にそのまま入れる。
index.htmlに下記の記述を追加する。
<link href=”css/font-awesome.min.css” rel=”stylesheet”>
<!–[if IE 7]>
<link rel=”stylesheet” href=”css/font-awesome-ie7.min.css“>
<![endif]–>
赤字は置いてある場所を確認して変更する。

後は使用したいアイコンをそれぞれ指定をする。
<p><i class=”icon-camera-retro“></i> icon-camera-retro</p>
<p><i class=”icon-circle-arrow-down icon-large“></i> icon-circle-down</p>
<p><i class=”icon-circle-arrow-right icon-2x“></i> icon-circle-right</p>
<p><i class=”icon-circle-arrow-left icon-3x“></i> icon-circle-left</p>
<p><a href=”#t”><i class=”icon-circle-arrow-up icon-4x“></i> icon-circle-arrow-up</a></p>
<p><i class=”icon-spinner icon-large icon-spin“></i> Spinner icon</p>

サイズを変更なら「icon-large、icon-2x、icon-3x、icon-4x」
回転させるなら「icon-spin」
をスペースの後に追加する。

http://fortawesome.github.com/Font-Awesome/

レスポンシブデザイン　ブラウザ対応にていて

レスポンシブデザインで制作した場合のブラウザ対応、非対応についてです。
ポイントはメディアクエリにブラウザが対応しているかどうかで判断しています。

viewpoint（スクリーンサイズ）のwhith（幅）、height（高さ）の指定。
この指定でブレイクポイントごとにスマートフォン、タブレット、PCと表示を変えます。

■メディアクエリ対応ブラウザ（レスポンシブデザイン対応）
IE 9 以上
Chrome
Safari 3 以上
Firefox 3.5 以上
Opera 7 以上

■メディアクエリに非対応ブラウザ（レスポンシブデザイン非対応）
IE 8 以下
Safari 2 以下
Firefox 3 以下

レスポンシブデザインに非対応であっても見れないという訳ではありません。
従来通りスマートフォンなどで見ると小さく全体が見れるということです。