ga-05-n6

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

【 HTML/CSS逆引き辞典 】
レスポンシブ対応
画像の縮小

画像のスマホ対応のサンプルです。

サンプルコードをコピー&ペーストする前に<パソコン画面>を「pasokon-fujisan.png」と名前を付けて保存してください。

ブラウザがGoogle Chromeであれば、F12キーを押すことによってスマホ対応を確認できます。

<パソコン画面> 画像


<スマホ画面>
画像

【サンプル コード】
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="d-center">
        <p class="d-img600">
            <img src="pasokon-fujisan.png" alt="画像">
        </p>
    </div>
</body>
</html>
    
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
      画像のスマホ対応
  画像サイスの指定(20x~800px)
--====================================*/
.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-img600 img {max-width: 600px;width: 90%;}
.d-img700 img {max-width: 700px;width: 90%;}
.d-img800 img {max-width: 800px;width: 90%;}
/*--====================================
     その他
--====================================*/
.d-center { text-align: center;}
    
ワンポイント

★width: 90%;
widthを%で指定することにより画面幅に応じた縮小がされる。

 back
pagetop
 next

floatを使った
テキストの回り込み

画像の縮小

レスポンシブ
Webデザインの検証

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