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

【スマホサイトの作り方】パソコンサイトからスマホサイトを作る

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

スマホサイトの作り方!パソコンサイトからスマホサイトを作る

それでは、実際に、スマホサイトの作り方を、お伝えしていきます!

ただ、最初からスマホサイトを作っていくのは、時間がかかる(効率的ではない)ので、元々あるホームページのテンプレートを使って、スマホサイトの作り方をお伝えしていきたいと思います。


具体的には、当サイトで無料で配布している「サンプルサイト」のデータを使用します。

ここでは、「サンプルサイト」のデータを使用して、スマホサイトの作り方を解説していきますね。



サンプルサイトの使用について

 

「サンプルサイト」のデータは、勉強用として、無料で配布しています。 そのため、「サンプルサイト」のデータを編集して、インターネット上に公開することは、絶対にしないでください。

「サンプルサイト」は、あくまで「勉強用」として、無料で配布しているだけになりますので、十分 ご注意くださいね。




【手順1】viewport の設定を入れる

スマホサイトを作るためには、まず、viewport の設定を入れてあげます。

この viewport を入れることで、文章の表示を、スマホの画面サイズに合わて表示することができるからです。

スマホは、機種によって画面のサイズが異なるので、どの画面サイズでも、スマホサイトをキレイに表示させるために、この viewport の設定が必要になるということですね。


具体的な手順としては、サンプルサイトのデータの中にある、HTMLファイルのヘッダー部分に、下記の赤くなっている1行を入れてあげます。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="ホームページ,制作,サンプル">


上記の、 「meta name="viewport"・・・」 という記述を1行、HTMLファイルのヘッダー部分に入れることで、文章の表示をスマホの画面サイズに合わせて、表示されるようになります。

スマホサイトを作るときの必須の設定になりますので、必ず入れるようにしてください。




【手順2】画像の大きさをスマホの画面サイズに合わせる設定を入れる

スマホサイトに表示させる画像の大きさを、スマホの画面サイズに合わせて表示させるために、「画像の大きさをスマホの画面サイズに合わせる」 という設定を入れます。


具体的には、下記の赤くなっている1行を、サンプルサイトのスタイルシートの
ファイル(style.css ファイル)に入れてあげます。

img { max-width:100%; height:auto; }


上記の記述を、スタイルシートのファイル(style.css ファイル)に入れることで、画像の大きさをスマホの画面サイズに合わて表示してくれます。

これも、スマホサイトを作るときの必須の設定になりますので、必ず入れるようにしましょう。




【手順3】サイドバーを削除する

パソコンサイトであれば、サイドバーはあった方が良いです。

しかし、スマホは画面が小さいため、スマホサイトには、サイドバーは必要ありません。

そこで、サイドバーを削除するために、サンプルサイトのデータの中にある、HTMLファイルから、下記のソースを削除します。

<td>

<!-- サイドバー -->
<iframe height="500" width="100%" src="side.html" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>

</td>


サイドバーを表示させている、上記のソースを削除することで、サイトからサイドバーが消えます。

スマホサイトには、サイドバーは必要ないので、上記の「サイドバーを表示させているソース」を、削除するようにしましょう。




【手順4】横幅の設定(width)をパーセンテージに変更する

最後に、ホームページの横幅の設定を、「パーセンテージ(%)」に変更します。

具体的には、パソコンサイトの場合、横幅を具体的な数字で指定すること(たとえば、横幅は width="900" という形で指定すること)が一般的です。

しかし、スマホサイトの場合は、横幅をパーセンテージで指定する(たとえば、横幅は width="100%" という形で指定する)ようにします。


この理由は、スマホにはいろいろな種類があり、小さな画面のスマホもあれば、大きな画面のスマホもあるからです。

だから、スマホサイトを作る場合は、横幅を具体的な数字で指定するのではなく、「width=100%」という形で、パーセンテージで指定するようにします。

ホームページの横幅をパーセンテージで指定することで、どの画面サイズでも、スマホサイトがキレイに表示される、ということですね。


変更方法としては、サンプルサイトのデータの中にある、HTMLファイルのソースを、下記のように変更します。

<table width="770" cellspacing="0" cellpadding="0" style="border:0px solid blue;" bgcolor="white" align="center">

↓ ↓ ↓ ↓ ↓

<table width="100%" cellspacing="0" cellpadding="0" style="border:0px solid blue;" bgcolor="white" align="center">


上記のように、横幅の設定である width の数字を、"770" から "100%" というように、パーセンテージ(%)に変更してあげます。

こうすることで、画面サイズに関係なく、どのスマホの機種でも、スマホサイトがキレイに表示されるようになります。


なお、この変更は、横幅の設定(width)を具体的な数字で指定している箇所は、すべて、パーセンテージ(%)に変更してあげるようにしてください。
(これがちょっと大変な作業ですね)




スマホサイトの作り方のまとめ

上記の【手順1】から【手順4】を行うことで、スマホサイトが完成します。

あとは、スマホは画面が小さいので、コンテンツバーの項目を減らしてあげたり(横に並べるのではなく、縦に並べたり)、 画像と文章が横並びになっているところは、縦並びにしてあげることで、もっとキレイに表示されるようにできますよ。

スマホサイトは、基本的に、上から順番にコンテンツを並べていくだけなので、パソコンサイトを作るよりも、かなり簡単に作ることができます。


そして、【手順1】から【手順4】までを実施して、作成したスマホサイトが、https://alodog.com/ のサイトです。

パソコンサイトとスマホサイトの表示は、下記のように表示されます。



パソコンサイト
 
パソコンサイト
   スマホサイト
スマホサイト

「スマホサイト」の方は、スマホの画面サイズに合わせて、キレイに表示されていますよね? 【手順1】から【手順4】までを実施することで、スマホの画面サイズに合わせてキレイに表示される、スマホサイトが完成します。


なお、上記のサイトは、パソコンでアクセスをすると、「パソコンサイト」が表示されて、スマホでアクセスをすると、「スマホサイト」が表示される仕組みになっています。

そのため、もし、スマホで表示を確認したい場合は、スマホで、https://alodog.com/のURLにアクセスをしてみてください。

キレイなスマホサイトが表示されますよ!


結論として、スマホは、「小型パソコン」であるため、スマホサイトとパソコンサイトは、作り方が一緒(HTMLを使って作るもの)です。

異なるのは、「画面のサイズ」になるので、スマホサイトは、「小さな画面サイズでキレイに表示されるように作れば良い」ということですね。

そのために、viewport の設定や、画像の大きさをスマホの画面サイズに合わせる設定を入れてあげる、ということです。 上記の【手順1】から【手順4】までを実施することで、スマホサイトを作ることができますよ!


それでは、次のページでは、スマホサイトをインターネット上に公開する方法をお伝えします。

パソコンでアクセスをすると、「パソコンサイト」が表示されて、スマホでアクセスをすると、「スマホサイト」が表示される仕組みの実現方法をお伝えしますので、良かったら参考にしてくださいね。






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

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



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

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

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



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

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

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



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

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

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

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

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

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