メディアによって表示を変える

メディアクリエ
このままでも、大きさには対応して変化します。
けれどスマホやパソコンなどのメディアによって画面の大きさが変わります。
メディアによって画面が変わるように偏差させましょう。
まずはスマホ用の画面を作ります。スマホ用が基本です。
その後、タブレット用、パソコン用と変化させます。 　

スマホ用の画面

スマホ用の画面は、画像への文字の回り込みを中止します。
まず、以前書いたCSSの右回り込み右回り込みを解除します。 
.pic1{
    float:none ;
}
.pic2{
    float: none ;
これで、スマホ用の画面はできあがりです。
大きさによって画面を切り替えるメディアクリエは、スマホ画面が基本です。
まずスマホ画面用のページを作り、それがお菊なったときに画面の形を変えテイクのが基本です。

タブレット用の画面

メディアの大きさを指定し、それ以上大きい画面にはこれが適用されます。
ここでは800px以上の指定です。

@media( min-width: 800px ){
}　
ではまず、文字等の回り込みを指定します。
前回やったものをもう一度書きましょう。

@media( min-width: 800px ){
    .pic1{
    float: left;
    }
    .pic2{
    float: right;
    }    
}　
これで画面の大きさを変えると、文字が回り込むようになります。

パソコン用の画面

文章の表示がに長くなりすぎますので、2段に分けます。
まず　HTMLでpタグの上下にdivタグをつけてデザインできるようにマークをつけます。
pタグは文章中2カ所ありますから2カ所に 　div class="mcol-1"　をつけます。 
　         <div class="mcol-1">    
            <p>
              中略　
            </p>
            </div>
つぎに、CSSで今つけたdivタグに対して、2段組の指定をします。 
　　@media (min-width: 1120px) {
    .mcol-1 p {
        column-count: 2;
        column-gap: 2em;
        column-rule: 1px solid #ddd ;
    }
  }
column-count: 2;　が2段組です。これを３に変えてみて下さい.
column-gap　や　column-rule　の数字も変えて何をしているか見てみましょう。
こうすることで、横に2列に割れます。
もっと大きくなったらどうしようというわけで、こんなこともしてみました。
文章は適当に書き換えて、背景や枠を白くするとできあがりです。 
  @media (min-width: 1320px) {    
    .content1 {
	   width: 90%;
	   margin-left: auto;
	   margin-right: auto;
        padding: 0;
    }
  }

飯田の春←こんな感じ

次の問題へ進む