見出し画像

ホームページを作ろう！- Flex,@media

donguri

この基本HTMLについて大きな画面では横並び、小さくなると縦ならびレイアウトしていきます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SamplePage</title>
  <style>
 
  </style>
</head>
<body>
  <div class="header">Title</div>
  <div class="article">
    
    <div class="box">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div class="box">bbbbbbbbb</div>
  </div>

  <div class="footer">Footer</div>
</body>
</html>

CSS

昔からよく使われているfloatを使ってレイアウト。

 body {
      font-family: sans-serif;
      margin: 0;
    }

    .header {
      color: white;
      background-color: rgb(176, 6, 6);
      width: 100%;
      height: 80px;
    }

    .article {
      margin:0 auto;
      color: white;
      background-color: rgb(200, 95, 95);
      width: 95%;
      height:500px;

    }

    .box {
      position: relative;
      float:left;
      margin:15px;
      height: 200px;
      width: 45%;
      border: solid 1px;
      overflow-wrap: break-word; 

    }


    .footer {
      color: white;
      background-color: rgb(172, 32, 4);
      width: 100%;
      height: 50px;
    }

Flex を使ってレイアウト。

display: flex;
flex-wrap: wrap;

をつけて

float:left;

を削除します。

 .article {
      margin:0 auto;  
      display: flex; 
      flex-wrap: wrap; 
      color: white;
      background-color: rgb(200, 95, 95);
      width: 95%;
      height:500px;
   }

  .box {
      position: relative;
      margin:15px;
      height: 200px;
      width: 45%;
      border: solid 1px;
      overflow-wrap: break-word; 
   }

同じことができます。

はみ出ないように文字の折り返しを設定しています。

overflow-wrap: break-word;

幅が広い時

幅を縮めていくと

次にメディアクエリで同じように画面が小さくなれば縦並びのレイアウトにします。

.article {
      margin:0 auto;  
      display: flex; 
      color: white;
      background-color: rgb(200, 95, 95);
      width: 95%;
      height:500px;
   }

  .box {
      position: relative;
      margin:10px;
      height: 200px;
      width: 47%;
      overflow-wrap: break-word; 
     background-color: orange;
   }

実行してみます。

幅が400px以下になったら縦方向のみになる仕様。

flex-direction: column;

としています。

@media screen and (max-width: 400px) {
  .article {
      flex-direction: column;
      width: 100%;
      height:500px;
   }
  
   .box {
     box-sizing: border-box;
     margin:5px 0px;
     padding:10px;
     width: 100%;
}

表示させると。

こちらは画面によって幅も調整して見やすくすることができます。

この記事が気に入ったらサポートをしてみませんか？