見出し画像

ホームページを作ろう！ - レイアウト

donguri

上記サイトを参考にしています。レイアウトについてまとめてみます。

基本のHTMLです。レイアウトに必要な最小限の単位を作ります。classをつけてレイアウトの準備。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
　　<section class="wrapper">
      <div class="container">
        <div class="content">
            <h2 class="heading">MESSAGE</h2>
            <p>ホームページを楽しく作ってみましょう。とっても簡単に素敵なホームページができますよ</p>
        </div>
   　 </div>
    </section>
  
</body>
</html>

CSSで実際にどう配置するかを指定していきます。classがネストしていますが、classで指定します。(参考サイトでは親のclassを書いてありますがここでは省略)

.wrapper{
    width:100%;
    background-color:#fafafa;
}

 .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
    border:solid 1px;
}

.content {
    padding:50px;
    text-align:center;
    border:solid 1px ;
  
}

 .heading{
    margin:0px 0px 40px 0px;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    border:solid 1px ;
}

border:solid 1px;

を入れて枠線をひき見やすくします。　JSBinで実行しています。

ページの主要な記事を書くスペースであるページの中央に来るように調整してあります。

.container{
　　max-width:1000px;
　　margin:0px auto;　・・・　containerをwrapperの中央に配置
　　padding:80px 0px;
　　border:solid 1px;
}

.content
{
　　padding:50px;
　　text-align:center;
　　border:solid 1px ;
}

wrapper　>   container   >  content配置します。

記事や画像などはcontentに自由に配置してもレイアウトが崩れないようにできます。

例えば、

2つのセクションを使ったレイアウト。下に表示しているものに対してはflexboxを使って横並びにしています。

HTMLは

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>

  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
 <section class="wrapper">
    <div class="container">
      <div class="content">
        <h2 class="heading">MESSAGE</h2>
        <p>ホームページを楽しく作ってみましょう。とっても簡単に素敵なホームページができます</p>
      </div>
      　
     </div>
 </section>


 <section class="wrapper">
    <div class="container">
      <div class="content">
        <div class="itemFlex">

          <div class="item">
            <div class="ti">
              <img class="img" src="train.jpeg">
              <h4>Flexboxでレイアウト</h4>
            </div>
            <p>Flexboxでレイアウト。簡単に設置できて便利</p>
          </div>

          <div class="item">
            <div class="ti">
              <img class="img" src="train.jpeg">
              <h4>Flexboxでレイアウト</h4>
             </div>
               <p>Flexboxでレイアウト。簡単に設置できて便利</p>
           </div>

           <div class="item">
            <div class="ti">
              <img class="img" src="train.jpeg">
              <h4>Flexboxでレイアウト</h4>
             </div>
               <p>Flexboxでレイアウト。簡単に設置できて便利</p>
           </div>
         
          </div>
       </div>
   　 </div>
  </section>

</body>
</html>

CSSは

body{
  margin:0
}

.img{
　 width: 50px;
  height: 50px;
}

.wrapper{
  width:100%; 
  background-color:#f8f1f1;
}

 .container{
  max-width:750px;
  margin:0px auto;
  padding:80px 0px;  
}

.content {
  width:100%;
}

.heading{
  margin:0px 0px 40px 0px;
  font-size: 24px;
  font-weight: normal;
  text-align: center;
}

.itemFlex{
  display: flex;
 　flex-wrap: wrap;
}

.item {
   padding: 10px;
   margin: 10px;
   width: 200px;
   height: 200px;
   background-color: red;
   color: white;
}

.ti {
    display: flex;
    background-color: #000000;
}



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