ここから本文です

パソコン、サイト、ホームページについての質問です。 現在お遊び兼勉強でサイト...

soraさん

2019/12/1309:02:23

パソコン、サイト、ホームページについての質問です。
現在お遊び兼勉強でサイトをつくっています。
しかしPC用のサイトはVisual Studio Codeを使ってHTMLとCSSで作れるのですが、スマホ用の

サイトをつくってみたいなと思っています。

お遊びなのでネットにアップするつもりもありませんし、PHPやプログラムをつけるつもりは一旦ありません。

そこで、スマホ用のサイトはどのようにつくるのでしょうか?
そもそもVisual Studio Codeを使ってHTMLとCSSでつくれますか?
CSSでサイズ等を変えるだけだとして、それをPCで確認できるようなツール・ソフトはありますか?

できるなら、もしPHPなども混ぜたい場合はどうするのかも教えてください。

閲覧数:
35
回答数:
3

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ama********さん

2019/12/1322:03:30

>お遊びなのでネットにアップするつもりもありませんし、PHPやプログラムをつけるつもりは一旦ありません。

ネットにアップして友達の端末で正常に表示できてるか確認することをオススメします。

>そこで、スマホ用のサイトはどのようにつくるのでしょうか?
>そもそもVisual Studio Codeを使ってHTMLとCSSでつくれますか?

metaタグでviewportの指定をして下さい(指定方法はググって下さい)。
後は縦長画面で見やすいように配置して下さい。
スマホのブラウザは、あまりCSSに対応してないので、CSSは こまめにチェックした方が良いでしょう。
通常は1つのソースで「PC、スマホ」の両対応にします(それをレスポンシブ・デザインと言います)。

>CSSでサイズ等を変えるだけだとして、それをPCで確認できるようなツール・ソフトはありますか?

Chromeのデベロッパー・ツールにはスマホをエミュレートできるモバイル・エミュレーターが搭載されています(下記ページ参照)。

Webページにおける基本的な注意点
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+00000231&tsn+00...


>できるなら、もしPHPなども混ぜたい場合はどうするのかも教えてください。

この件が終わってからで良いと思います。
1度に、あれこれやると負担が増えてキツくなると思います。

  • ama********さん

    2019/12/1322:20:45

    >>できるなら、もしPHPなども混ぜたい場合はどうするのかも教えてください。

    >この件が終わってからで良いと思います。
    >1度に、あれこれやると負担が増えてキツくなると思います。

    Apacheやら、PHPやらをインストールして、ごにょごにょします(ネットでググって下さい)。

  • その他の返信を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

ste********さん

2019/12/1319:37:58

cssのファイルから理解できて作れるのですよね

スマホ用は実は難しくありません。

骨子はとても単純です

PCと同様で、CSSで以下のような行を追加すれば、自動で各種端末用にサイズ枠で表示されます


@media (max-width: 1020px) and (min-width: 768px) { #css {狭いブラウザとタブレット向け} }
@media (max-width: 767px) { #css{スマホ向け} }



さらに、必要なら表示分けのために、上の画面サイズで分けた
スマホとPC用などでCSSを切り替えるようにPC用、スマホ用CSSも追加できます

PC用でCSSを作り、スマホ用に上の指定を追加していくより、
最近はスマホ用CSSを作り、PC用CSSを追加していく スマホファーストというのが主流になってますね



画面幅が狭まることで表示をずらしたりするのには、それなりのテクニックが必要ですが、基本的なことはそれだけ

詳しくは、それぞれのキーワードで検索するとわかりますよ


PCブラウザでのスマホ表示はエミュレータでできます。
”crom スマホ画面” 等で検索してみましょう

プロフィール画像

カテゴリマスター

shimixさん

2019/12/1310:04:10

>スマホ用のサイトはどのようにつくるのでしょうか?

PCサイトと違いはありません。同じようにhtmlとcssで作ります。PCのブラウザとは想定される「サイズ」が違いますが、それをcssの設定でやりくりする「レスポンシブ・ウェブデザイン」が主流になっています。

https://ja.wikipedia.org/wiki/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%...


>PCで確認できるようなツール・ソフトはありますか?

たとえばChromeだったらこんな方法 ↓ があります

https://www.tipsfound.com/chrome/01010

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる