ga-05-h1

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

【 HTML/CSS逆引き辞典 】
画像の貼り付け、縮小・拡大

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

【サンプル画像】

画像

サンプルコードをコピー&ペーストする前に上段のサンプル画像を同じフォルダーに名前(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]を指定しないと画像が画面一杯に広がる。 

 back
pagetop
 next

逆インデントを使った
記号付きの箇条書き

画像の貼り付け
縮小・拡大

背景画像にタイトルの貼り付け

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