ga-05-n4

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

【 HTML/CSS逆引き辞典 】
レスポンシブ対応
flexboxを使った ボックスの折り返し

flexboxを使った折り返しです。演習2の「名山ギャラリー」で使用しています。

画像

画像

下段に表示される6個の写真を同一フォルダーに保存してください。

  a1.画像1(fujisan_01.jpg)

画像

  a2.画像2(fujisan-02.png)

画像

  a3.画像3(fujisan-03.jpg)

画像

  a4.画像4(fujisan-04.jpg)

画像

  a5.画像5(fujisan-05.jpg)

画像

  a6.画像6(fujisan-06.png)

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     flexboxを使ったボックスの折り返し
=====================================-->
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width,initial-scale=1">
    <title> flexboxを使ったボックスの折り返し</title> 
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
<div class="f-page-title">    <!-- 影付き -->
    <h2>
        <span><サンプル></span><br>
        <span>1.日本一の富士山</span>
    </h2>
</div>
                <br>
<!--====================================
     ギャラリー
=====================================-->
<div class="f-container">
    <div class="f-gallery">
        <div id="f-contents01">
            <div class="f-photobox">
                <div>
                    <a href="fujisan-01.jpg" 
                    target="_blank"><img src="
                    fujisan-01.jpg" alt="写真1" 
                    width="200"></a>
                </div>
                <div>
                    <a href="fujisan-02.png"
                     target="_blank"><img src="
                     fujisan-02.png" alt="写真2" 
                     width="200"></a>
                </div>
                <div>
                    <a href="fujisan-03.jpg" 
                    target="_blank"><img src="
                    fujisan-03.jpg" alt="写真3" 
                    width="200"></a>
                </div>
                <div>
                    <a href="fujisan-04.jpg" 
                    target="_blank"><img src="
                    fujisan-04.jpg" alt="写真4" 
                    width="200"></a>
                </div>
                <div>
                    <a href="fujisan-05.jpg"
                    target="_blank"><img src="
                    fujisan-05.jpg" alt="写真5" 
                    width="200"></a>
                </div>
                <div>
                    <a href="fujisan-06.png" 
                    target="_blank"><img src="
                    fujisan-06.png" alt="写真6" 
                    width="200"></a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--====================================
     ギャラリー 終わり
=====================================-->
</body>
</html>
    
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
    flexboxを使ったボックスの折り返し
--====================================*/
/*--====================================
   ページのタイトル  影付き
--====================================*/
.f-page-title{ 
  font-size: 24x;
  color: darkblue;
  text-shadow: 3px 3px 5px #aaa;
  text-align: center;
  font-weight: bold;
  padding-top: 20px;
}
/*--====================================
 コンテナの幅は800px固定、空きは左右均等
--====================================*/
.f-container {
  max-width: 800px;
  margin: 0 auto;
}

/* ギャラリー */
.f-gallery {
  width: 95%;
  margin: 0 auto;
}

.f-photobox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.f-photobox div {
  flex-basis: 200px;
  margin-bottom: 20px;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 3px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 2px #829797;
}

.f-photobox div:hover {
  background-color: skyblue;
}
    
ワンポイント

★display: flex;
親要素にflexboxであることを指定する。
★flex-wrap: wrap;
アイテムを折り返して複数行に上から下に並べる。
★justify-content: space-between;
両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置する。

ワンポイント

★flex-basis: 200px;
アイテムの基本幅を200pxに指定する。

ワンポイント

★.f-photobox div:hover {
  background-color: skyblue;}
マウスのポインタを写真の上に置いたときに背景が水色となる。

 back
pagetop
 next

ul、liを使った
ボックスの折り返し

flexboxを使った
ボックスの折り返し

floatを使った
テキストの回り込み

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken