デスクトップ用のWEBサイトをスマホ用にレスポンシブ化する際のCSSの表記について

Question

現在従来のデスクトップ用に作成したWEBサイトを640px以下のスマホ用に対応させるため、
CSSを書き直しレスポンシブ化しているところです。

全体的には画面サイズに合わせて自動で縮小できるように設定できたのですが、
以下の２点ができなくて困っています。

・CSSで指定した背景画像の縮小
・見出し部分の文字の縮小

WEBサイトはヘッダー、左メニュー、右コンテンツ、フッターの一般的な２カラムです。
ＣＳＳは現在以下の記述をしています。

@media screen and (max-width: 640px){
	
    #greywaku , #container , #header , #contents , #main, #sub, #footer{
    width: 100%;
    float: none;
	 margin: 0 ; padding: 0 ;
    }
	
p {
width : 97% ;
margin : 0 0 1.8em 0 ;
padding: 0 0px 0 5px ;
line-height : 1.7 ; }
	

img{
max-width: 100%;
height: auto;
width /***/:auto;
float: none;　
}

* { margin: 0 ; padding: 0 ;}

    }

以上では、html上に配置したimgは画面サイズに応じて縮小するのですが、CSSで指定した背景画像は縮小しません。

また見出しにh1,h2,h3を使用しておりますが、
こちらの文字も画面サイズに合わせて縮小させてたいと考えております。

自分であれこれ試行錯誤したのですがダメでした...。

お詳しい方ご教授いただけますと幸いです。
どうぞよろしくお願い致します。

nana_coco · Accepted Answer

こんにちは。

背景画像のCSS部分に以下↓を加えれば画面サイズに合わせて可変するのではと思います。
background-size: 100%;
（100％意外にも設定はありますので検索してみてください）

質問者様のサイトがどういう部分で背景画像を指定しているか解りませんが
無地に近い背景なら関係ありませんが、前面に置く文字などに左右され、スマホ表示でずれたりしてしまうのでは？と思います。
一般的には画面サイズを縮小した場合用でもう一枚背景画像を用意して
@media (max-width: 640px) { }内に追加していきます。
見出しもフルスクリーン用で、h2の見出しを設定、縮小用でh2を記述していかないと最適化されないと思います。

ORUKA1951 · Answer

＞そして任意.css内には@media screen and (max-width: 640px) ではなくて、ブラウザの時点でリンクで切り替えるほうが良いです。 mediaqueryを理解できるブラウザのみそのスタイルを読み込むことができる。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) 　でチェック済み、HTML5+ CSS3 ★タブは＿に置換してあるので戻す。＿＿サンプル＿＿＿＿＿

＿＿

Your title

＿

＿＿

本文

＿＿

＿＿＿

質問

＿＿＿

現在従来のデスクトップ用に作成したWEBサイトを640px以下のスマホ用に対応させるため、CSSを書き直しレスポンシブ化しているところです。

＿＿＿

全体的には画面サイズに合わせて自動で縮小できるように設定できたのですが、以下の２点ができなくて困っています。

＿＿＿

CSSで指定した背景画像の縮小
見出し部分の文字の縮小

＿＿＿

WEBサイトはヘッダー、左メニュー、右コンテンツ、フッターの一般的な２カラムです。

＿＿

＿＿＿

回答

＿＿＿

最初のステップとして最善なのは

＿＿＿

現在のPC用のHTMLを、HTML4.01strict（strictですよ!!）に直すこと。
divは極力使わない。使うときはclass名を使って文書構造を示すためだけ、その際のclass名はHTML5の文書構造を示す要素に習う。
詳細度に基づいてスタイルを適用する要素を指定するセレクタの書き方を身につける。
それでリキッドのデザインに変更する。
mediaqueryを使ってスマホ用のデザインを作成する。
新しいページはHTML5で作成し始める。

＿＿

＿＿＿

＿ [screen.css] @charset "utf-8"; html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;} p{text-indent:1em;} header,section,footer{ width:100%;max-width:900px; margin:0 auto; padding:5px; position:relative; } section{ min-height:300px; } section nav{ position:absolute; top:0;left:0; height:100%; width:160px; margin-left:0; } section section,section h2{ margin:0 0 0 165px; width:auto; min-width:0; min-height:0; } [mobile.css] @charset "utf-8"; section nav ul,section nav ul li{ margin:0;padding:0; line-height:50px; text-align:center; } section nav ul li{ font-size:0.9em; list-style-type:none; dispaly:block; width:140px; height:50px; border:outset 10px gray; } section nav ul li+li{ margin-top:10px; }

ORUKA1951 · Answer

No.2です。＞html5について勉強してみようかと考えております。あせる必要はないですよ。スマホがメインターゲットである。

ORUKA1951 · Answer

1) 背景画像はbackground-sizeを使用して設定します。 2) 文字サイズは、変更できません。　⇒Fonts - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/fonts.html#propdef-font-size ) 　⇒CSS Fonts Module Level 3( http://www.w3.org/TR/css3-fonts/#font-size-prop ) 　スマホはディスプレイ幅に合わせてフォントサイズを自動調整させる機能がついていますから、逆に小さくなりすぎますから、Viewportを使って切り替える。　⇒Viewport [iPhone生活]( http://ipn3g.com/web/study3.html ) ＞WEBサイトはヘッダー、左メニュー、右コンテンツ、フッターの一般的な２カラムです。だとしたら　

記事

　 CSS html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;} p{text-indent:1em; header,section,footer{ width:100%;min-width:630px;max-width:900px; margin:0 auto; padding:5px; position:relative; } section{ min-height:300px; } section nav{ height:100%; width:200px; margin-left:0; } section>*{ margin-left:205px; } というふうに、左に来るコンテンツの幅を指定してしまうと楽ですよ。これだけでPC用もスマホ用も対応できるはずです。携帯用は別途media="handheld"でスタイルシート書きましょう。印刷用(media="print")は目次は印刷しないか後回しでもよいかと・・ #greywaku , #container , #header , #contents , #main, #sub, #footer{ のようなidを付けるのは望ましくありません。HTML4.01(15年前勧告)以来!! 『id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』と言われ続けたはずです。　つけるなら、class名のほうが良いです。なぜならheaderもfooterも何箇所も登場しうる要素ですからね。上のサンプルのように『HTML5 では、文書をよりよく構造化するため( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』の要素になりました。　そのため、HTML5の要素名、使用目的に合わせておくと将来的に役立ちますし、HTML4であっても分かりやすいはず。 #greywaku , #container , #contents は文書構造を示す言葉ではない。 #main,は、特殊な扱いです。　⇒4.4 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html#the-main-element )

デスクトップ用のWEBサイトをスマホ用にレスポンシブ化する際のCSSの表記について

こんにちは。

＞そして任意.css内には@media screen and (max-width: 640px)

No.2です。

1) 背景画像はbackground-sizeを使用して設定します。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング