ga-05-h3

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

【 HTML/CSS逆引き辞典 】
画像に枠線・額縁を付ける

画像に枠線と額縁を付けるサンプルです。

【サンプル画像】

画像

サンプルコードをコピー&ペーストする前に下段の画像を同じフォルダーに名前(southisland-2.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-img400">
            <img src="southisland-2.png"  
                 alt="画像">
        </p>
    </div>

    <div class="d-center">
        <div class="arrow-down" ></div>
    </div>

       <div class="d-center">
        <p class="d-img400">
            <img src="southisland-2.png"  
                 border="1px"
                 alt="画像">
        </p>
    </div>  
    
    <div class="d-center">
        <div class="arrow-down" ></div>
    </div>

    <div class="d-center">
        <p class="d-img400"> 
            <img src="southisland-2.png" 
                 border="1px"
                 style="padding: 10px;
                        background-color: white;
                        box-shadow: 3px 3px 5px  gray;"
                 alt="画像">
        </p>
    </div>
    
</body>
</html>
        
ワンポイント

画像に枠線を付けるサンプル

ワンポイント

画像に額縁を付けるサンプル

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%;}
/*--====================================
    cssで作る矢印(下向き)
--====================================*/
.arrow-down {
  display:inline-block;
  height:40px;
  width:17px;
  margin-bottom: 15px;
  background-color:darkblue;
  position:relative;
  top:0px;
}
.arrow-down:before {
  position:absolute;
  content:"";
  width:0;
  height:0;
  border:24px solid transparent;
  border-top:24px solid darkblue;
  left:-15px;
  top:40px;
}
/*--====================================
     その他
--====================================*/
.d-center { text-align: center;}
        
 back
pagetop
 next

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

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

写真ギャラリーの設置

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