[初めてのwebサイト作成 レッスン23]
画像の配置方法のご紹介


🌹レッスン23🌹

画像の配置方法を3通りご紹介します!


 🌻パソコンのブラウザはGoogle Chromeを使用しています。

1. 画像の配置方法3つご紹介します!

 今回は、画像をwebページのどこに配置するかを
指定する方法をご紹介します。

何も指定しないと、左揃えで表示されます。

私のブログページを題材として使用します。


 1-1. text-alignで指定する方法

text-alignは、文字だけでなく画像にも使えます。

・left(左揃え)

・center(中央揃え)

・right(右揃え)


例えば、図のような、正方形の画像を真ん中に指定します。

今までに作ったファイルを利用して、桃色のコードを入力してね!

xxxx.pngをご自分の用意した画像ファイ名にして下さい。

【HTML】


  <body>
  <div id="sikaku">
  <img src="images/xxxx.png" alt"正方形" width="300px" />
  </div>
  </body>
  

【CSS】


  #sikaku{
    text-align: center;
    }
  

🌼ブラウザで確認してみましょう!


 1-2 magin:autoで真ん中に配置する。

今までに作ったファイルを利用して、桃色のコードを入力してね!

xxxx.pngをご自分の用意した画像ファイ名にして下さい。

【HTML】


  <body>
  <div id="sikaku">
  <img src="images/xxxx.png" alt"正方形" width="300px" />
  </div>
  </body>
  

【CSS】


  #sikaku{
    margin: auto;
    width: 100%;
    max-width: 300px;
    height: auto;
    }
  

🌼ブラウザで確認してみましょう!


 1-3 floatで位置を指定する

画像が小さいと、その画像の横は空白です。

今度は、テキストの中に画像をレイアウトします。

floatプロパティは、画像にテキストが回り込むように指定できます。

例えば、画像を右に配置し、テキストが左に回り込む指定をします。

逆の場合は、float: left;にして下さい。

今までに作ったファイルを利用して、桃色のコードを入力してね!

xxxx.pngをご自分の用意した画像ファイ名にして下さい。

【HTML】


  <body>
  <div id="sikaku">
  <img src="images/xxxx.png" alt"正方形" width="300px" />
  </div>
  </body>
  

【CSS】


  #sikaku{
    float: right;
    width: 100%;
    max-width: 300px;
    height: auto;
    }
  

🌼ブラウザで確認してみましょう!

パソコン画面

スマホ画面


上手く表示されましたか?




★まとめ

いかがでしたか?

近年のwebページでは、文字ばかりが羅列されていると、読む気を失いそうなので画像をよく使います。

今回は、画像をwebページのどこに配置するのかで、そのwebページを魅力的に見せる✨テクニックです。

皆さんは、色や形やデザインなどを変えてもっとセンス良くお好みで色々試してみてね(#^.^#)

次回レッスン24は、「リスト(箇条書き)の作成方法の紹介」をアップロードする予定です!

See you again Take care (^.^/)))~~~bye!!




TOP