みんなのお仕事相談所

「みんなのお仕事相談所」では、ユーザーさまのご依頼の相場や製作期間、
契約書やお金に関する悩みを気軽に相談できるQ&Aコミュニティです。
違反案件についてはよくある質問の「【共通】違反のお仕事とは」をご覧ください。
また、違反報告についてはよくある質問の「【共通】違反報告とは」をご確認ください。

受注者からの相談
Webデザインに関する相談

制作について

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

①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
不安や疑問に真摯に向き合い改善につとめます クラウドワークス安心安全宣言