- ベストアンサー
キャプション付きの複数画像を複数ランダムに表示
- キャプションなしは検索して分かったのですが、キャプション付きの画像の表示方法がわからないです。
- 参考にしたプログラムでは、配列とループを使用して複数の画像とリンクをランダムに表示しています。
- スクリプトが利かない場合は、<NOSCRIPT>～</NOSCRIPT>で代替の表示を行うことができます。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＞複数表示させるにはどうすればいいのでしょうか。 単にスタイルシートだけの問題になりますから(^^)・・HTMLもjavascriptもほとんど手を加える必要がない。そもそも、そうすべき事はわかりますよね。 1) javascript部分の変更 外部スタイルシートにしたほうが良い var css = new Array( '<link rel="stylesheet" type="text/css" media="screen" href="CSS/1.css">', '<link rel="stylesheet" type="text/css" media="screen" href="CSS/2.css">', '<link rel="stylesheet" type="text/css" media="screen" href="CSS/3.css">', '<link rel="stylesheet" type="text/css" media="screen" href="CSS/4.css">', '<link rel="stylesheet" type="text/css" media="screen" href="CSS/5.css">', '<link rel="stylesheet" type="text/css" media="screen" href="CSS/6.css">' ); スタイルシート 6タイプ [1.css] @charset "Shift_JIS"; div.section div.nav ol li{display:list-item;} div.section div.nav ol li+li+li{display:none;} div.section{background-color:fuchsia;} div.section div.nav{border-color:red;} [2.css] @charset "Shift_JIS"; div.section div.nav ol li{display:list-item;} div.section div.nav ol li+li{display:none;} div.section div.nav ol li+li+li{display:list-item;} div.section div.nav ol li+li+li+li{display:none;} div.section{background-color:silver;} div.section div.nav{border-color:gray;} [3.css] @charset "Shift_JIS"; div.section div.nav ol li{display:list-item;} div.section div.nav ol li+li{display:none;} div.section div.nav ol li+li+li+li{display:list-item;} div.section{background-color:aqua;} div.section div.nav{border-color:blue;} [4.css] @charset "Shift_JIS"; div.section div.nav ol li{display:none;} div.section div.nav ol li+li{display:list-item;} div.section div.nav ol li+li+li+li+li{display:list-item;} div.section{background-color:yellow;} div.section div.nav{border-color:orange;} [5.css] @charset "Shift_JIS"; div.section div.nav ol li{display:none;} div.section div.nav ol li+li{display:list-item;} div.section div.nav ol li+li+li{display:none;} div.section div.nav ol li+li+li+li{display:list-item;} div.section{background-color:lime;} div.section div.nav{border-color:green;} [6.css] @charset "Shift_JIS"; div.section div.nav ol li{display:none;} div.section div.nav ol li+li+li{display:list-item;} div.section div.nav{border-color:silver;} 注意) まず、HTMLやスタイルシートをきちんと身につけましょう。 デザインや動作なんて、よっぽど酷くさえなければ、ユーザーはコンテンツの充実だけで訪問してくる。 『どうすれば自分のウェブサイトが独自性、価値、または魅力のあるサイトといえるようになるかを考えてみる。同分野の他のサイトとの差別化を図ります。( https://support.google.com/webmasters/answer/35769?hl=ja#3 )』 はデザインじゃない、内要素のものなのですよ。
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLと同じ場所にCSSというフォルダーを作り下記４つのスタイルシートをいれておく [1.css] @charset "Shift_JIS"; div.section div.nav ol li+li{display:none;} [2.css] @charset "Shift_JIS"; div.section div.nav ol li{display:none;} div.section div.nav ol li+li{display:list-item;} div.section div.nav ol li+li+li{display:none;} [3.css] @charset "Shift_JIS"; div.section div.nav ol li{display:none;} div.section div.nav ol li+li+li{display:list-item;} div.section div.nav ol li+li+li+li{display:none;} [4.css] @charset "Shift_JIS"; div.section div.nav ol li{display:none;} div.section div.nav ol li+li+li+li{display:list-item;} たったこれだけです。 肝心な事は、スクリプトやスタイルシートのためにHTMLは書かない!! スクリプトやスタイルシートの説明サイト/書籍は、目的がスクリプトやスタイルシートの説明のためですが、現実には、HTMLがあって、それを「スクリプトでどう動作させるか」「スタイルシートでどう表現するか」になります。 そうしないと、使い物になりません。 これを応用すると、リストだろうが、セクションだろうが、単純なメッセージだろうが背景画像だろうが・・ランダムに変更できる。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そんな回りくどい事しないでも。 ★ナビゲーション的な要素だと思いますが、そんなものjavascript経由で提供したらダメです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 技術に関するガイドライン Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン（品質に関するガイドライン） - ウェブマスター ツール ヘルプ( https://support.google.com/webmasters/answer/35769?hl=ja#2 )］より ★スタイルシートにしろ、javascriptにしろ、それらが利用できないユーザーエージェントのことも考慮すべき。 ★HTMLをきちんと作成することが大前提です。 「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_input )」 [サンプル] ★Another HTML-lint gateway( http://cetus.sakura.ne.jp/htmllint/htmllint.html ) のHTML4.01strictです。 ★添付はLynx(すなわち検索エンジン)が理解している様子 ★印刷時はすべて印刷されます。(印刷プレビューで確認する) ★HTMLは簡潔で、(検索エンジンを含めて)誰にでも内容が理解できるのでメンテナンスも楽 class名は、「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 ★スマホから幅広ディスプレイまで対応(ウィンドウ幅やCtrl + ＋/－でフォントサイズを変えてみる。) ※タブは＿に置換してあるので戻す。 <!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"> ＿<meta http-equiv="Content-Script-Type" content="text/javascript"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style media="screen" type="text/css"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} a img{border:none;} div.header,div.section,div.footer{width:80%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} div.section div.nav{ text-align:center; border:ridge red 4px; width:300px; margin:0 auto; } div.section div.nav ol,div.section div.nav ol li{ list-style:none; margin:0;padding:0; } body{background-color:gray;} div.header,div.section,div.footer{background-color:white;} --> ＿</style> <!-- ここからがランダム表示のためのスタイルシート読み込み --> <script type="text/javascript"> <!-- function getRand(){ return Math.round(Math.random()*(css.length-1)); } var css = new Array( '<link rel="stylesheet" type="text/css" media="screen" href="CSS/1.css">', '<link rel="stylesheet" type="text/css" media="screen" href="CSS/2.css">', '<link rel="stylesheet" type="text/css" media="screen" href="CSS/3.css">', '<link rel="stylesheet" type="text/css" media="screen" href="CSS/4.css">' ); rand = getRand(); document.write(css[rand]); --> </script> <!-- ここまでがランダム表示 --> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="nav"><!-- ナビゲーションだよ --> ＿＿＿<h2>おすすめ商品</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="01.html">掃除機</a> ＿＿＿＿＿<p><a href="01.html"><img src="img/bqc100.jpg" width="170" height="170" alt="掃除機"></a></p> ＿＿＿＿＿<p>今月のお勧めは、掃除機の新製品です。</p> ＿＿＿＿</li> ＿＿＿＿<li><a href="01.html">扇風機(黒)</a> ＿＿＿＿＿<p><a href="02.html"><img src="img/fun101.jpg" width="170" height="170" alt="扇風機1"></a></p> ＿＿＿＿＿<p>新色(黒)のシックな扇風機</p> ＿＿＿＿</li> ＿＿＿＿<li><a href="01.html">扇風機(青)</a> ＿＿＿＿＿<p><a href="03.html"><img src="img/fun102.jpg" width="170" height="170" alt="扇風機2"></a></p> ＿＿＿＿＿<p>涼しさのただよう新色、青色の扇風機</p> ＿＿＿＿</li> ＿＿＿＿<li><a href="01.html">扇風機</a> ＿＿＿＿＿<p><a href="04.html"><img src="img/fun103.jpg" width="170" height="170" alt="扇風機3"></a></p> ＿＿＿＿＿<p>定番のシルバー色の扇風機</p> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
お礼
ありがとうございます。 参考になりました。