sponsored link

HTML、CSSでサイトをスマホ対応させる方法

sponsored link

もうすでにスマホ時代が到来しています

23e84a79cf02784fc215719b4b1b6577_s

あなたはインターネットで検索をしたり、ネットショッピングをしたり、いつも見ているサイトやブログをチェックするときって、スマホとパソコン、どっちを使っていますか?おそらく、スマホを使うことの方が多いのではないでしょうか?自宅の机でしか使えないデスクトップパソコンや、持ち運べても、重くて苦労するノートパソコン。それらと違い、ポケットに入るスマホは非常に便利で、自然と使う回数も増えますよね。

スマホとパソコンのアクセスの違いを調べてる人も多いのですが、そこで共通して出てくる話題が、「最近はスマホでのアクセスがパソコンを追い越している」という話です。もうすでに、世の中に存在するほとんどのサイトが、パソコンよりもスマホからの方がアクセスされているのです。多くのサイトで、スマホからのアクセスの割合が60%以上、特に多いサイトでは70%を普通に超えるという話も聞きます。世の中は確実にスマホ中心に回るようになってきています。

そこで私たちビジネスをする人間が考えなくてはならないのは、「お客さんは自分のサイトをスマホで見ている」、つまり、「スマホで見ている人に商品を売らなくてはならない」ということなのです。ホームページや、セールスレターを作成する場合には、必ずスマホで見ているお客さんが数多くいることを意識しておく必要があります。

スマホのお客さんに買ってもらうための最低条件

7a8255da342a69ed5ad166ed354fcec3_s

では、スマホでサイトにアクセスするお客さんが多いからといって、何をすればいいのか、という話になりますよね。それは、あなたのホームページやサイトを「スマホ表示」に対応させることです。具体例がないとわかりづらいので、本ブログを例に説明しますね。

まずは、本ブログのスマホサイトの画面です。スマホ表示に対応していますので、スマホの縦長のレイアウトでも見やすい画面構成になっていますよね。それに対して、もし、本ブログが、スマホ表示に対応していなかった場合、どうなるのかを見てみましょう。以下の画像は、スマホで無理矢理パソコン向けの画面を表示したものです。

パソコンで開いた時の、右上の部分しか見ることができませんよね。指を動かしてスクロールをしなければ、サイト全体を確認することができません。もし、あなたが訪れたサイトが、このような見づらい表示になっていたら、どう思うでしょう。そのまま読み進めたいとは思いませんよね。

私たちはラクをしたがる動物です。自分からわざわざ手間をかけて、見づらいサイトを見てくれるお客さんはいません。つまり、しっかりとあなたのサイトをスマホ表示に対応させておかないと、スマホでアクセするお客さんほぼ全員を逃してしまうことになります。先ほども紹介したように、その割合は60%や70%を超えています。単純計算すれば、売上も半分以下に落ちてしまうということです。そうならないためにも、私たちは自分自身で対策をしていく必要があります。

HTMLとか、CSSとか、、、

3ec9bcdb9fd5a158f1e2fd13b2987c03_s

ですが、ホームページやサイトをいじるとなると登場するのが、HTMLとCSSです。私もコピーライターして最低限のHTMLをいじることは良くありますが、ハッキリ言って、詳しいことは何もわかりません。CSSなんて、それこそネットか本で調べながらじゃないと、どういじったらいいのかわからないレベルです。

今回は、そんな私が、仕事の関係でHTML、CSSを使って、スマホ表示に対応していなかったあるサイトをスマホでも閲覧することができるように編集しました。実際にやってみると、複雑なことはなく、ちょっとした文字を変えるだけでスマホ表示に対応させることができました。私のように、HTMLやCSSをまともに勉強したことがない人間でも、ホームページやサイトのスマホ表示への対応をさせることができますので、そのやり方を説明します。

width、横幅がカギになります

320cce7780627c8fd4f6f1b499dfff87_s

スマホはパソコンと違って、みんな縦長の状態で画面を見ますよね。ですので、スマホ表示に対応させるのに必要なことは、サイトの横幅をスマホに合わせるということになります。ですが、無理矢理すべてをスマホ基準の横幅にしてしまっては、今度はパソコンで見る場合に、縦長で見づらくなってしまいます。これでは本末転倒ですよね。

