画像とリンク、そしてボタンの装飾
AIの提案により、今回は「画像を表示する」「リンクを作る」「ボタンを装飾する」という、Webページの基本パーツ作りに手を付けてみました。その過程で私がつまずいた場所と、AIとのやり取りを振り返ります。
AIとの対話メモ
target="_blank" はどこに書くのか問題
画像をクリックしたら別タブでGoogleが開くように「target=”_blank”」という命令を入力するのですが、どこに「target=”_blank”」書けばいいのか分からなくなりました。
これは「新しいタブで開く」という命令。自分のサイトからユーザーを逃がさないため？にも重要とのこと。（とAIは教えてくれました・・）
target=”_blank”はどこにいれるの？
これは <a> タグ（リンクを作るタグ）の中に書くのが正解でした。<img> タグ（画像を表示するタグ）には入れません。役割がそれぞれ違っていて、「どこに飛ぶか（href）」「どう開くか（target）」はリンクの役割である <a> タグの仕事、というわけです。
html
<a href="https://www.google.com" target="_blank">
<img src="test.jpg" alt="練習用の画像">
</a>CSSを書いてもボタンが出ない問題
CSSでボタンの見た目を整えるコードを書いたのに、そもそもボタンが画面に現れないという現象。
ｃｓｓをスタイルタグに入れたけどボタン出ない
原因はシンプルで、HTML側にボタンの実体（<button>タグ）を書いていなかったことでした。CSSは「見た目をどうするか指示する命令」であって、「存在しないものを出現させる役割」をもっていません。HTML（骨組み・中身）とCSS（装飾）はセットで初めて機能する、という当たり前の基本が身に沁みました。
プログラム事例と解説
画像とホバーエフェクト
html
<a href="https://www.google.com" target="_blank">
<img src="test.jpg" alt="適当に選んだ画像" class="pro-img">
</a>css
.pro-img {
width: 300px;
border: 8px solid #333; /*太い枠線*/
border-radius: 15px; /*角を少し丸く*/
transition: 1.0; /*変化の余韻*/
}
/*マウスを乗せた時の動き*/
.pro-img:hover {
transform: scale(1.05) rotate(-2deg); /*少し大きくし、少し傾ける*/
filter: brightness(1.2); /*少し明るく光らせる*/
cursor: pointer;
}まず.pro-imgというクラス名を画像タグにつけて、それに対してCSSで幅・枠線・角丸を指定しています。ポイントは:hoverという書き方で、これは「マウスが乗った時だけ」有効になる特別なセレクタです。マウスを乗せると画像が少し拡大・回転し、明るさが変わる、というアニメーションになっています。transitionを指定しておくことで、変化が一瞬ではなく滑らかになります。
ボタンの装飾
html
<button class="pro-btn">ポイントしてみて</button>css
.pro-btn {
display: block; /*ボタンを塊として扱い、1行占有*/
margin: 20px auto; /*上に20pxの隙間を作り、左右「auto」で中央に配置する*/
padding: 15px 40px; /*ボタンの内側に余白。これが押しやすさ*/
background-color: #ff0055;
color: white; /*文字の色*/
border: none; /*枠線なし*/
border-radius: 50px; /*丸みをつける*/
font-weight: bold; /*文字を太く*/
cursor: pointer; /*マウスをポイントすると「指」の形に*/
transition: 0.3s; /*変化を「一瞬」ではなく「0.3秒」かけて*/
}
.pro-btn:hover {
background-color: #cc0044; /*ポイントすると少し色が濃くなる*/
transform: translateY(-3px); /*3pxだけ上に浮かせる*/
box-shadow: 0 5px 15px rgba(255, 0, 85, 0.4);
/* ボタンの色の影を落とす。これで光って見える*/
}display: block;で横幅いっぱいの領域を確保し、margin: 20px auto;で「上下に20px、左右は自動（＝中央寄せ）」を実現しています。border-radius: 50px;で角を丸くすると、ボタンらしい柔らかい印象になります。
苦労したポイント・不明点
-
backgroundとbackground-colorの違いがよく分からなかった。background-colorは「色専用」、backgroundは画像や繰り返し設定なども含めた「一括指定」だと教わったが、実際に使い分けの感覚はよくわからない。
-
marginとpaddingの違い。「内側の余白」か「外側の余白」かというルールは理解したが、実際にレイアウトが崩れた時にどちらが原因か直感的に判断できない。
-
padding: 0 10px;のように数値が2つ並ぶ書き方がよくわからない。「1つなら上下左右、2つなら上下・左右」というルールを都度確認しながら。
今日の学び
一番の収穫は、あまりに基本中の基本ですが、「CSSは、HTMLという実体に対する装飾」と実感できたことです。ボタンが出ない、と混乱した時に「そもそもHTMLに書いたか？」と問い直す癖がついたのは、地味だけど前進でした。次回もこのテーマの続きを掘り下げます。
※本文中、「画像とホバーエフェクト」の部分の動作実例が思ってたのと違う・・。そのうち原因調べて直します。
（次回#005へつづく）
コメント