カテゴリー: ITトレンド

こんにちは！最近映画で号泣して次の日目が腫れた岩間です！
さて、2回に渡って紹介してきたスマホ対応、今回が最後になります！
今回は要素の高さを揃えてくれるjQuery「AutoHeight」を使ったレイアウトです♪

これまでの記事をまだ読んでいない方は併せてどうぞ！
>>なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第1回/全3回）

見る環境によって画像一覧の見え方を変える

説明文の長さによって高さがバラバラになったリストを、要素の高さを揃えてくれるjQuery「AutoHeight」を使って整えます。
今回は、前回までとは違ってcssでの分岐も併せて解説していきます♪

折り返す列の数を設定する

2列で表示したいのは小さいスマホだけなので、それ以上は3列で表示することになります。
別で新しく分岐を設定してもいいのですが・・・
今回はこれまで設定してきた分岐があるので、一緒に書くことにしました。

実は、前回設定した変数の中で小さいスマホ用に設定したものだけ使っていなかったんですが、気付きましたか？

var spWidth = '小さいスマホのサイズ';

これです！
前回作成したJavaScriptに小さいスマホの切り替えを追加します。

if ( spWidth > screen.width) {
$('meta[name=viewport]').attr('content',spView);
}

画像一覧用の処理を入れるだけだと他の処理が無視されてしまうので、Viewportの分岐も入れておきます。ViewportとAutoHeightで実質4種類の分岐になりますね。

小さいスマホ、大きいスマホ、タブレット、PCの分岐に、AutoHeightにあらかじめ用意されているコードをそれぞれ追加します！

/*2つごとに1回、回り込み解除*/
$('高さを揃えたい要素').autoHeight({column:2,clear:1});

/*3つごとに1回、回り込み解除*/
$('高さを揃えたい要素').autoHeight({column:3,clear:1});

これで、2列と3列の分岐ができました！

でもまだこれで完成ではありません。
大きいスマホ用に3列に設定しても、そのままだとリストの大きさが2列用のままで
画面内に収まらない分は折り返してしまいます。

画面幅にきれいに3列並ぶよう、メディアクエリを使って調整していきます！

装飾用のファイルで切り替える

メディアクエリは、cssの機能の1つで、画面のサイズに応じて適用するスタイルを振り分けられる機能です。
例えば、PCでは400pxで表示していたものをスマホでは200pxで表示するように設定できます。

メディアクエリで、画像一覧を大きいスマホでは3列で表示するように設定していきます！

@media screen and (max-device-width:大きいスマホの画面幅){
li{
width:画面幅の3分の1;
}
img{
width:100%;
height:auto;
}
}

たったこれだけでリストもきれいに表示することができました！
画像の横幅を100%にすると画像を囲っている要素の幅に応じて可変してくれるので、いろんなところで使ってます(^o^)

これで動作を確認してみると、PC・タブレット・スマホで崩れることなく表示できました！
画面幅で切り替えているので、スマホを横向きにした場合にも対応しています♪

もっともっと簡単で確実な方法もあるかと思いますが、今回は端末ごとに分けることでわかりやすいコードになったと思います。

あとがき

全3回に渡って紹介してきた、なるべく沢山のスマホ・タブレットで快適に見られるレイアウトの実現、いかがでしたか？

今回記事を書いたことで私自身も改めて勉強になりました。
学んだことを伝えるってすごく難しいですね；；

ここまで読んでくださってありがとうございました(*^^*)

第1回：なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第１回/全３回）
第2回：なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第２回/全３回）

こんにちは！やっと風邪に勝利した岩間です。
さて、今回と次回にかけて、設定したJavaScriptを紐解きながら解説していきます！

前回の記事をまだ読んでいない方は併せてどうぞ！
>>なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第1回/全3回）

表示領域をスマホごとに合わせる

○その1　ページ全体を画面に合わせる

ページ全体が縮小されてしまうため、スマホ用にViewportを設定します。
スマホごとに違う画面幅に合わせるため、meta要素を追加しました。

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-widthで画面幅に合わせ、initial-scale=1でページの倍率を指定しています。
これで、スマホページでも綺麗に表示することができました！

○その2　タブレットだけ表示領域を固定する

タブレットでPCページを表示すると、一部のコンテンツが画面からはみ出てしまいました。PCページをタブレットの画面幅で表示するのは少し難しいようです・・・。
でも、崩れているのはタブレットだけなのでmeta要素自体は変えたくない！