そこで使えるのが、「width=device-width」という文字列です。HTMLの中には、head要素という、直接ブラウザで表示はされないけれど、大切な情報を扱うhead要素というものがあります。そのhead要素の中に、という文字列を挿入すると、パソコンで見た場合にはパソコンの横幅で、スマホで見た場合には、スマホの横幅でページが表示されるようになります。

それでも解決できない場合には

c561d52a81b982d24f5890bd0205d95f_s

ただし、その文字列が入っているにも関わらず、スマホ表示に対応できない場合があります。私も今回、その事態になってしまい、原因を探すのに時間を使ってしまいました。そして、その答えは、CSSの中にありました。

画像や文字をHTMLファイルを使って、ブラウザで見れるようにする場合、大きさを調節するために、widthを使います。さっきの文字列にもwidthって文字が入っていましたよね。このwidthがCSS内に記述されていて、CSS側でwidthの値が指定されてしまっている場合、HTMLでを記述してしまっても、スタイルシートの方が優先されてしまい、表示に反映されないようです。

もし、HTMLにをしっかりと書き込んでも、スマホの表示に反映されない場合には、style.cssなどのCSSのなかでwidthの値が指定されていないかを確認し、指定されている場合には、その記述を消しておきましょう。

さいごに

fffa003c1b330b1bc0b402abcb376ff2_s

今後、スマホでのインターネットの利用は、増加の一途をたどることになるでしょう。今からしかりと対策をしておき、スマホのお客さんも取りこぼすことがないようにしておきましょう。

ちなみに、今回紹介したやり方は、HTMLもCSSもまともに勉強したことがない人間が、自己流に調べて、いじってみて見つけたやり方です。プロのプログラマーさんからすれば、間違いだらけのやり方かもしれないので、このやり方を使う場合には、自己責任でお願いします。

こちらの記事もおすすめです

コピーライター流Photoshop入門講座

sponsored link

%e3%82%bf%e3%82%99%e3%82%a6%e3%83%b3%e3%83%ad%e3%83%bc%e3%83%88%e3%82%99-13お金持ちと貧乏人の決定的な差は、習慣の差

a1640_000286簡単で手軽にできる7つの気分転換方法

関連記事

  1. TAKEBE160224560I9A0437_TP_V

    コーヒーの副作用とは?仕事の効率を上げる効能に隠された危険性

    あなたはコーヒーを飲むことはありますか?私はコーヒーが大好きですし、また、覚醒作用で眠気を覚ましてく…

  2. --www.pakutaso.com-shared-img-thumb-AL1023majigao20140830131905

    ゆとり・さとり世代の教育係りは成長の好機!新人教育のコツと心構え…

    新人研修もそろそろ終わり、ついこの間まで学生だった新入社員たちがそれぞれの部署に…

  3. 359839307b6f4ced3a53cfa06eaea0e3_s

    脳は疲れないって本当?脳が疲れたと感じる3つの原因

    脳みそは疲れ知らず!?あなたは勉強や読書、パソコンを使った頭脳労働をしていて、「なんか脳が疲れて…

  4. freee151108569496_tp_v

    年末年始の防犯対策しっかりしてますか

    年末年始になると旅行や実家に帰省して数日間、家を開ける人が多くいるかと思いますが空き巣に入られないよ…

  5. 100c8992b54b13d8f1634bbcbf9ce317_s

    値段・価格を安く見せる、セールスを成功させる3つのコツ

    コピーライティングや営業など、セールスをする上で重要になってくるのが「クロージング」の部分ですよね。…

  6. 6e4e3296c2b0ab5e62483cb48a76a837_s

    眠気・疲労を短時間で回復できるコーヒーナップとは?

    あなたは日中仕事をしていたり、活動していて急激な眠気や疲労感に襲われたことはありませんか?普段の睡眠…

  7. ANJ86_suyasuya_TP_V1

    朝が苦手なサラリーマン必見!!朝寝坊しない5つの方法

    寝起きが悪いとなかなか起きれないですよね。もう少しだけ寝ようと5分だけのつもりが目が覚めて目覚まし時…

  8. --www.pakutaso.com-shared-img-thumb-GREEN_FU20140125

    胡散臭いセールスレターになってしまう理由

    インターネット上で商品やサービスを売るために必要なセールスレター。しかし、インターネット上のセールス…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP