求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

Flexboxを使ったレイアウト - 基本形

Flexboxを使ったレイアウト - 基本形

%で指定

f:id:web-0220:20190203164540p:plain


f:id:web-0220:20190203165607g:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Flexboxを使ったレイアウト</title>
<meta name="viewport" content="width=device-width">
<style>
html, body, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
html {
  font-size: 62.5%;
}
body {
  background: #FFF;
  font-size: 1.6em;
}
.header, .footer {
  width: 100%;
  background: #CBCBCB;
}
.main {
  max-width: 960px;
  margin: 0 auto;
}
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 20px 0;
  box-sizing: border-box;
}
.main>.container:last-of-type {
  padding: 0 20px;
}
.box {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
  background: #C4C4C4;
  font-size: 2.4rem;
  font-family: 'Arial Black', sans-serif;
  text-align: center;
  line-height: 150px;
}
.box1 { background: #FFF; }
.box2 { background: #CBCBCB; }
.box3 { background: #CBCBCB; }
.box4 { background: #CBCBCB; }
.box5 { background: #CBCBCB; }
.box6 { background: #CBCBCB; }
.box7 { background: #FFF; }
.box8 { background: #FFF; }

@media screen and (min-width: 640px) {

  .box2 { width: 66%;}
  .box3 { width: 32%;}
  .box4 { width: 32%;}
  .box5 { width: 32%;}
  .box6 { width: 32%;}
  .box7 { width: 49%;}
  .box8 { width: 49%;}

}
</style>
</head>
<body>

<header class="header">
<div class="container">
  <div class="box box1">box1</div>
</div>
</header>

<main class="main">
<div class="container">
  <div class="box box2">box2</div>
  <div class="box box3">box3</div>
</div><!-- /container -->
<div class="container">
  <div class="box box4">box4</div>
  <div class="box box5">box5</div>
  <div class="box box6">box6</div>
</div><!-- /container -->
</main>

<footer class="footer">
<div class="container">
  <div class="box box7">box7</div>
  <div class="box box8">box8</div>
</div><!-- /container -->
</footer>

</body>
</html>
flexで指定
  • 読み込み順番と表示順番を変更

f:id:web-0220:20190203170413g:plain


f:id:web-0220:20190203170606g:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Flexboxを使ったレイアウト - 3カラム</title>
<meta name="viewport" content="width=device-width">
<style>
/* reset
------------------------------- */
html,body,h1,h2,h3,p,ul,li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  vertical-align: bottom;
}
html {
  font-size: 62.5%;
}

/* body
------------------------------- */
body {
  font-size: 1.6rem;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

/* layout
------------------------------- */
.container {
    margin: 20px auto;
  }
h1 {
  margin-bottom: 20px;
  font-size: 1.8rem;
  text-align: center;
}
h2 {
  margin-bottom: 10px;
  color: #E6AC27;
  font-size: 1.8rem;
}
h3 {
  margin-bottom: 10px;
  color: #333;
  font-size: 1.6rem;
}
.gnav a {
  display: block;
  margin: 10px;
  border-radius: 5px;
  background: #60B99A;
  color: #fff;
  padding: 15px;
}
.gnav .logo {
  background: #4584b1;
}
.main section {
  margin: 10px;
  padding: 15px;
  border-radius: 5px;
  background: #F5F0CF; 
}
.main p {
  font-size: 1.6rem;
  line-height: 1.5;
}

@media screen and (min-width: 768px) {

  .container {
    max-width: 960px;
    margin: 20px auto;
  }
  h1 {
    margin-bottom: 20px;
    font-size: 2.8rem;
  }
  .main h2 {
    font-size: 2.0rem;
  }
  .gnav, .main {
    display: flex;
    justify-content: space-between;
  }
  .gnav li:first-child {
    margin-right: auto;
  }
  .main-content {
    flex: 2;
    order: 2;
  }
  .sidebar {
    flex: 1;
    order: 1;
  }
  .advertisement {
    flex: 1;
    order: 3;
  }

}
</style>
</head>
<body>
<div class="container">
<h1><a href="a">Flexboxを使ったレイアウト - 3カラム</a></h1>

<nav>
<ul class="gnav">
  <li><a href="#" class="logo">ロゴ</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>
</nav>

<main class="main">

<section class="main-content">
  <h2>1. メインコンテンツ</h2>
  <h3>優先順位:1</h3>
  <p>flex レイアウトを定義するねらいは、アイテムの幅や高さを、任意のディスプレイデバイスで使用できる領域を最適に埋めるように変更する能力です。</p>
  <p>flex コンテナはアイテムを、使用可能な空き領域を埋めるように引き延ばしたり、はみ出さないように縮めたりします。</p>
</section>

<section class="sidebar">
<h2>2. サイドバー</h2>
<h3>優先順位:2</h3>
<p>ここには、サイドメニューなどが入ります。</p>
</section>

<section class="advertisement">
<h2>3. バナー領域</h2>
<h3>優先順位:3</h3>
<p>3カラムの場合、広告領域として使われうことが多い。</p>
</section>

</main>
</div><!-- /.container -->
</body>
</html>
flex-shrinkとflex-basisで指定
  • 縮小率を「0」にして、固定値を指定する(それ以上縮小しないように)

f:id:web-0220:20190203171935p:plain


f:id:web-0220:20190203171752p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
.box {
  display: block;
  width: 100%;
  height: 200px;
  font-size: 30px;
  font-family: 'Arial Black', sans-serif;
  text-align: center;
  line-height: 200px;
}
.main {
  background: #C3E6FF;
}
.sidebar {
  background: #FFD9D9;
}

@media screen and (min-width: 640px) {

  .container {
    display: flex;
    max-width: 960px;
    margin: auto;
  }
  .main {
    flex-basis: auto;
  }
  .sidebar {
    flex-shrink: 0;
    flex-basis: 200px;
  }

}
</style> 
</head>
<body>
<div class="container">
  <div class="box main">main</div>
  <div class="box sidebar">sidebar</div>
</div><!-- /.container -->
</body>
</html>