C-10. 画像の配置

2021.12.24

画像の配置方法を知っておこう

画像の位置を指定する方法　<img src=”画像ファイル” alt=””>の利用

実行して記載内容を確認しよう。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  <style>
    .class1 {
      text-align: left;
    }
 
    .class2 {
      text-align: right;
    }
  </style>
 
  <body>
   <div class="class1">
      <img src="https://techup.tokyo/wp-content/uploads/2021/12/image1.jpg">
    </div>
    <div class="class2">
      <img src="https://techup.tokyo/wp-content/uploads/2021/12/image1.jpg">
    </div>
  </body>

ブラウザ実行結果

background: url(画像ファイル)で、CSSに設定する方法を知っておこう

記述して表示を確認してみてください。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <style>
    /* 大枠ボックス */
    .layer{
      /* 背景画像設定 */
      background: url(https://techup.tokyo/wp-content/uploads/2021/12/image1.jpg) no-repeat 0 0;
      background-size: 50%;
      text-align: center;
      width: 640px;
      height: 358px;
    }
  </style>
 
  <body>
    <div class="layer"></div>    
  </body>

ブラウザ実行結果

画像とテキストの配置を確認しておこう

親要素であるdivに対してはposition:relativeを、文字列の入ったpタグに対してはabsoluteを指定します。

作成して記述内容でどうかわるかを確認してみてください。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <style>
    .sample_img {/*親div*/
      position: relative;/*相対配置*/
      }
 
    .sample_img p {
      position: absolute;/*絶対配置*/
      color: white;
      top: 20px;
      left: 10px;
      }
 
    .sample_img img {
      width: 50%;
      }
  </style>
 
  <body>
    <div class="sample_img">
      <img src="https://techup.tokyo/wp-content/uploads/2021/12/image1.jpg" />
      <p>-- テキスト表示テスト --</p>
    </div>
  </body>

ブラウザ表示結果

課題

下記のような、画像を重ねたレイアウトを作成してください。

作成したファイル名をindex_2_20.htmlにして送ってください。

参考画像：

CSS
1
2
https://techup.tokyo/wp-content/uploads/2021/12/image1.jpg
https://techup.tokyo/wp-content/uploads/2021/12/image2.jpg

実行結果

ヒント

CSSの指定の一例です。以下の CSSを参考にHTMLを構築し、CSSの値を入れてみてください。

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.①{
    background: url() no-repeat 0 0; /* バックグラウンドに画像を入れる　no-repeatについて要調査 */
    background-size: ;
    position: ;
    margin: ;
    text-align: ;
    width: ;
    height: ;
  }
 
.②{
    position: ;
    top: ;
    left: ;
  }
 
.② img{
    width: ;
    height: ;
  }

課題・復習用検索キーワード

検索例
🔍CSS　背景に写真
🔍CSS　要素の中央寄せ
🔍CSS　画像の挿入