レスポンシブWebデザイン一覧

2015.09.02

レスポンシブWebデザインでiPhoneのバージョンios8.4.1でリンクが飛ばない

レスポンシブWebデザインでiPhoneのバージョンios8.4.1でリンクが飛ばない

レスポンシブWebデザインでiPhoneのバージョンios8.4.1でリンクが飛ばない現象が起きました。原因はマウスオーバーアクション(hover)による設定かと思われましたが、他の設定を検証。cssのopacityで設定するとリンクが飛ばないなら何で設定したら良いのでしょうか。

2015.05.08

レスポンシブWebデザインでスマートフォンで表示される電話番号にリンクを張る方法

レスポンシブWebデザインでスマートフォンで表示される電話番号にリンクを張る方法

レスポンシブWebデザインを適用した際は、スマートフォン(タブレット)でも最適化されて見られる様になります。PCでは電話番号は記載するだけですが、スマートフォン・タブレットの場合は直接タップして電話できた方がユーザーの手間も省けます。 iPhoneやiPadのブラウザ「safari」の場合は自動で電話番号にリンクが張られ、タップして電話を掛ける事ができますが、「chrome」や「Android端末」では自動でリンクが張られず、そのままでは電話番号をタップできません。Javascriptを使ってスマートフォン・タブレットで電話番号をタップ出来る処理をしていきましょう。

2014.09.21

レスポンシブの設定対応が変わる?iPhone6/iPhone6+の画面サイズを調べてみました

レスポンシブの設定対応が変わる?iPhone6/iPhone6+の画面サイズを調べてみました

iPhone6/iPhone6+が発売されましたね。テレビを見ていると沢山の人達が並んで、発売時間になるとアップルストアースタッフとハイタッチしながらお店に入っている光景が。これを見ていると「あぁ~、新しいapple製品が発売したな~」という感じです。もう見慣れた光景になってきてます。レスポンシブWebデザインの事を考えると素通りはできませんので、表示されるサイズなどまとめておきます。

2014.08.29

レスポンシブWebデザインでも使える、1枚の画像でborderを使って4つ角にピッタリの背景に枠をつける方法

4つ角にピッタリの背景に枠をつける方法

レスポンシブWebデザインを使用した際、背景を各端末にピッタリ合わせる為に各端末サイズの背景を用意する事があります。ですがborderを使う事で1枚の画像で各端末の背景をピッタリ合わせる事が出来たら更新なんかも間違いなく安心して出来ますね。では枠を使った背景画像を各端末毎にピッタリ合わせちゃいましょう。

2014.04.07

レスポンシブWebデザインで使いたいiPhone・iPad・Androidでjavascriptを実行させない方法

実行させない

レスポンシブWebデザインで邪魔になるjavascript。レスポンシブWebデザインを採用した際に、パララックスサイトを作った時とかスクロールされなかったりするなど、PC用サイトで実行しているjavascriptが邪魔になる時があります。PC以外の端末で必要なjavascriptのみ実行できれば解消できますので、iPhone・iPad・Androidなどで不要なjavascriptは実行させないようにしちゃいましょう。

2014.03.26

レスポンシブWebデザインでブラウザの幅を狭めた時にメニューをアコーディオンにする方法

アコーディオン

レスポンシブWebデザインはブラウザの幅によってレイアウトを変更できます。その時にメインナビゲーションも押しやすい様に変更しますが、縦にズラーっと並んでしまうとスクロールする時にコンテンツにたどり着くまでに無駄に長くなってしまいます。ブラウザサイズによってナビゲーションがアコーディオンの様に収まりがよくなると使いやすいかと思います。ブラウザの幅によってメニューが変更できる「MeanMenu.js」を使ってみましょう。

2014.03.22

レスポンシブWebデザインでブラウザサイズによって画像を差し替える「Responsive Img」

Responsive Img

レスポンシブWebデザインでちょっと困ってしまう事。それは画像です。正方形に近かったり、4:3になってる画像はスマフォ対応にしてもさほど見づらくないと思います。ですが、タイトルなど横長の画像はスマフォで見た時にとっても小さくなってしまいます。例えば横900pxのタイトルが320pxに縮まった時は、もう読めたもんじゃありません。ブラウザサイズが変更になったら画像を差し替えた方が、スマフォでも綺麗なサイトが表現できます。ブラウザサイズによって画像を差し替える事ができる「Responsive Img」を使ってみましょう。

2014.03.17

レスポンシブWebデザインサイトを作る時に必要なデバイスのモニターサイズをまとめました

デバイスサイズ

レスポンシブWebデザインをする時に「スマートフォン」「タブレット」「PC」と大きく分けて3種類になります。だからと言って、レスポンシブWebデザインの対応が3種類という訳ではありません。今みなさんが使っているスマートフォンやタブレットは全部同じじゃないですよね。iPhone、Android、iPad、iPad miniなどなど。探してたら、「こんなにあったっけか・・・?」と思うくらいでした。CMでJCOMさんも10万人にタブレット型テレビらしきものが当たるキャンペーン的な(曖昧ですみません)ものも行っている様ですし、これからもっともっと増えるのかもしれませんね。という事で、現段階でよく使われているデバイスのサイズをまとめてみました。

2014.03.13

ブラウザサイズでデザイン変更「レスポンシブWebデザイン」の基本

レスポンシブWebデザイン

最近ではスマートフォン、iPadの様なタブレット、PCサイトとWebサイトを展開するデバイスが沢山あります。合わせて専用のコンテンツを用意する。こうなるととても大変になってきます。レスポンシブWebデザインとは1つのコンテンツで多様なデバイスに対応する事ができる手法です。ブラウザのサイズに対応して各デバイスにデザインがフィットすればいくつも専用コンテンツを作る必要は無くなります。ただ、1つのデバイスで簡単にデザインが変更できるというものではありません。スマートフォン専用コンテンツが必要であれば、必要な制作物もあります。あくまで「多様なデバイスに対応できるWebサイト」という事です。

2014.02.28

レスポンシブWebデザインで気をつけたいWordPressのキャプションの使い方

レスポンシブWebデザインを採用した際、各端末によって横サイズが変わる様にしていると思います。もちろん画像もそうです。imgに対してwidth:100%;等の設定をしていますが、画像にキャプションを設定するとリサイズが効かない様です。キャプションを使わない場合もあるのでちょっと忘れがちになっちゃいます。レスポンシブデザインと言うとスマフォ?と思いがちですが、PCでもタブレットでも同じ事が言えるので最初から設定しておいた方が崩れがないです。