★ Let's become a Web Designer! 【プロフィール】 【商品一覧】 【よくある質問】 【お問い合わせ】
 

スマホ専用サイトの注意点

 
ホーム はじめに 講座の効果 作成実績 受講者の声 パーツ集 作成ソフトの選び方 作成ソフトの比較 初心者用の講座
 
 
 
 
 
 
  トップページ > 無料スマホサイト作成講座 > スマホ専用サイトを作る前の前提知識
 

スマホ専用サイトを作る前の「前提知識」

スマホ専用サイトを作る前に、知っておいていただきたいことが3つあります。
具体的には、下記の3つのことです。

 

スマホ専用サイトを作る前に、知っていただきたい3つのこと

 

1.スマホサイトとパソコンサイトは、基本的に作り方は一緒であること

2.スマホサイトとパソコンサイトの違いは、
  「人が使っている画面(モニター)の大きさ」であること

3.スマホサイトの表示の確認は、「Google Chrome」のブラウザを使うこと


それでは、「スマホ専用サイトを作る前の前提知識」を、1つずつ順番に、
ご説明させていただきますね!



【前提知識1】スマホサイトとパソコンサイトは、
基本的に作り方は一緒であること

そもそも、スマホは、「小型パソコン」です。 そのため、スマホを使って、現在 インターネット上に公開されているホームページは、問題なく見ることができます。

つまり、スマホサイトもパソコンサイトも、サイトの作り方は一緒ということです。


たとえば、ホームページを作るときに、文章を改行させたいときは br タグ を使いますし、文字の色を変更するときは font タグ を使いますよね。 だから、同じように、スマホサイトを作るときも、このようなタグは、そのまま使うことができるということです。

スマホサイトとパソコンサイトは作り方が一緒!


そのため、当サイトでお伝えしている「ホームページの作り方」を学べば、自然に、スマホサイトも作ることができるようになりますよ。

「スマホサイト作成」と言うと、難しく聞こえるかもしれませんが、、、スマホサイトもパソコンサイトも、作り方は一緒(HTMLを使って作るもの)であるため、まずこのことを覚えておいてくださいね。



【前提知識2】スマホサイトとパソコンサイトの違いは、
「人が使っている画面(モニター)の大きさ」であること

スマホサイトも、パソコンサイトも、サイトの作り方は一緒です。

では、スマホサイトとパソコンサイトは、何が違うのかというと、
人が使っている画面(モニター)の大きさが違います。

スマホサイトとパソコンサイトは、画面の大きさが違うだけ


具体的には、スマホは画面(モニター)が小さいですし、パソコンは画面(モニター)が大きいですよね? 人がホームページを見るときの、端末の画面の大きさが、最も大きな違いになります。

だから、スマホサイトを作る場合は、「スマホの小さな画面でも、キレイに表示されるような構成」にしてあげる必要があるということです。


たとえば、パソコンサイトの場合、サイドバーがあったほうが、訪問者は使いやすくなるのですが、スマホサイトの場合、サイドバーは必要ありません。 スマホサイトに、サイドバーを設置してしまうと、画面が圧迫されて、とても見づらくなってしまうからです。


また、パソコンサイトの場合、横幅を指定すること(たとえば、横幅は900pxという形で指定すること)が一般的なのですが、 スマホサイトの場合は、横幅を具体的な数字で指定しないほうが良いです。

その理由は、スマホにはいろいろな種類があり、小さな画面のスマホもあれば、大きな画面のスマホもあるからです。 だから、スマホサイトを作る場合は、横幅を具体的な数字で指定するのではなく、「width=100%」という形で、パーセンテージで指定するようにします。


横幅を具体的な数字で固定するのではなく、パーセンテージで指定することで、画面の大きさに合わせてサイトが広がるため、どのスマホでも、キレイにホームページが表示されるようになる、ということですね。


 

ホームページとスマホサイトの「横幅」に関する注意点

 

パソコンサイトで、横幅をパーセンテージで指定してしまうと、今度はパソコンのモニターの全画面に、サイトが広がってしまうので、とても見づらくなってしまいます。

だから、パソコンサイトは、横幅を具体的な数字(たとえば、width="900")で指定して、スマホサイトは、横幅をパーセンテージ(width="100%")で指定するようにしましょう!




【前提知識3】スマホサイトの表示の確認は、
「Google Chrome」のブラウザを使うこと

パソコンを使って、スマホサイトを作っているときに、そのスマホサイトの表示を確認したい場合は、「Google Chrome」のブラウザを使うようにします。

具体的には、「Google Chrome」の画面の横幅を、縮めてあげればよいだけです。 これだけで、スマホの小さな画面サイズでの、表示の確認をすることができます。


ただ、「Google Chrome」の画面の横幅を、どれくらい縮めれば、スマホの画面サイズになるのかが分かりませんよね?

そこで、「Google Chrome」の拡張機能に、「Window Resizer」というものがあります。 この「Window Resizer」を使えば、簡単に、スマホの画面サイズに合わせて、「Google Chrome」の画面サイズを変更することができますよ。


「Window Resizer」のインストール方法は、まず、「Google Chrome」のブラウザで、「Window Resizer」 のページにアクセスします。

Window Resizer のインストール方法

あとは、「Chrome に追加」のボタンをクリックするだけです。 そうすれば、「Window Resizer」を、いつでも使うことができるようになります。


なお、「Window Resizer」の使い方としては、「Google Chrome」のブラウザの右上に表示される、「Window Resizer」のボタン(マーク)をクリックします。

