CSSが最も多く使われるのは、画像のアトラクティブな表示です。豊富な画像書式を組み合わせ、効果的な画像表示を実現できます。
●オンマウスで拡大画像
サムネイルの上にマウスが来ると、拡大画像が表示されます。CSSは別ファイルにまとめてあり、これを呼び出しています。
<link
rel="stylesheet"
href="http://winboys.net/digicame/csstest/ppup0.css">
<div
class="photo">
<a
href="#" class="popup">
<img
style="box-shadow: 2px 2px 4px gray;"
src="http://winboys.net/digicame/csstest/smp1.jpg"
width="200" height="112" />
<img
src="http://winboys.net/digicame/csstest/smp1.jpg"
class="large" /></a><br>
<a
href="#" class="popup">
<img
style="box-shadow: 2px 2px 4px gray;"
src="http://winboys.net/digicame/csstest/smp2.jpg"
width="200" height="112" />
<img
src="http://winboys.net/digicame/csstest/smp2.jpg" class="large" /></a><br>
<a
href="#" class="popup">
<img
style="box-shadow: 2px 2px 4px gray;"
src="http://winboys.net/digicame/csstest/smp3.jpg"
width="200" height="112" />
<img
src="http://winboys.net/digicame/csstest/smp3.jpg"
class="large" /></a>
</div>
この、CSSは難解ですが、もう10年近く前から使っています。10年前の技術ということです。
htmlの中にコピーしたい場合は、
<style
type="text/css">
.photo a
.large {display: block;position: absolute;width: 1px;height: 1px;top: 0;left:
0;}
.photo
a.popup,
.photo
a.popup:visited {display: block;width: 200px;top: 0;left: 0;}
.photo
a.popup:hover .large {display: block;position: absolute;width: 800px;
border:4px ridge #f0e000;
height: 450px;top: 50;left:150;}
</style>
を、使ってください。画像や、動作確認にリンクがあります。
●ページのレイアウトデザインを決める
これは、webデザイナーの本領発揮の部分で、アマチュアにはなかなか難しいCSSの応用分野です。ページを公開するときに着るドレスのようなもので、やはりデザイナーのデザインしたドレスはアマチュアの自作服より見栄えが良いものです。blogは、様々なスタイルシートを用意していて、これらを選ぶと一気にデザインが変わります。自分のサイトで使える無料のものも公開されています。これらを見ると、もはやcssは独学で学べるものではないことを痛感します。
レイアウトは、以前はtableタグで作っていましたが、ページを見る環境にスマホが追加されてからは、tableで固定したレイアウトは使われなくなりつつあります。見る環境によって自動でレイアウトを決めるCSSは進化が激しく、難解です。既製品を使う方が、簡単です。ホームページが、blogに変わっているのも、時代の流れでしょう。
■CSSも自分で書く時代は終わった。プロの作ったCSSを利用すべし