☺

猫でデザインとプログラミングを学ぶ

—

マレーシア生まれのゴマとパン

土曜もまたCSS【Day 75 of 100】

3月 14, 2026

—

by

in

flexboxとgrid、曖昧にしていたところを復習

https://kiyo4810.github.io/udemy_kaihatsu_nyumon_kanzen_course/css-grid/02-basics/index.html

display: flex;　まず宣言

flex-direction: row; divを横並びにして

flex-wrap: wrap;　wrapする

多分どうせ忘れる。その時flexboxかgridどちらかを調べればいい

			
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox入門</title>
    <style>
      .container {
        display: flex;
        /* flex-direction: row; */
        /* flex-direction: row-reverse; */
        /* flex-direction: column; */
        /* flex-direction: column-reverse; */
        /* flex-wrap: wrap; */
        /* flex-wrap: nowrap; */
        /* flex-wrap: wrap-reverse; */
        /* flex-flow プロパティはflex-directionとflex-wrapを一度に実装 */
        flex-flow: row wrap;
        /* flex-flow: row nowrap  ;  */
        /* flex-flow: column wrap  ;  */
        /* flex-flow: column nowrap  ;  */
        /* justify-contentは横方向↔️↔️↔️↔️ */
        /* justify-content: center; */
        justify-content: flex-start;
        /* justify-content: flex-end; */
        /* space-betweenは両端は端っこに。最後の列も端っこに */
        /* justify-content: space-between; */
        /* space-aroundは両端がアイテムの半分の幅に。残りは均等に */
        /* justify-content: space-around; */
        /* space-evenlyは両端がアイテムと等しい幅に。残りは均等に */
        /* justify-content: space-evenly; */
        /* align-contentは縦方向↕️↕️↕️↕️ */
        /* align-content: stretch; */
        align-content: flex-start;
        align-content: flex-end;
        align-content: center;
        align-content: space-between;
        align-content: space-around;
        /* 100vhで画面の高さいっぱいいっぱい使う */
        /* height: 100vh; */
        /* height: 50vh; */
        /* height: 200vh; */
        /* align-items: stretch;  */
        /* align-items: flex-start; */
        /* align-items: flex-end; */
        /* align-items: center; */
        /* 文字列のベースラインで揃える */
        /* align-items: baseline; */
      }
      .item {
        /* background-color: #ffa61c;
      margin: 10px;
      padding: 20px; */
        background-color: coral;
        margin: 1rem;
        padding: 2rem;
      }
      .lg {
        /* font-size: xxx-large; */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item01</div>
      <!-- <div class="item lg">item02</div> -->
      <div class="item">item02</div>
      <div class="item">item03</div>
      <div class="item">item04</div>
      <div class="item">item05</div>
      <div class="item">item06</div>
      <div class="item">item07</div>
      <div class="item">item08</div>
      <div class="item">item09</div>
      <div class="item">item10</div>
      <div class="item">item11</div>
      <div class="item">item12</div>
      <div class="item">item13</div>
      <div class="item">item14</div>
      <div class="item">item15</div>
      <div class="item">item16</div>
      <div class="item">item17</div>
      <div class="item">item18</div>
    </div>
  </body>
</html>

		

flexboxの演習

https://kiyo4810.github.io/udemy_kaihatsu_nyumon_kanzen_course/portfolio/index.html

			
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ちゃんちゃんやまん太のポートフォリオサイト</title>
    <meta name="description" content="ちゃんちゃんやまのポートフォリオサイト" />
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <header class="wrapper">
      <img class="photo" src="./images/photo.png" alt="写真アイコン" srcset="" />
      <h1>ちゃんちゃんやまん太</h1>
      <p>Webデザイナー見習い</p>
    </header>
    <main>
      <section class="myskills">
        <div class="wrapper">
          <h2>MY SKILLS</h2>
          <ul>
            <li class="skill_html">HTML5</li>
            <li class="skill_css">CSS</li>
            <li class="skill_javascript">JavaScript</li>
          </ul>
        </div>
      </section>
      <section class="wrapper">
        <h2>WORKS</h2>
        <div class="works_box">
          <img class="works_image" src="./images/cat.png" alt="猫のサイト" />
          <h3>猫のサイト</h3>
          <p>テキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="works_box">
          <img class="works_image" src="./images/dog.png" alt="犬のサイト" />
          <h3>犬のサイト</h3>
          <p>テキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="works_box">
          <img class="works_image" src="./images/turtle.png" alt="亀のサイト" />
          <h3>亀のサイト</h3>
          <p>テキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </section>
    </main>
    <footer>
      <div class="wrapper">
        <p>
          <small>&copy; 2026 Chanchann Enterprise.</small>
        </p>
      </div>
    </footer>
  </body>
</html>

		

			
@charset "utf-8";
/* common */
body {
  margin: 0;
}
img {
  vertical-align: bottom;
}
h1,
h2,
h3,
p {
  margin: 0;
}
.wrapper {
  max-width: 600px;
  margin: 0 auto;
  padding: 30px 4%;
}
/* header */
header {
  text-align: center;
}
.photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 10px;
}
/* main */
h2 {
  text-align: center;
}
.myskills {
  text-align: center;
  background-color: #ddd;
}
.myskills ul {
  margin-top: 30px;
  display: flex;
  flex-flow: row wrap;
  color: white;
  list-style: none;
  padding: 0;
  justify-content: space-around;
}
.myskills ul li {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
}
li {
  padding: 10px;
  margin: 10px;
}
.skill_html {
  background-color: #e44d26;
  border-radius: 50%;
}
.skill_css {
  background-color: #1572b6;
  border-radius: 50%;
}
.skill_javascript {
  background-color: #ebbc00;
  border-radius: 50%;
}
.works_box {
  max-width: 450px;
  margin: 40px auto;
}
.works_image {
  width: 100%;
  height: auto;
}
.works_box h3 {
  margin-top: 10px;
}
.works_box p {
  margin-top: 7px;
}
/* footer */
footer {
  background-color: black;
  color: white;
  text-align: center;
}

		

コメントを残すコメントをキャンセル