そして、ボタンをクリックすると、スマホの画面サイズを選ぶことができるので、それを選べば、自動的に、「Google Chrome」の画面が縮小されますよ。

Window Resizer の使い方


この機能を使えば、スマホの画面サイズで、スマホサイトの表示の確認ができるので、とても便利です。 パソコンを使って、スマホサイトを作っているときに、そのスマホサイトの表示を確認したい場合は、このようなやり方で、表示の確認をします。


もちろん、スマホサイトを作っている途中で、そのスマホサイトのデータをレンタルサーバにアップして、自分が持っているスマホで、表示の確認を行ってもよいですよ。

ただ、スマホサイトを修正しながら、一回一回、スマホサイトのデータをレンタルサーバにアップしていく必要があるので、少し面倒かもしれませんね。

だから、まずは「Google Chrome」で表示の確認をしながら、スマホサイトを作っていって、ある程度完成したら、 レンタルサーバにアップして、ご自身のスマホで表示を確認する、、、という方法が良いかなと思います。

私がスマホサイトを作るときは、このようなやり方で、スマホサイトを作っています。


 

Window Resizer のポイント

 

「Google Chrome」の「Window Resizer」で、どの画面サイズを選んだら良いかというと、一番小さい「320×480」を選ぶようにしましょう。

その理由は、基本的に、一番小さな画面サイズで、スマホサイトがキレイに表示されれば、どのスマホ(大きな画面サイズのスマホ)でもキレイに見ることができるためです。

「320×480」で、表示を確認しながらスマホサイトを作成して、完成したら、「480×800」などの画面サイズでも、表示の確認をしてみる、という形でよいと思いますよ。



それでは、次のページで、スマホサイトの作り方をお伝えします!

パソコンサイトを作れる人であれば、スマホサイトは簡単に作ることができるので、
ぜひ確認してみてくださいね。






【おすすめ外部コンテンツ】
 
会員制サイドビジネス講座
 
私がお金を稼ぐ理由 ~ お金を持ったときのメリット ~
 
インターネットで月20万円の収入を継続して稼ぐ方法
 
初心者用ホームページテンプレート
 

インターネットビジネスのすごさを認識してください
 
無料ホームページ制作講座の受講者の声
 
動画で覚える無料FX講座
 
ホームページが作れる能力は、最高の能力
 



当サイトで使用しているサンプルサイトを無料でダウンロード!

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
サンプルサイトがあれば、さらにホームページの作り方が分かりやすくなりますよ!

当サイトで使用しているサンプルサイトの無料ダウンロードはこちら!



副業で月20万円の収入を、自宅の空いている時間で稼ぐための講座

インターネットを使ったサイドビジネス(副業)で、自宅にいながら、空いている時間で、月20万円の収入を得ていただくための方法 もお伝えしています。 これからは、「複数の収入源を持つこと」がとても大切なので、ぜひホームページで収入を得ていきましょう!

副業で自宅にいながら、収入を得るための講座はこちら!



 
今スタートできるサンプル
サイトを無料ダウンロード
 
サンプルサイトの無料ダウンロード
 
サイドビジネス講座
 
会員制サイドビジネス講座
 
初心者がホームページを自分で作れる能力を身につけて、 そのホームページをビジネスに活用する方法をお伝えする、会員制のサイドビジネス講座です。

この講座は、初心者がインターネットで収入を得られるようになることを目的として、運営しています。
 
 
 
HPテンプレート
 
自分で更新できる最短ホームページテンプレート
 
初心者が、簡単にホームページを作るための「ホームページテンプレート」です。

テンプレートと、たくさんのパーツ集をコピーして貼り付けるだけで、ホームページが完成する仕組みになっています。

さらに、テンプレートの使い方はすべて動画で解説しています。
 
ホームページのメリット
 
基礎講座と用語集
 無料ホームページ作り方 ホームページ基礎講座
 無料ホームページ作り方 HPでよく使う用語集
 無料ホームページ作り方 HTMLタグの書き方
 無料ホームページ作り方 スタイルシートの書き方
 
ホームページを作る前に
 
ホームページを作った後
 
インターネット副業
 
サイドビジネス・副業の始め方
 
初心者が、インターネットを使ったサイドビジネスで、自宅にいながら収入を得る方法を、すべて動画でお伝えするサイトです。

また、仕事ができるようになるノウハウや、「最高の成長法」などもお伝えしています。
 
 
メールマガジン
 無料ホームページ作り方 メールマガジンの登録
 
リンク集
 無料ホームページ作り方 当サイトへのリンク
 無料ホームページ作り方 役立つホームページ
 無料ホームページ作り方 家を購入した体験談
 無料ホームページ作り方 FX資産運用ブログ
 
会社概要
 
特定商取引に基づく表記
 
個人情報保護ポリシー
 
お問い合わせ先
 
 
NPO法人の推薦状
 
NPO法人の推薦状

 
当サイトは、NPO法人「起業とキャリア支援センター」様からの推薦を受けて、運営しています。
 
Twitter でシェアする
 
このページの内容が分かりやすいと思ったら、今すぐ Twitter でシェアしよう!
 
 
 
Facebook でシェアする
 
このサイトの内容が分かりやすいと思ったら、今すぐ Facebook でシェアしよう!
 
 
 
トップページプロフィール特定商取引法に基づく表記取り扱い商品一覧よくある質問お問い合わせ
 
 
Copyright © 動画で覚える無料ホームページ制作講座 All rights reserved.
 
by おすすめ副業ランキングサイト
^