html/css

	ブログをはじめるログイン

レスポンシブと振り分けどちらを使うか？　[html/css]

たぶん、あまり知識の無い人だと、
　レスポンシブの方が新しい技術だからとか、
　レスポンシブの方がおしゃれとか、
　レスポンシブの方がかっこいいとか、
訳のわからん理由でレスポンシブ一択になっていると思います。w

レスポンシブwebデザインのメリットは、１つの htmlファイルで、パソコンにもスマホにも対応できること。
会社やお店のオフィシャルサイトとか、ブログとか、パソコンでもスマホでも、同じ内容を見せたい場合に使います。
内容を更新する場合にも、htmlファイルを１つ直せばいいので、お手軽です。

ところが、パソコンとスマホで、違う内容を見せたいという場合があります。
ショッピングサイトやポータルサイトなどです。
パソコンとスマホでは、利用者層が違うため、同じものを同じように表示しても成約率が異なります。
一般的にはデータベースなどを使って表示する商品を変えるなどしますが、別々に画面を作った方が利用者が使いやすくなったりします。

また、パソコン画面をフルに利用するような webサービスは、そのままスマホで表示しても使えないので、パソコン用とスマホ用で別の処理をすることもあります。
最近は、最初からスマホ専用で作る場合も多いので、パソコンで使えないという webサービスもありますね。
この場合も、振り分けして、スマホだったらログインを許可するみたいな処理になってきます。

ちょっと特殊ですが、ものすごく複雑なホームページの場合、レスポンシブにすると css がわかりにくくなったり、SEO的によくないということもあります。
レスポンシブの場合、html も css もすべて読み込みます。
パソコンで表示するのに、スマホ用の設定も読み込んでしまうということです。
html と css だけであれば、たいしたロスではないのですが、スマホ用に大量の javascript を使っているような場合、パソコンで表示するのにものすごく時間がかかってしまうということもあります。
当然、その逆もあります。

レスポンシブは、プログラムを知らなくても使えるし、便利ですが、「レスポンシブ」という言葉だけが先行している気がします。
レスポンシブでいいのか？
振り分けの方がいいのか？
誰かが、ちゃんと判断しないといけないと思うわけですよ！

作る側としては、お客さんから笑顔で「レスポンシブにして！」と言われると、「はい、わかりました」と笑顔で返すしかないんですけどね。。。

タグ：スマホパソコンレスポンシブ

2017-09-26 22:19 nice!(2) コメント(0)
共通テーマ：パソコン・インターネット

パソコンとスマホの振り分け　 [html/css]

ホームページのパソコンでもスマホでも見られるようにする場合に、レスポンシブWEBデザインを使うことはよくあります。
１つの html ファイルでパソコンにもスマホにも対応できるので、手軽で便利です。

しかし、パソコンとスマホで、まったく別の画面を表示したいという場合があります。
レスポンシブWEBデザインでもできなくはないですが、SEO的によくないし、複雑な書き方になってしまいメンテナンス性もよくありません。
（ガラケーが対象の場合は、レスポンシブでは対応できません）
なので、パソコン画面とスマホ画面を別々に作り、自動で振り分けることになります。

パソコンとスマホの振り分けは、ユーザーエージェントで判別します。
ホームページにアクセスしてきた時に、パソコンかスマホかを判断し、パソコンだったらパソコン用の html を表示、スマートフォンだったらスマホ用の html を表示します。

ユーザーエージェントをどのように判断するかは、そのホームページの仕組みによって変わってきます。
また、スマホの新しい機種が出ると、ユーザーエージェントが変わっている場合もあるので、確認が必要になってきます。

一番手軽なのは、javascript で振り分ける方法です。
javascript の利用が可能なのであれば、index.html 内に仕込みます。
スマホであれば、index_sp.html を表示します。

<!--<script type="text/javascript">
if (document.referrer.indexOf('hal.biz-box.jp') == -1 && 
((navigator.userAgent.indexOf('iPhone') > 0 && 
navigator.userAgent.indexOf('iPad') == -1) || 
navigator.userAgent.indexOf('iPod') > 0 || 
navigator.userAgent.indexOf('Android') > 0)) {
	location.href = 'index_sp.html';
}
</script>-->

javascript が利用できない環境だった場合、.htaccess に記述することもできます。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ index_sp.html [R,L]
</IfModule>

php が使えるのであれば、いろいろと応用が利くと思います。
例えば、ユーザーエージェントの他に、データベースのデータも使って振り分けるみたいな場合です。

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if((strpos($ua,'iPhone')!==false && strpos($ua,'iPad')===false) || 
strpos(ua,'iPod')!==false || 
strpos($ua,'Android')!==false || 
strpos($ua,'Windows Phone')!==false) {
	$terminal = 'sp';
	header("Location: index_sp.html");
	exit();
}
?>

※ iPad は、パソコンとして振り分けしています。

武器になるHTML

作者: 柴田宏仙
出版社/メーカー: 技術評論社
発売日: 2022/11/24
メディア: Kindle版

タグ：JavaScript 振り分けスマホパソコン htaccess PHP

