画像の表示・活用 (HTML,CSS,JavaScript)(4ページ目)

画像をランダムに表示する方法！JavaScriptで切り替え複数の画像リストの中から、JavaScriptでランダムに1つが選ばれて表示される仕組みを作ってみましょう。お気に入りの写真の中から1枚だけを毎回ランダムに選んで大きく表示させたい場合などに活用できます。JavaScriptの乱数を使ってラ...続きを読む

画像形式を正しく選択できていますか？次の2つの画像をご覧下さい。同じ内容の絵ですが、何かが異なります。何が異なるかお分かりでしょうか。AB明らかに下側（B）の方がボケていて粗いですね。※かなり極端な例なのですが。つまり、この画像ではAの方が正しい画像形式を選択できており、Bの方は、画像形式の選択がお...続きを読む

流れる背景まずは、下記の例をご覧下さい。※文字しか見えない場合は、画像が読み込まれるまでしばらく待って下さい。（画像は55KBあります。）背景がアニメーションしております。右から左へと流れているのがお分かりになると思います。←←←背景画像がアニメーションしているのがお分かりになると思います。これは一...続きを読む

<!--/*スタイルシート*/A.CUsample{text-decoration:none;color:#550000;}A.CUsample:hover{color:#ffff55;font-weight:bold;text-decoration:none;font-size:12pt;}A.b...続きを読む

HTMLで画像をぴったりくっつける方法（縦横に隙間なく並べる方法）複数の画像を横方向や縦方向に隙間なく並べようとしても、画像と画像の間に余計な空白が挿入されてしまうことがあります。「なぜ、画像と画像がぴったりくっつかないのか？」と疑問に感じることもあるでしょう。画像やボックスなどを隙間なく密着するよ...続きを読む

スクリプト不使用で、お手軽ロールオーバーを作ろう！今回は、「ページ作成実践講座」第2弾「リンク画像の背景色を一瞬で変更」でご紹介したロールオーバーをちょっとだけ発展させた方法をご紹介いたします。前回同様、JavaScript不使用＆別画像不要で実現できるテクニックです。※「ロールオーバー」とは、画像...続きを読む

※この記事は、2001年6月に書かれたものです。同様のデザインをスタイルシートだけで作成する方法として、記事「画像を使わずにCSSだけで角を丸くする方法」が2009年7月に公開されています。そちらも併せてご参照下さい。HTMLやスタイルシートだけでは、なかなか凝ったデザインは作りにくいものです。今回...続きを読む