「みんなのお仕事相談所」では、ユーザーさまのご依頼の相場や製作期間、
契約書やお金に関する悩みを気軽に相談できるQ&Aコミュニティです。
違反案件についてはよくある質問の「【共通】違反のお仕事とは」をご覧ください。
また、違反報告についてはよくある質問の「【共通】違反報告とは」をご確認ください。
①PC版のデザインカンプをもとに、PC&スマートフォンでレスポンシブになるように
コーディングとはどのように作ればいいんでしょうか?
できましたら、詳しくわかりやすく教えてもらえませんでしょうか?
どうぞよろしくお願いいたします。
それとですが、
②HTMLマークアップとCSSマークアップとはどのように作ればいいんでしょうか?
それを無料でか。おかしすぎる。金払って聞くようにしなさいね。
こんにちは
調べればすぐ出てくるとは思いますが、基本的にはviewportを使って対応します。
まずHTML5の仕組みは理解されていますか?
よくわかっていないのでしたら、時給でスカイプなどでレクチャーしてもらってはどうでしょうか。
こんにちは
調べればすぐ出てくるとは思いますが、基本的にはviewportを使って対応します。
まずHTML5の仕組みは理解されていますか?
よくわかっていないのでしたら、時給でスカイプなどでレクチャーしてもらってはどうでしょうか。
スマートフォンでしたら↓こちらの設定でなんとかわかりました。
ありがとうございます。
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;
}