2017-09-24 17:54 nice!(2) コメント(0)
共通テーマ：パソコン・インターネット

レスポンシブWEBデザインの概要とサンプル　 [html/css]

最近、ホームページの話になると、「レスポンシブ対応で」と言われることが多い。
でも、話しを聞いていくと、認識がおかしい人がたくさんいる。
画像が切り替わったり、アニメーションしたりすることが「レスポンシブ」だと思っている人が多いらしい。
他のブログとか見てても似たような記事があるので、間違った認識でいる人は、ある程度いるのかもしれない。

この１ヶ月くらいで、３回もそんなことがあって、うち１回はwebデザイナーさんだったりする・・・。
素人の人ならわかるけど、さすがに業界の人はまずいだろうと思ったので、ちょっと書いてみる。

レスポンシブWEBデザインとは、１つの html ファイルで、様々な端末の画面サイズに対応すること。
様々な端末というのは、パソコンとか、タブレットとか、スマートフォンとか。
機種によって画面サイズが違うので、それぞれに最適化して作っていたらきりがない。
そこで、css でなんとか対応させてしまおうというのがレスポンシブデザイン。

例えば、こんな感じのホームページを作りたいとする。

まず、パソコン画面とスマホ画面を合体させたような html を作る。

次に css にパソコン画面の設定とスマホ画面の設定を書く。
css の内容は、こんな感じ。

【パソコン画面の場合】

フッターメニューを非表示にする
その他はすべて表示

【スマホ画面の場合】

ヘッダーメニューを非表示にする
本文を横幅100%にする
サイドのfloatを外し、横幅100%にする
フッターメニューを表示する

レスポンシブデザインのサンプル（sample.html）

<!DOCTYPE html>
<html lang="ja">
<head>
<title>レスポンシブ サンプル</title>
<meta charset="utf-8">
<meta content="width=device-width, user-scalable=yes, initial-scale=1.0, 
maximum-scale=2.0" name="viewport">
<link rel="stylesheet" href="style.css">
</head>

<body>
	<div class="wrapper">

		<div id="header">ヘッダー</div>

		<div id="header_menu">ヘッダーメニュー</div>

		<div id="main">本文</div>

		<div id="side">サイド</div>

		<div id="footer_menu">フッターメニュー</div>

		<div id="footer">フッター</div>

	</div>
</body>
</html>

レスポンシブデザインのサンプル（style.css）

@charset "UTF-8";
body{
	margin: 0;
	padding: 0;
	color:#fff;
	font-size: 20px;
	font-weight:bold;
	background-color:#fff;
	text-align:center;
}
.wrapper{
	width:800px;
	margin:auto;
	background-color:transparent;
}
#header{
	width:100%;
	padding:20px 0;
	display:block;
	background-color:#008000;
}
#header_menu{
	width:100%;
	padding:20px 0;
	color:#fff;
	background-color:#ff6600;
}
#main {
	width: 70%;
	height:200px;
	padding:20px 0;
	color:#000;
	background-color:#ffff00;
	float:left;
}
#side{
	width:30%;
	height:200px;
	padding:20px 0;
	color:#000;
	background-color:#00ffff;
	float:right;
}
#footer_menu{
	display:none;
}
#footer{
	width:100%;
	padding:20px 0;
	background-color:#008000;
	clear:both;
}

/*--- ディスプレイ幅800pxより小さい画面に使われるCSS ---*/
@media screen and (max-width: 800px) {
	html{width: 100%;}
	body{
		width: 100%;
		margin:0;
		padding:0;
	}
	.wrapper{
		width: 100%;
		margin:0;
		background-color: transparent;
	}
	#header_menu{
		display:none;
	}
	#main {
		width: 100%;
		height:200px;
		padding:20px 0;
		color:#000;
		background-color:#ffff00;
		float:none;
	}
	#side{
		width:100%;
		height:100px;
		padding:20px 0;
		color:#000;
		background-color:#00ffff;
		float:none;
	}
	#footer_menu{
		width:100%;
		padding:20px 0;
		display:block;
		color:#fff;
		background-color:#ff6600;
		clear:both;
	}
}

このサンプルでは、ディスプレイ幅800px で切り替わるようにしてみた。
細かく設定するのであれば、
　パソコンの場合（指定なし）
　タブレットの場合（ディスプレイ幅800px 以下）
　スマートフォンの場合（ディスプレイ幅480px 以下）
などを css に書けばいいんだけど、複雑になってサンプルとしてはわかりにくくなるのでやめました。

パソコンで表示して、ブラウザの横幅を動かすと、表示が切り替わるはず。
タグの意味は、ググってください（笑）。

１つの html ファイルで、いろいろな端末の画面サイズに対応できるレスポンシブWEBデザインですが、デメリットもあるので、なんでもかんでもレスポンシブ！というのは、違うと思っています。
その辺は、ホームページ作成者やwebデザイナーがちゃんと判断してくれるはず！？

タグ：レスポンシブホームページスマホパソコン

2017-09-20 21:16 nice!(1) コメント(0)
共通テーマ：パソコン・インターネット

html/css ブログトップ