ga-05-h4

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

【 HTML/CSS逆引き辞典 】
写真ギャラリーの設置

写真ギャラリーのサンプルです。
演習問題-2の「名山ギャラリー」で使っています。 写真ギャラリーの完成画面は ここをクリックしてください。 この画面に戻るときは、ブラウザの戻るボタンを利用してください。

画像

写真をクリックすると当該写真が拡大して表示されます。この画面からは拡大はできません。演習問題-2の完成画面で確認して下さい。完成画面で上段の写真をクリックするとクリックした写真が画面一杯に広がります。

画像

サンプルコードをコピー&ペーストする前に下段のサンプル画像(6個)を同じフォルダーに名前を付けて保存してください。

画像1(fujisan_01.jpg)  

画像

画像2(fujisan_02.jpg)  

画像

画像3(fujisan_03.jpg)  

画像

画像4(fujisan_04.jpg) 

画像

画像5(fujisan_05.jpg)  

画像

画像6(fujisan_06.jpg)  

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     ギャラリー
=====================================-->
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width,initial-scale=1">
    <title>演習ー2</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" width="200"
                 alt="写真1" ></a>
            </div>
            <div>
                <a href="fujisan-02.png" target="_blank">
                <img src="fujisan-02.png" width="200"
                 alt="写真2"></a>
            </div>
            <div>
                <a href="fujisan-03.jpg" target="_blank">
                <img src="fujisan-03.jpg" width="200"
                 alt="写真3"></a>
            </div>
            <div>
                <a href="fujisan-04.jpg" target="_blank">
                <img src="fujisan-04.jpg" width="200"
                 alt="写真4"></a>
            </div>
            <div>
                <a href="fujisan-05.jpg" target="_blank">
                <img src="fujisan-05.jpg" width="200"
                 alt="写真5"></a>
            </div>
            <div>
                <a href="fujisan-06.png" target="_blank">
                <img src="fujisan-06.png" width="200"
                 alt="写真6"></a>
            </div>
        </div>
    </div>
</div>
</div>
<!--====================================
     ギャラリー 終わり
=====================================-->
</body>
</html>
        
ワンポイント

href="fujisan-01.jpg"
クリックされた時に表示される画像
img src="fujisan-01.jpg"
ギャラリーに表示されるサムネイル画像

CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
    画像の加工と貼り付け
           ギャラリー
--====================================*/
/*--====================================
   ページのタイトル  影付き
--====================================*/
.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;
}
        
ワンポイント

★flex-wrap: wrap
フレックスアイテムを折り返す
★justify-content: space-between
各アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せる  

 back
pagetop
 next

画像に枠線・額縁
を付ける

写真ギャラリーの設置

パソコン画面から
画像の切り取り

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