スマートフォン用のスタイルシートを用意する

スマートフォンとパソコンでは、画面の幅が違うため、パソコン用とは別にスマートフォン用のスタイルシートを用意してあげなくていけません。

パソコン用のスタイルシートを複製して、style_mb.cssのように別の名前で保存してください。

  • style.css(パソコン用)
  • style_mb.css(スマートフォン用)

以降、このスマートフォン用のcssを書き換えて、ページをスマートフォンの表示に対応していきます。

htmlファイルを開き、<head></head>内のコードを下記のように変更します。これは、サイトを見ている人の端末がパソコンなのかスマートフォンなのかを判別して、それぞれ適したスタイルシートを読み込ませるコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フィリップスのシェーバーで深剃りする為のコツ</title>
<meta name="keywords" content="フィリップス,シェーバー,深剃り,コツ">
<meta name="description" content="フィリップスの電気シェーバーでも、やり方次第でしっかり深剃りは可能です!">
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フィリップスのシェーバーで深剃りする為のコツ</title>
<meta name="keywords" content="フィリップス,シェーバー,深剃り,コツ">
<meta name="description" content="フィリップスの電気シェーバーでも、やり方次第でしっかり深剃りは可能です!">
<script type="text/javascript"> 
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') != -1 || ua.indexOf('Android') != -1){
//iPhone & Android
document.write('<link rel="stylesheet" href="style_mb.css">');
}else{
//PC
document.write('<link rel="stylesheet" href="style.css">');
}
</script>
</head>

※全てのHTMLファイルを書き換える必要がありますが、まずはトップページだけ書き換えてテストしてみましょう。

スポンサードリンク