1p
トップ > 超初心者でも分かるホームページの作り方 > 超初心者でも分かるCSSの画像の大きさ指定

超初心者でも分かるCSSの画像の大きさ指定

初心者向けに、CSSの画像の大きさ指定をレクチャーします。

CSSの画像の大きさ指定のテンプレート

  1. 普通、画像をHTMLファイルに記載する時には、以下のように書きます。
  2. 
    <img src="HP-picture/HP-0.jpg" alt="内閣">
    
    
  3. これは、いわゆる「相対パス」ですが、今回は、「絶対パス」でも構いません。これだと、「HP-0.jpg」の画像が、そのままで表示されます。大き過ぎたり、小さ過ぎることもあるでしょう。その為、「width="300"」などと、横幅を決めることもあります。「300」と言うのは、スマホの横幅に近く、スマホ画面いっぱいに表示されます。ところが、「300」では、PCで見た時、小さ過ぎると言う問題が出て来ます。そこで、CSSに、以下のように記述します。
  4. 
    img {
    	max-width: 100%;
    	width: 1000px;
    }
    
    
  5. これは、PCでは「横幅1000px」で表示して、スマホの時は「100%」、つまり、画面いっぱいに表示すると言う内容です。とても有効な記述方法なので、お試しください。
  6. 「max-width」は、「img」「input」「textarea」「select」などに使用できます。一方、「table」や「iframe」などには、利用できません。

「table」の設定の仕方

「table」は、「width=300」などと書くこともありますが、PC画面では、小さくなってしまうことがあります。その為、横幅は、指定しないのが、一番良いかも知れません。勝手に上手く調整してくれます。

「iframe」の設定の仕方

ユーチューブの動画をHTMLファイルに埋め込んでコピーする場合に出くわすんですが、実は、これが、とても難しいのです。


@media screen and (max-width: 560px) {
  .iframe-responsive {
    position: relative;
    width: 100%;
    padding: calc(315 / 560 * 100%) 0 0;
  }
  .iframe-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

CSSファイルに上記の記載をします。そして、HTMLファイルには、下記の記載をします。


<div class="iframe-responsive"><iframe ??></iframe></div>

なぜかは、聞かないでください。とにかくこれで、万事上手く行きます。

豆知識



前へ  目次  次へ

免責事項・著作権表示

情報が古かったり、間違っていることなどによる損害の責任は負いかねますので、ご了承ください。

Copyright (C) SUZ45. All Rights Reserved.