投稿日 2018-08-30
著者 staff

ネット依存症からレスポンシブWebデザインまで、高校生の私が気になること

Blogのカテゴリ制作ノウハウ

こんにちは、えのたにです。
ある日友人がスマホを家に忘れ、「休憩時間にスマホが触れず手が震える」「スマホが触れないと発狂しそう」と言っていたので「ネット依存症」について気になっています。

そこで今回は「ネット依存症とはなにか」、「ネット依存症からわかること」をご紹介します。

ネット依存症ってなに？

ネット依存症とは「他ごとができなくなるくらいインターネットをやること」

今回、ネット依存症について検索をしてみると拝見するサイトによって基準がいろいろあり、違っていました。調べてみると、ネット依存症については正式に決められた基準がないということなのでネット依存症の判断は個人では難しいものだなという印象です。

そもそも、ネット依存症の「インターネットをやる」とは何なの？と思ったので調べてみました。 「インターネットをやる」というのは「インターネットを介したサービスを利用すること」という意味で使われることが多いようです。
TwitterやFacebook、InstagramなどのSNSの利用もインターネットをやるということになりますね。さらには携帯でのゲームアプリや、パソコンでのオンラインゲームもインターネットをやるということになります。

ゲーム依存症にスマートフォン依存症・・・ネット依存症といっても一概には言えないことがわかります。専門的なことはわかりませんが、無意識に携帯を触っていたりすると依存症になりかけているのではないかと思います。

スマホ依存症からわかること

ネット依存症の中にも「スマートフォン依存症」（以下スマホ依存症と略）というものがあります。
ブログ冒頭で紹介したスマホを触らないと手が震えてしまう友人もこれに近いと思います。

スマホ依存症はそのまま「スマートフォンを多頻度で使用し、自制がきかずやめることが不可能」ということで、スマホがよく使用されていることが読み取れます。

私が通う高校は工業高校、さらには情報科なので毎日最低1回はパソコンに触れますが、普通科の友人はパソコンに触れることがあまりありません。スマホ依存症という言葉はよく耳にしても、パソコン依存症なんてあまり聞かないですよね。

普通科高校の友人は
「パソコンの使い方がいまいちわからない」、「スマホでなんでもできる」、「授業でパソコンを使うことはあるけど家では見ない」
と言っていました。確かに友人と携帯でWebサイトを見ることはありますが、家でWebサイトを見るというのはあまりないのではないかなという印象です。 自宅でわざわざパソコンの電源をいれてWebサイトを見るという動作は、すぐ手元にあるスマートフォンで見るよりも面倒なことなのではと思いました。

自身も、周りの人もスマホでサイトを見たりすることが多いので、Webサイト作成ではもう「スマートフォン用のサイト」が必須と言えるのかな、と感じました。

スマートフォン版サイトについて

上でも述べたように最近はパソコンでWebサイトを閲覧する人はあまりおらず、スマートフォンから閲覧することが多いのではないでしょうか。
今ではスマホ（モバイル）ファーストという言葉に加え、スマホオンリーという言葉もあるようで、スマートフォン版サイトの重要性がわかります。
なので今回はレスポンシブWebデザインに使用される「メディアクエリ」等についてご紹介します。

レスポンシブWebデザイン

レスポンシブWebデザインは1つのHTMLファイルを元にCSSを変更し、各デバイスに適した見た目でWebサイトを表示させるための技法です。

レスポンシブWebデザインの特徴

パソコンでもスマートフォンでも開かれるファイル(URL)は同じ
パソコンとスマートフォンでのサイトデザインが統一される
どのデバイスでもHTML構造は共通であることを意識して、要素の構成や制作を行う
あらゆる画面サイズに対応することができる

viewport

まずは、メディアクエリを使うための下準備をします。
viewportについては、「デバイスの幅に合わせて柔軟にページの表示領域を調整してくれるもの」という認識です。
メディアクエリで使用されるので、レスポンシブWebデザインには欠かせないコードです。

こちらはmeta属性でhead内に記入します。

<head>
  <html lang="ja">
     <title>レスポンシブWebデザインでスマートフォン版サイト制作</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
  </html>
</head>

メディアクエリ

デバイスの幅に合わせて適用するCSSを変更するという「メディアクエリ」の書き方は大きく分けて2種類あります。

max-width：指定された横幅以下↓だったら適用
min-width：指定された横幅以上↑だったら適用

適用方法も2種類あるので実際にコードの書き方を見ていきます。

・link要素にメディアクエリを記入する
head内に記入します。

<head>
  <html lang="ja">
 　 <link rel="stylesheet" href="/css/s_site.css"> 　
    <link rel="stylesheet" href="/css/l_site.css" media="screen and (min-width:700px)">
    //デバイスの幅が700以上だったら適用する
  </html>
</head>

記事内でスマホファーストを紹介しましたが、このサンプルコードも「パソコン版サイトより先にスマートフォンのCSSを適用し、読み込んでいる」のでスマホファーストの書き方になります。逆に、大きいサイズ用のCSSを読み込んでからスマートフォン用のCSSを読み込む書き方をするとデスクトップファーストと呼ばれる書き方になります。

・CSSに直接メディアクエリを記入する

.box {
    background:red;
}
@media screen and (min-width:700px) {
/*デバイスの幅が700px以上だったら適用する*/
    .box {
        background:green;/*背景が赤から緑に*/
    }
}

CSSファイルを複数作成するより、1つに纏めるとすっきりする気がするので、スタイルシートに直書きで、メディアクエリを使う派です。
また、最近ではスマートフォンファーストでスマホ版サイトをしっかり作成してから、パソコン版サイトのCSSを後付けしていく方法でサイト制作することが増えています。

メディアクエリは、max-width、min-widthを併用することも可能です。
(max-width:1300px) and (min-width:700px)という指定の仕方をすることにより、700px以上1300px以下の場合にCSSを適用されます。タブレットサイズなどのサイト作成にも便利だと思います。

参考にさせていただきました。
レスポンシブの基本、メディアクエリの書き方 | それからデザインスタッフブログ