ga-04-08

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

8.画像の貼り付け

目   次

1.背景画像とタイトルの貼り付け

2.画像の貼り付け

3.写真ギャラリーの設置

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

5.無料の画像ダウンロードサイト

  1.背景画像とタイトルの貼り付け

メインタイトル等に使える背景画像とタイトルの貼り付けサンプルです。画像の大きさは、画面の大きさに応じて拡大・縮小されます。

【サンプル画像】

画像

サンプルコードをコピー&ペーストする前に下段の画像を同じフォルダーに名前(mountain-01.jpg)を付けて保存してください。保存の方法は、画像の上にカーソルを置いて右クリックし、「名前を付けて画像を保存」を選択します。

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
    背景画像&タイトル表示
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>

<div class="f-gazo-box" 
     style=" background: url(mountain-01.jpg)
             no-repeat;
             background-size: cover">
    <div class="f-gazo-box-title">
        <span>生涯かけて歩きたい</span>
        <span>山好きのホームページ</span>
    </div>
</div>
</body>
</html>
        
ワンポイント

meta name="viewport"
レスポンシブ対応のための定義。

 
ワンポイント

background: url(mountain-01.jpg)
背景画像にmountain-01.jpgを表示する。
background-size: cover
元画像の縦横比は保持して、要素をちょうどよく覆うサイズにする

 
 
CSSコード(style-1.css)
/*=====================================
  背景画像に文字を重ねる(レスポンシブ)
--====================================*/
@charset "utf-8";
/*--====================================
      BODY(画面幅設定) 
--====================================*/
body {
   max-width: 800px; 
      /*ページの幅 800px以上に広がらない*/
   width: 100%; 
      /*ページの幅 画面に応じて縮小する*/
   margin: 0 auto;  
      /*ページの表示 センター*/
}
/*=====================================
  背景画像に文字を重ねる(レスポンシブ)
--====================================*/
.f-gazo-box {
  width: 100%;
  padding-top: 66.6%;
  position: relative;
  top: 0;
  left: 0;
}
.f-gazo-box .f-gazo-box-title {
  position: absolute;
  top: 10%;
  width: 100%;
  font-size: 46px;
  line-height: 1.5em;
  letter-spacing:0.2em;
  color: #fff;
  text-align: center;
  font-weight: bold;
}
/* SP向けの設定 */
@media screen and (max-width: 600px) {
  .f-gazo-box .f-gazo-box-title {
   font-size: 32px;
   letter-spacing:0.0em;
  }
}
.f-gazo-box span{
  display:inline-block;
}
        
ワンポイント

padding-top: 66.6%;
「background」では、高さは固定値しか指定できない。高さは横幅との割合で決まるので、レスポンシブ対応のため、「padding-top」に横幅に対する高さの割合を指定する。

ワンポイント

@media screen and (max-width: 600px)
スマホ対応として、横幅600px以下の画面では、文字の大きさと文字間隔を小さくしている。

  2.画像の貼り付け

当ホームページで作成した「カラーネーム表」を貼り付けるサンプルです。

【サンプル画像】

画像

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

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
        画像の貼り付け
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
   <div class="d-center">
        <p class="d-img600">
            <img src="color-name-list.png" alt="画像">
        </p>
    </div>
</body>
</html>
        
ワンポイント

class="d-img500"と指定すると
 画像が小さくなる。
class="d-img700"と指定すると
 画像が大きくなる。

CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
      画像の貼り付け
--====================================*/
/*--====================================
  画像サイスの指定(20x~1000px)
--====================================*/
.d-img20 img {max-width: 20px;width: 90%;}
.d-img50 img {max-width: 50px;width: 90%;}
.d-img100 img {max-width: 100px;width: 90%;}
.d-img200 img {max-width: 200px;width: 90%;}
.d-img300 img {max-width: 300px;width: 90%;}
.d-img400 img {max-width: 400px;width: 90%;}
.d-img500 img {max-width: 500px;width: 90%;}
.d-img530 img {max-width: 530px;width: 90%;}
.d-img540 img {max-width: 540px;width: 90%;}
.d-img550 img {max-width: 550px;width: 90%;}
.d-img600 img {max-width: 600px;width: 90%;}
.d-img700 img {max-width: 700px;width: 90%;}
.d-img800 img {max-width: 800px;width: 90%;}
.d-img900 img {max-width: 900px;width: 90%;}
.d-img1000 img {max-width: 1000px;width: 90%;}
/*--====================================
     その他
--====================================*/
.d-center { text-align: center;}
        
ワンポイント

[width: xx%]を指定すると画面の大きさに応じて画像が縮小・拡大される。%は画面の幅に対する割合。
[max-width: xxpx]を指定しないと画像が画面一杯に広がる。 

  
  3.写真ギャラリーの設置

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

画像

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

画像

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

1.画像1(fujisan_01.jpg)  

画像

2.画像2(fujisan_02.jpg)  

画像

3.画像3(fujisan_03.jpg)  

画像

4.画像4(fujisan_04.jpg) 

画像

5.画像5(fujisan_05.jpg)  

画像

6.画像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
各アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せる  

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

EXCELで作成した作図を切り取って、ホームページで使えるよう加工する手順です。ご存じの方は読み飛ばしてください。

1.EXCELによる作図

画像

2.EXCELの目盛線を消す
表示タグの目盛線に”レ”(チェック)を入れると目盛線が消える。

画像

3.Windowsのペイントを利用する
EXCEL画面の状態で、キーボードの[Print Screen]を押し、画面をコピーする。Windowsのペイントを呼び出し、[Ctrl+V]で貼付けを行う。

画像

4.必要な範囲を選択する
ホームタグの選択タグを選択すると記号が表れるので必要な範囲を囲む。

画像

5.必要な範囲をトリミング(画像の切り抜き)する
ホームタグのトリミングを選択すると選択した範囲だけが画面に残る。

画像

5.トリミングした画像の保存
「kiritori-gazou.png」と名前を付けて保存する。

画像

5.切り取った画像の呼び出し
HTMLファイル及びCSSファイルに以下をコーディングすると切り取った画像が呼び出される。

【サンプルHTMLコード】

    <div class="d-center">
         <p class="d-img500">
              <img src="kiritori-gazou.png" alt="画像">
         </p>
    </div>
        

【サンプルCSSコード】

    /*--====================================
         テキストの中央設定
    --====================================*/
    .d-center { text-align: center;}
    /*--====================================
      画像サイスの指定(400px、500px、600px)
    --====================================*/
    .d-img400 img {max-width: 400px;width: 90%;}
    .d-img500 img {max-width: 500px;width: 90%;}
    .d-img600 img {max-width: 600px;width: 90%;}
        

【切り取った画像】

画像
※枠は、後から付けたものです。

  
  5.無料の画像ダウンロードサイト 

A.多くのクリエイター達による1.800万点以上の高品質なフリー画像素材
当ページの山の写真もここから頂きました。「日本アルプス」で検索すると当ページで使用したサンプル画像が表示されます。

  pixabay  ・・・・・・・  ここをクリックしてください  

B.あらゆる分野のイラストが大量に保存されています。
お気に入りがきっとみつかります。演習1で使った画像はこのサイトの「背景素材」で検索したものです。

  かわいいフリー素材集 いらすとや  ・・・  ここをクリックしてください  

 back
pagetop
 next

枠線(ボーダー)
の活用

画像の貼り付け

リンク
(linkタグ、aタグ)

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