×
みんなのお仕事相談所
受注者からの相談
Webデザインに関する相談

制作について

解決済
回答数
2
閲覧回数
344
すぐ知りたい!  : すぐ知りたい!

①PC版のデザインカンプをもとに、PC&スマートフォンでレスポンシブになるように
コーディングとはどのように作ればいいんでしょうか?

できましたら、詳しくわかりやすく教えてもらえませんでしょうか?
どうぞよろしくお願いいたします。

それとですが、
②HTMLマークアップとCSSマークアップとはどのように作ればいいんでしょうか?

2015年10月15日 16:51

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

Sonicさんからの回答

こんにちは

調べればすぐ出てくるとは思いますが、基本的にはviewportを使って対応します。

まずHTML5の仕組みは理解されていますか?
よくわかっていないのでしたら、時給でスカイプなどでレクチャーしてもらってはどうでしょうか。

2015年10月15日 19:09
相談者からのお礼コメント

スマートフォンでしたら↓こちらの設定でなんとかわかりました。
ありがとうございます。

HTML5は詳しくはわかりません。
時給でスカイプなどレクチャーとは例えば、誰に頼めばいいんでしょうか?


<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<!-- ※デフォルトのスタイル(style.css) -->
<link rel="stylesheet" media="all" type="text/css" href="tablet.css" />
<!-- ※タブレット用のスタイル(tablet.css) -->
<link rel="stylesheet" media="all" type="text/css" href="smart.css" />
<!-- ※スマートフォン用のスタイル(smart.css) -->


/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}
#container{
width:100%;
}
~以下、画面の横幅が768pxまでの場合のスタイル記入~
}
/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}
#container{
width:100%;
}
~以下、画面の横幅が768pxまでの場合のスタイル記入~
}
/*===============================================
●smart.css 画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}
#container{
width:100%;
}
~以下、画面の横幅が640pxまでの場合のスタイル記入~
}

また、@importで各CSSを読み込む方法もあります。

@import url(style.css) screen and (min-width: 769px);
@import url(tablet.css) screen and (max-width: 768px);
@import url(smart.css) screen and (max-width: 640px);

そのままだと画像は元のままのサイズで表示されてしまい画面からはみ出てしまいます。
上記にも記載しておりますが、スマートフォン用・タブレット用のCSSに下記のように画像を伸縮するように指定をします。

img{
max-width: 100%;
height: auto;
width /***/:auto; 
}

2015年10月15日 19:21

すべての回答

xxxxxxxxxxx12200さんからの回答

それを無料でか。おかしすぎる。金払って聞くようにしなさいね。

2015年10月15日 17:16
Sonicさんからの回答

こんにちは

調べればすぐ出てくるとは思いますが、基本的にはviewportを使って対応します。

まずHTML5の仕組みは理解されていますか?
よくわかっていないのでしたら、時給でスカイプなどでレクチャーしてもらってはどうでしょうか。

2015年10月15日 19:09
ご意見箱

× 今後表示しない