画像とボタンで一気に“サイトっぽく”見せる！HTMLとCSSの基本テクニック

今回は、サイトに欠かせない 「画像」 と 「ボタン」 の使い方を解説します。
この2つを追加するだけで、ページが一気にプロっぽく見えるようになります。

まずは画像を表示してみよう

HTMLでは、画像を表示するには <img> タグを使います。

<img src="sample.jpg" alt="サンプル画像" width="100" height="100">

属性	意味
src	画像ファイルのパス（場所）
alt	画像が表示されないときの代わりのテキスト
width	画像の横幅
height	画像の高さ

画像はHTMLファイルと同じフォルダに「sample.jpg」という名前で保存しておきましょう。

画像のサイズを調整する

CSSを使うと、画像の大きさや形を簡単に変えられます。

img {
  width: 300px;
  height: auto;
  border-radius: 10px;
}

ポイント

• width で幅を指定
• height で高さを自動調整
• border-radius で角を丸くできます

リンクボタンを作ろう

ボタンはリンク（<a>タグ） を使って作ります。

<a href="#">詳しく見る</a>

これをCSSで装飾して、ボタンのように見せます。

a {
  display: inline-block; /* 横幅や高さを指定できるようにする */
  padding: 10px 20px;
  background-color: #0078d7;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

a:hover {
  background-color: #005fa3; /* マウスを乗せたときの色 */
}

ポイント

• display: inline-block; で横幅や高さを指定できるように
• text-decoration: none; で下線を消す
• :hover でマウスを乗せた時の色変化を追加

画像とボタンを組み合わせてみよう

ここまでの内容をまとめて、“カード型デザイン” にしてみましょう。

HTML

<div class="card">
  <img src="service.jpg" alt="サービス画像" width="300" height="200">
  <h2>オリジナルWebテンプレート</h2>
  <p>初心者でも使える高品質テンプレートです。</p>
  <a href="#">詳しく見る</a>
</div>

CSS

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  text-align: center;
  background-color: #fff;
}

.card img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}

.card a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #0078d7;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.card a:hover {
  background-color: #005fa3;
}

これで、画像・タイトル・説明・ボタンのまとまった「カード型デザイン」が完成します！

デザインのコツ

コツ	説明
余白をとる	padding や margin を使って呼吸感を出す
角を丸くする	border-radius で柔らかい印象に
ホバー効果	:hover を使うと「動き」が出て印象アップ
同じ幅でそろえる	見た目が安定して見やすい

まとめ

• 画像は <img> タグで表示できる
• ボタンは <a> タグ＋CSSで装飾
• 画像＋テキスト＋ボタンの組み合わせでプロっぽいカードデザイン が作れる

初心者の皆様へ

「画像がうまく表示されない…」
「ボタンの配置がずれてしまう…」

そんな方は、私がココナラに出品しているWebサイト制作サービスをご利用ください。

• 高品質テンプレートでデザインも安心
• 自分で更新できるWebサイト（WordPress）
• 実用的な機能多数
• 操作マニュアル付き
• 公開後2週間の無料サポート

作業に行き詰まったら、プロに任せるのもひとつの手です。
ぜひご相談ください！

次回予告

次回はいよいよ最終ステップ！
「これまでのコードをまとめて、Webページを完成させる」 です。

HTMLとCSSを組み合わせて、Webサイトを完成させましょう！