左右・２分割Ａ
左に文章のボックス、右に画像のパソコン表示時横２列の2分割表示。表示したデバイスの表示領域にあわせて、ボックスと画像の表示領域の％指定を変えています。
・７６９px以上をＰＣとして、全幅を表示し伸縮のみ
・４８１以上７６８以下をタブレットとみなし、右の画像をボックスの下に
・４８０以下はスマホとみなし、タブレットと同様の表示
まずは作ってみようレスポンシブウエッブ
左右2分割 比較的容易に作成出来ます。
/* スマホ向けＣＳＳ */
@media only screen and (max-width: 480px) {
.box_2 {width:97.5%;
margin-bottom:10px;}
.box2_img {width:100%;
display:block;
margin:0 auto;}
}
/* タブレット向けＣＳＳ */
@media only screen and (min-width: 481px) and (max-width: 768px) {
.box_2 {width:97.5%;
margin-bottom:10px;}
.box2_img {width:100%;
max-width:480px;
display:block;
margin:0 auto;}
}
/* ＰＣ向けＣＳＳ */
@media only screen and (min-width: 769px) {
.box_2_all {overflow:auto;}
.box_2 {width:48%;
float:left;}
.box2_img {float:right;
margin-right:10px;
width:46.5%;}
}
上部 左クラス名：box_2、右画像クラス名：box_2img
box_2 と box_2img を入れたボックスのクラス名：box2_all
box_2の共有ＣＳＳ
.box_2 {
border:solid 1px #000000;
border-radius:5px;
padding:10px; }
1～9行目：スマホ用メディアクエリー
6～7行目：画像の中央寄せ
10～18行目：タブレット用メディアクエリー
20～28行目：ＰＣ用メディアクエリー
22行目：画像がbox2_allのボックスをはみ出す対応