何かいい方法はないかと調べてみると、要素の中身だけを切り替えられるコードを見つけました！
そのコードを参考に設定したJavaScriptを早速解説していきます。
今回の目的は、タブレットだけViewportを切り替えることです。
タブレットでは、PC表示でのコンテンツサイズに合わせて表示させたいと思います。

変数を作って必要なものをいれていく

まずは分岐させるのに必要な変数を設定していきます。
ここでの式は左辺と右辺は等しいという意味ではなくて、左辺に右辺を代入するという式なので注意が必要です！

var spWidth = '小さいスマホのサイズ';
var tbWidth = '大きいスマホのサイズ';
var maxWidth = 'タブレットのサイズ';
var spView = 'スマホで表示するための設定';
var tbView = 'タブレットで表示するための設定';

表示を切り替えるコードを書いていく

今回は、画面を横に倒したときにもjQueryが実行されるようにイベントを設定しました。
この中に、「もし○○の時△△を実行し、□□の時は××を実行する」という分岐を以下の内容で設定します。

1. 画面幅がtbWidthより小さい時、ViewportをspViewにする
2. 画面幅がmaxWidthより小さい時、ViewportをtbViewにする

$(window).on('orientationchange resize',function(){
	if /* 1 */( tbWidth > screen.width ){
	　/* 処理 */$('meta[name=viewport]').attr('content',spView);
	}
	else if /* 2 */(maxWidth > screen.width){
	　/* 処理 */$('meta[name=viewport]').attr('content',tbView);
	}
}).trigger('resize');

実際に切り替えてみると、meta要素が書き換わって綺麗に表示できるようになりました！

○まだ不具合が・・・

スマホとタブレットで表示領域を切り替えたことによりどの端末でも綺麗に見られるようになったと思いきや、タブレットを横にしたときに余白ができてしまいました。

この余白はなんだ？？？

よく見てみると、タブレットを横にしたときは画面幅がコンテンツサイズより大きくなっていることに気がつきました！
確かにサイズを固定してたら拡大されないですよね・・・。盲点でした・・・。
一応綺麗に見えてはいるけれど、ちょっと気になります；

そこで、タブレットが横になったときはPCで見るのと同じ表示になるようにコードを追加してみました！

/*最後の分岐に追加*/
else if(maxWidth < screen.width ){
　$('meta[name=viewport]').attr('content',spView);
}

これでどんなスマホでもタブレットでも綺麗に表示できるようになりました！
恐らくもっと簡単かつ良い方法もあるかと思いますが、端末ごとに設定することで私にはわかりやすい書き方ができたと思います(^o^)
次回はAutoHeightの設定を、cssの設定も併せて解説していきます！

第1回：なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第１回/全３回）
第3回：なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第３回/全３回）

ユーザーの利便性を向上させる「トップへ」戻るボタン

最近のホームページには必ずといっていいほど設置されている「トップへ」戻るボタン。
特に、縦に長いサイト、メインメニューが最上部に設置されているサイトでは必ずと言っていいほど使われており、ユーザーの利便性を向上させる重要な機能のひとつです。

いつの間にか現れる「トップへ」ボタン

本来ページ最下部に設置されていることが多い「トップへ」戻るボタンですが、当ホームページにはありません。ページを下へスクロールすると、突然右下にボタンが現れ、その場に常駐するようになっています。まるでボタンがそこに隠れていたみたいですね。

スクロールした時だけなのはなぜ？

ボタンがスクロールした時にだけ現れるようにしたのには理由があります。
そもそも皆さんが「トップへ」戻るボタンを使うのはどんなときでしょう？ページの内容を読んで、下へスクロールしたときですよね？次に、ボタンを押すのは一番下までスクロールしてからでしょうか？文章の途中でも最上部のメニューが必要になるときはありますよね？
そうです。この「トップへ」戻るボタンは、皆さんユーザーの利用状況を考えて設置されているのです。

ユーザーの利用状況を中心に考えたウェブデザイン

ウェブサイトやアプリのデザインはただキレイ、カッコイイというだけではいけません。ユーザーの利用状況を推測しユーザーにとって何が望ましいかを検証すること、これを「ユーザー中心設計」とも言い、デザインとってとても重要なプロセスです。なぜならユーザーがそのウェブサイトを「使いやすい」と感じることで、閲覧時間が長くなり、再訪問率の向上にも繋がるからです。

あなたのウェブサイトはユーザーのことを考えられているでしょうか？一度、ユーザーと同じ気持ちになってサイトを使ってみてください。「あれ？なんだか使いにくいな…」と感じたかたは当社にご相談を！

[contact]