一番簡単なスマホ対応ページの作り方

   web入門, スマホサイトの作り方| 

スマホに対応したホームページの作り方(手法)はたくさんありますので、一概には言えませんが、超初心者向けに、これやっときゃ間違いないっていう簡単な方法を紹介します。(あくまでも一例なのでちゃんと勉強したい方は、基礎からやったほうが良いです)

1)形式はHTML5で作る

 

2)<head>の中にメタ Viewport のタグを入れる

<meta name="viewport" content="width=device-width">

Viewportについての詳しい解説はこちら >Viewport

3)HTML5のルールにしたがってコーディングしていきます

 

例 HTML5の基本的な書き方をまとめてみました | webデザイン | web is a creation

まずはここから!HTMLの書き方【初心者向け】 | TechAcademyマガジン

4)cssはPC用のスタイルを書いて直後にメディアクエリで条件付きで上書きしていく

いろいろやり方がありますが、私はPC用のスタイルを書いていって、その直後でメディアクエリでスマホ用をこまめに上書きしていく、ひとつのスタイルに、PC用・スマホ用を繰り返しながら記述していく方法がなれていてやりやすいです。

(これはコーダーさんの好みにより分かれるところでスマホ用+全部のデバイス用を記述して、最後にPC用を書く人の方が多いのかもしれません)

例えば下記は、imgタグにクラスphotoLがついていたら、左フロートで文字を右に流しこむ(PC用)ですが、ブラウザ幅が700px以下になったときに、フロートを解除し、幅はmaxで100%になるようにという指定です。

img.photoL{
float:left;
margin: 0 10px 0 0;
display:block;
}

img.photoR{
float:right;
margin:0 0 0 10px;
display:block;
}
@media only screen and (max-width : 700px) {  /*700px以下の時はこの指定*/
img{
display:block;
max-width:100%;
}
img.photoL{
float:none;
margin: 0 0 10px 0;
display:block;
width:100%;
}

img.photoR{
float:none;
margin: 0 0 10px 0;
display:block;
width:100%;
}
}

↓この下にどんどんcssを追加していきますが、全部、PC用とスマホ用がセットになります

メディアクエリで条件を切り替える数字(ブラウザ幅)をいくつにするかは、サイトの考え方によります。
PC用、タブレット用、スマホ用の3パターン作る時もあります。

 

5)確認方法は実際にスマホでやるのが一番ですが、GoogleChromeだと簡単にできます。

GoogleChromeで表示させておいて、右クリックで検証をクリック

2016-06-12_101943

すると、検証のマドが開くので、スマホマークをクリックするだけです。

2016-06-12_101808

事例>焼肉の街 飯田 | 【天然ジビエと珍しいお肉通販/肉のスズキヤ】

6)ページトップへ戻るボタン

縦に長いページになったのでトップへ戻るボタンを常に左下に表示させたいです。
こちらのページを参考に入れてみました。

2016-06-12_162353

[JavaScript] jQuery を使わずにスクロールでトップに戻るボタンを表示する – rakuishi.com

<a href=”#wrapper” onclick=”scrollToTop(); return false” id=”scroll-to-top” class=”scroll-to-top-not-display”>▲Top</a>

<script>
function scrollToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout(“scrollToTop()”, 30);
}

}

</script>
<script>
var element = null;
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
if (element == null) {
element = document.getElementById(‘scroll-to-top’);
}
if (scrollTop / scrollHeight > 0.1) {
element.classList.remove(‘scroll-to-top-not-display’);
} else {
element.classList.add(‘scroll-to-top-not-display’);
}
}
</script>

#scroll-to-top {
position: fixed;
z-index: 2147483647;
bottom: 20px;
right: 20px;
background: rgba(0,0,0,0.5);
color: #fff;
font-size: 12px;
font-family: sans-serif;
text-decoration: none;
padding: 10px 10px;
border-radius: 6px;
}

長いURLがつきぬけてしまう場合

テキストの中に長いURLがあると、外側のBOXを突き抜けて長く表示されてしまい、表示が崩れたり、スマホでスワイプしたときに左右にふらふらと振れてしまうことがあります。
そんなときはこのスタイルが有効

 word-break:break-all

 

   web入門, スマホサイトの作り方| 

  関連記事

【Q】携帯サイトを初めて作ることになりました。まず何からやれば?どこで勉強したらいいですか?

携帯(ガラケー)サイトの作り方なんてもう不要な技術なのかもしれませんが、自分でも、この記事の中身をも ≫続きを読む

信州EC実践会・飯田 水上浩一出版記念セミナー H31年1月28日

SEOに強い!ネットショップの教科書 信州EC実践会の水上浩一講師の新刊「SEOに強い!ネットショッ ≫続きを読む

【Q】ウィルスに感染したために、サイトが改ざんされたというニュースを読んで不安です

「××社のホームページが改ざんされ訪れた人にウィルス感染の危険」こんな言葉でニュースになっているので ≫続きを読む

【ホームページの作り方】ネットショップの作成

ネットショップには、ショッピングカート、商品管理、会員機能、決済処理など、いくつかの必要な機能があり ≫続きを読む

ブログを作る場合はサブドメインより、独自ドメインの下にが◎

わたしは信州EC実践会というネットマーケティングの勉強会の事務局をしていますが、 ネットショップ運営 ≫続きを読む

【ホームページの作り方】WordPressの勉強をしたいのですが・・・

Q:WordPressのサイトを土台まで友人に作ってもらったのですが、そこから先どうしたら良いかわか ≫続きを読む

シドニー with ホームステイ 体験記

ただいまシドニー郊外にホームステイしながら仕事をしています。 忘れないうちにシドニー・ホームステイの ≫続きを読む

【Q】リアル店舗もってるネットショップは、Googleマイビジネス(マップ)の登録が必須だと聞きました。どうすればいいのでしょう?

地域名 + サービス名で検索してみてください まずは試してみてください。Googleで「駒ヶ根市 税 ≫続きを読む

【ホームページの作り方】観光農園・直販通販サイトの制作

農業とインターネット。一見、あまり関係ないと思われがちですが、田舎で営業する農家さんにとって、インタ ≫続きを読む

【ホームページの作り方】病院・歯科医院のホームページ作成

歯科医院のホームページは、院長・スタッフ紹介、治療内容、医院の紹介と受付時間・交通アクセスなど、だい ≫続きを読む

▲ページ先頭へ