【HTML/CSS】「CSS」だけで画像を表示する方法とは?【プログラミング】

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「「CSS」だけで画像を表示する方法」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・HTML/CSSを学習中の人
・画像の配置方法を<img>しか知らない人
・コーディング初心者

はじめに

コーディング初心者の人は、画像を配置するときに使用するのはHTML

<img src="" alt="">

を思いつく人が多いと思います。
でも実は!「CSS」だけで画像を表示する方法があるんです!

おさかな
おさかな

え!すごい!気になる…!

実際につかってみよう!

それでは、CSSで画像を表示してみましょう!

下記コードを画像を表示したい箇所に設置します。

background: url("ここに画像を指定") no-repeat;

実際に指定するとこんな感じになります…!

  .title {
  background: url("../img/title.jpg") no-repeat;
}
おさかな
おさかな

おおおおおおおお!

HTML」とほとんど差がない状態で画像を指定できますが、繰り替えし画像を使用したい場合などは、プロパティを少し変更するだけで、かんたんに行えます。

background: url("ここに画像を指定") ここを自由に指定できます;

 

・repeat
縦横に繰り返して表示。これが初期値
・repeat-x
横方向にのみ繰り返して表示。
・repeat-y
縦方向にのみ繰り返して表示。
・no-repeat
一回だけ表示して繰り返さない。

感想・まとめ

今回は「「CSS」だけで画像を表示する方法」について、書いていきました…!

いかがだったでしょうか?

HTML/CSSそれぞれで画像を指定する方法を学習しておくと、何かと便利かと思います。ぜひ臨機応変に使い分けて、さらに技術力をアップさせていきましょう!
(おさかなもがんばります…!)

おさかなびではプログラミング学習中の人、ブログ初心者に向けて、「デジタル時代を楽しむためのミニ知識」をご紹介しています!
ぜひ他のページも覗いてみてください…!

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

タイトルとURLをコピーしました