閲覧有難うございます。
XHTML 1.0 Transitionalを使っています。
下の画像の様に写真を配置して「a:hover」した時に画像が隣で拡大表示される様にしてみたいです。
たんに拡大表示されるよりもサンプル画像を見せる場合はこちらの方が良いかと思ったのですがやり方が解らず困っています><
下記のページを参考にしようと思ったのですが文字化けして解りません。
http://www.naima.jp/?pid=61730701
No.2ベストアンサー
- 回答日時:
HTMLはHyper Text Markup Languageの略で、文書をそれを構成する要素に分解して、それぞれがどのような要素であるかをマークアップする言語です。
<h1>ここは見出し(heading)</h1><p>ここは段落(paragraph)</p>とね。いっぽう、スタイルシートは、それをどのようにプレゼンテーションするかを指定するものです。スタイルシートのひとつがCSS(カスケーディングスタイルシート)。
文書構造と、それをどのように表現するかは別個の物です。<h1>見出し</h1>と書いたら大きな文字で表示されるのは、ブラウザ自身が初めから持っているスタイルシートに由来するだけです。
それが、HTMLでいうところの「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」です。
transitinalでなくstrictを薦めるのは、HTMLを書くのがとっても楽で、かつデザインが自由に出来るからです。
実際の物を見ないと理解しがたいと思いますので、サンプルを上げておきます。HTMLさえ、きちんと文書構造に基づいてマークアップされていたら、スタイルシートでどのようにもなる実例です。
★./imagesホルダーに480×360pxの01.jpg,02.jpg,03.jpg,04.jpgを用意する。
./images/thumbnailフォルダーに80×60pxの01.jpg,02.jpg,03.jpg,04.jpgサムネイルを用意する。
★HTML4.01strict + CSS2.1です。
★タブは_に置換してあるので戻す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
div.section ul,div.section dl{list-style-type:none;}
div.section ul,div.section ul li,
div.section dl,div.section dl dt,
div.section dl dd,div.section h3,
div.section p{
margin:0;padding:0;
}
div.section ul,div.section dl,
div.section div.section{
width:600px;height:380px;
border:solid 1px gray;
margin:10px auto;
position:relative;
background:url(./images/01.jpg) 10px 10px no-repeat;
}
div.section ul li,
div.section dl dt,
div.section h3{
width:100px;margin:10px 5px 10px 500px;;
}
div.section ul li p,
div.section dl dt+dd,
div.section div.section h3+p{
display:none;position:absolute;
top:10px;left:10px;
}
div.section ul li:hover p,
div.section dl dt:hover+dd,
div.section div.section h3:hover+p{
display:block;
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>順不同リストとしてマークアップされている</h2>
__<ul>
___<li><img src="./images/thumbnail/02.jpg" width="80" height="60" alt="">
____<p><img src="./images/02.jpg" width="480" height="360" alt=""></p>
___</li>
___<li><img src="./images/thumbnail/03.jpg" width="80" height="60" alt="">
____<p><img src="./images/03.jpg" width="480" height="360" alt=""></p>
___</li>
___<li><img src="./images/thumbnail/04.jpg" width="80" height="60" alt="">
____<p><img src="./images/04.jpg" width="480" height="360" alt=""></p>
___</li>
__</ul>
__<h2>定義リストとしてマークアップされている</h2>
__<dl>
___<dt><img src="./images/thumbnail/02.jpg" width="80" height="60" alt=""></dt>
___<dd><img src="./images/02.jpg" width="480" height="360" alt=""></dd>
___<dt><img src="./images/thumbnail/03.jpg" width="80" height="60" alt=""></dt>
___<dd><img src="./images/03.jpg" width="480" height="360" alt=""></dd>
___<dt><img src="./images/thumbnail/04.jpg" width="80" height="60" alt=""></dt>
___<dd><img src="./images/04.jpg" width="480" height="360" alt=""></dd>
__</dl>
__<h2>単にdivで囲んであるだけ</h2>
__<div class="section">
___<h3><img src="./images/thumbnail/02.jpg" width="80" height="60" alt=""></h3>
___<p><img src="./images/02.jpg" width="480" height="360" alt=""></p>
___<h3><img src="./images/thumbnail/03.jpg" width="80" height="60" alt=""></h3>
___<p><img src="./images/03.jpg" width="480" height="360" alt=""></p>
___<h3><img src="./images/thumbnail/04.jpg" width="80" height="60" alt=""></h3>
___<p><img src="./images/04.jpg" width="480" height="360" alt=""></p>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
__</dl>
__<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
No.1
- 回答日時:
スタイルシートを使うほうが楽ですね。
例えば、HTMLがきちんと・・
<ul>
<li><img src="" width="" height="" alt="">
<p><img src="" width="" height="" alt=""></p>
</li>
<li><img src="" width="" height="" alt="">
<p><img src="" width="" height="" alt=""></p>
</li> <li><img src="" width="" height="" alt="">
<p><img src="" width="" height="" alt=""></p>
</li>
</ul>
とか、
<dl>
<dt><img src="" width="" height="" alt=""></dt>
<dd><img src="" width="" height="" alt=""></dd>
<dt><img src="" width="" height="" alt=""></dt>
<dd><img src="" width="" height="" alt=""></dd>
<dt><img src="" width="" height="" alt=""></dt>
<dd><img src="" width="" height="" alt=""></dd>
</dl>
とか
<div class="albam">
<h3><img src="" width="" height="" alt=""></h3>
<p><img src="" width="" height="" alt=""></p>
<h3><img src="" width="" height="" alt=""></h3>
<p><img src="" width="" height="" alt=""></p>
</div>
とかマークアップされていても良いですしね。
>XHTML 1.0 Transitionalを使っています。
いくらなんでもtransitinalは卒業しましょう。ブラウザ間の表示差に悩まされますし、XHTML1.1以降はtransitinalは無いです。HTML5にも無い。
1999年:「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
スタイルシートを用いることで、「文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
この回答への補足
ORUKA1951さん回答有難うございます。
少し解らない事があります。無知な質問が多くてスミマセンm(__)m
スタイルシートとはCSSの事でしょうか?
>例えば、HTMLがきちんと・・していればって事ですよね?
上記の書き方だと<ul><li>とかのタグをCSSに記述するように思えるのですが?
マークアップとは<div>で括る事を言っておられるのでしょうか?
その他ご指摘ありがとうございます。まだまだ初心者なので徐々に勉強していきたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- X(旧Twitter) ツィッターの画像表示について 1 2023/08/17 09:28
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- その他(ソフトウェア) IrfanView で画像のスクロール?できますか 1 2022/08/31 13:57
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- Windows 7 Windows画面表示について 3 2023/04/23 11:50
- その他(IT・Webサービス) Yahooの地図の文字サイズ、googleの地図の画面分割 1 2022/05/21 12:31
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- モニター・ディスプレイ PCのマルチディスプレイで複製はできますが拡張ができません 1 2023/08/09 01:29
- モニター・ディスプレイ NVIDIA Geforce GT 710の解像度設定について教えて下さい 3 2022/06/19 13:00
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
順番にクラスをつけていく方法
-
javascript src書き換え
-
スライドショーの画像にリンク...
-
楽天APIのデータをjqueryのgetJ...
-
javascriptテキストBOX色を元に...
-
jspでcssが読み込めない
-
読み込んだQRコードをフォーム...
-
MAX関数を使ってからLEFT JOIN...
-
eclipseでcssを使うためには?
-
JSPでの画像ファイル表示
-
MFCで画像を表示させているので...
-
javascriptで毎月替わる画像
-
JavaScript 可変スクロールバ...
-
JavaScriptで変更した属性の元...
-
文字を固定したいのですが…
-
jqueryのsortableで一部ソート...
-
this.src等のthisについて
-
IFRAMEの表示/非表示を切り替え...
-
jqueryで、○○ is undefind
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
キャラクターがぴょこんと飛び...
-
【jQuery】2分割レイアウトで、...
-
スライドショー「Skitter」をカ...
-
スライドショーの画像にリンク...
-
画像をフェードアウト&フェー...
-
Dreamweaver上とデバイスプレビ...
-
アコーディオンメニューが開い...
-
神経衰弱 順番に裏返し
-
楽天APIのデータをjqueryのgetJ...
-
swiper.jsについて
-
エンドロールを枠の中で表示す...
-
順番にクラスをつけていく方法
-
画像にマウスを乗せた時のJava ...
-
bxsliderでスライドショーの間...
-
複数の要素へ appendchild でき...
-
jQueryでタブ、スライダーを使...
-
SimplyScrollについて
-
bxSliderのランダム表示について
-
javascript 神経衰弱
おすすめ情報