Skip to content
Menu
Computer Applications
  • HOME
Computer Applications

CSSを使ってPC向けとスマホ向けのデザインを行う

Posted on 2021年1月31日2021年12月16日

今のウェブ制作はスマホへの対応が必須

これからウェブ制作を行うのであれば必ずやっておきたいことがあります。それは、スマートフォンへの対応です。スマホへの対応とは具体的にどのようなことかというと、スマホの画面に合わせた表示にするというものです。たとえば、20年ぐらい前に作られて放置されている古いサイトをスマホで読み込んだ場合、文字がものすごく小さく表示されるでしょう。スマホの解像度はPCモニターとあまり変わりませんが、画面はPCモニターの大きさに比べるとずっと小さいため、そのようなことになってしまうのです。

デバイスの解像度を取得してCSSでデザインを切り替える

スマホ対応の仕方ですが、まず、HTMLに「デバイス(スマホやPCなどの端末)の横幅を取得する」という意味の宣言を記載します。この宣言を書くことにより、スマホとPCで別々のデザインにすることが容易になります。というのは、スタイルシートにはサイトにアクセスしてきたデバイスの解像度によって適用するデザインを変えられるという仕組みが備わっているからです。スマホとPCで文字の大きさを変えたり、スマホだけ特定のボタンなどを表示して、パソコンからのアクセスであれば表示させないといったこともできます。

モバイル端末専用のサイトを別に作るやり方は古い

10年以上前にウェブ制作をやったことがあるという人であれば、PC向けのサイトとモバイル向けのサイトは別々に作るというやり方をしていたかもしれません。しかし、この方法は現在ではあまり使われていません。というのは、サイトを二つ運用することでメンテナンスが大変になるからです。HTMLは共通にして、CSSでPCとスマホのデザインを分けるのはレスポンシブと呼ばれますが、今はこのやり方が主流です。

コーディングは、内部SEOにおいて重要で、特定の言語を用いてプログラムの設計や構築をするうえで欠かせない作業の一つとなっています。

トラックバック
コーディングの代行の検索

投稿ナビゲーション

正規じゃなくても大丈夫?非正規店の選び方と注意点
ガラス割れを防ぐコツは?壊れたら速やかに修理を!

Recent Posts

  • ガラス割れを防ぐコツは?壊れたら速やかに修理を!
  • CSSを使ってPC向けとスマホ向けのデザインを行う
  • 正規じゃなくても大丈夫?非正規店の選び方と注意点
  • 非正規店に依頼するメリットと注意点について

Archives

  • 2021年4月
  • 2021年1月

Recent Posts

  • ガラス割れを防ぐコツは?壊れたら速やかに修理を!
  • CSSを使ってPC向けとスマホ向けのデザインを行う
  • 正規じゃなくても大丈夫?非正規店の選び方と注意点
  • 非正規店に依頼するメリットと注意点について

Calendar

2021年1月
月 火 水 木 金 土 日
 123
45678910
11121314151617
18192021222324
25262728293031
    4月 »

Search

©2022 Computer Applications | All Rights Reserved.