- ベストアンサー
スタイルシートの・・・
スタイルシートをなんとか改変して、画像をランダム表示するように したいのですが自分では知識不足でできません＞＜ どう改変すればできるのか、どなたかお願いします。 /* トップ画像指定(アドレス、と画像の縦幅横幅も指定) */ #head { width:200px;/*横幅*/ height:150px;/*縦幅*/ margin:0px 1px; background:url(../img/画像データ.PNG) no-repeat center center;/* 画像アドレス */ border:1px solid #333333;/* 画像周りのライン */ }
- lei179
- お礼率100% (6/6)
- その他（ITシステム運用・管理）
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
通常、ランダムに××を・・・とかって、CSSよりJavaScriptを使うように思いますが。 JavaScriptで探すと良い案がみつかりませんか？
関連するQ&A
- 外部スタイルシートは同じなのですが…
こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記／／／ <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div> ←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス／設備</h2> ○○○徒歩３分<br /> 駐車場2台（バリアフリー）<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話 123-456-789 </div> </div> <div class="futter">Copyright © 2007 All Rights Reserved</div> </div> </body> CSSは下記／／／ * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか？ リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- Blockquoteの背景の画像のwidthを調節したい [スタイルシート]
こんにちは。ブログのテンプレートを作っています。 そこで、blockquoteの背景に画像を使用しているのですが、この画像のwidthをbcockquoteのwidthに応じて変更させることは可能でしょうか？ 現在のCSSの設定は以下のようになっています。 blockquote{ background: #EEE url(img/blockquote.png) no-repeat bottom left; /*border: 1px solid #E0E0E0;*/ padding: 10px 10px 30px 10px; margin: 1em 1em 1em 3em; width:400px; } 使用している画像(blockquote.png)のwidthが250pxで、photoshopで直接加工してしまってもいいのですが、何とかしてweb側で400pxに引き伸ばす事ができたらなぁ、と思っています。 <img>タグのように簡単にないものでしょうか？ご存知の方おられましたらどうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- フッターの画像の位置づけ指定方法がわからない
ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、 フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff; font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top; /*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{ display: block; line-height: 25px; text-decoration: none; text-align:right background-img:url(.gif); padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5 color: #8b1c62 } ul.sidemenu ul {margin: 0; padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff; line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; color:#ffffff; border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff; background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg); background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定 ここから、html打ち込み↓ <!-- フッター --> <div id="footer"align="center"> ～～テキスト文章～～<br> <address><big>～アドレスのテキスト～</address></big> <br>○○おなじくテキスト</div> <div align="center"> ～◆◆サイトの名前～ <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。
- 締切済み
- CSS
- スタイルシートの外枠について質問です。
スタイルシートの外枠について質問です。 外部ファイルに .container{background-color:white; position: absolute; left: 50%; width: 900px; height:1500px; ;border:8px; border-style:ridge;margin:30px 0px 100px -450px ;border-color:#00ff66} と記入、htmlに <link rel="stylesheet" href="（スタイルシートのURL）" type="text/css"> </head> <body> <!-- --> <div class="container"><!--全体の横幅など指定 --> </div> </body> </html> と書きました。 margin:30px 0px 100px -450pxで指定したように、ブラウザ上から30pxあけて外枠が表示され始めますが、外枠の下がブラウザにぴったりくっついてしまいます。 場合によっては外枠の下が見えなくなるようで、100pxあけての表示が上手くできません。 どこが間違っているのか、教えていただけると大変助かります。
- ベストアンサー
- ホームページ作成ソフト
- スタイルシート教えて下さい
ブログのトップページの一番上の部分を 自分の作った画像に変えました。 それはうまくいったのですが、 その部分にブログサイト名と説明文が入るのですが、 自分の画像を貼り付ける前までは一番左にあった文字が 今は真ん中に表示されてしまうんです。 ブログ名（リンクつき）とブログの説明文を左に表示させるには どうしたらいいのか教えて下さい。 その部分のスタイルシートです↓ #banner{ background-image:url(http://△△△△/○○○/□□□.jpg); background-repeat:no-repeat; background-position:left top; font-family:arial, Helvetica; padding:0px 0px 0px 197px; height:197px; text-align:left; margin-left:13px; }
- 締切済み
- ブログ
- スタイルシートで設定した背景にLINKを貼りたい
#header_area{ height:80px; padding: 0 0 10px 0; background: url(images/header.png) no-repeat 100% 20px; } ヘッダー部分の右端にheader.png（468*60pix）の画像を配置してあります。 HTMLでこの画像にURLリンクを貼りたいのですが、 いろいろ試してみましたがうまくいきません。 画像にリンクを貼るにはどうしたらよいでしょうか？
- ベストアンサー
- ブログ
- スタイルシート
#Area_Login table .tbl { margin-left: auto; margin-right: auto; border: solid 1px #FFFFFF; background-color: #000000; } #Area_Login table .tbl th { text-align: center; font-size: 12pt; background-color: #AFB4DB; height: 15px; } #Area_Login table .tbl td { text-align: center; font-size: 11pt; background-color: #AFB4DB; border: solid 1px #FFFFFF; } <div id="Area_Login"> <table class="tbl"> <tr> <th><th> <tr> <td></td> </tr> </table> </dib> 上記ソースなのですが、テーブルが中央に配置されなくて困っています。 どなたか教えていただけませんか？
- 締切済み
- CSS
- スタイルシートのpositionでフッターを位置指定するには
こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか？ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- スタイルシートの横並びリスト中央配置について
#Area_Navi { margin: 0; padding: 0; } #Area_Navi ul { margin-left: auto; margin-right: auto; text-align: center; list-style-type: none; list-style-position:inside; } #Area_Navi li { text-align: center; display: inline; padding: 0; margin-left: auto; margin-right: auto; float: left; width: 200px; } #Area_Navi a { display: block; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #FFFFFF; font-size: 20pt; padding: 3px; text-decoration: none; color: #000000; margin: 1px 0px; text-align: center; } スタイルシートは上記なのですが、うまく中央配置されず 半端に左寄せになっています。 windows7 firefox を使用しています。 調べて position:relative; と記載しても上手く中央寄せになりませんでした。 どなたか、教えて頂けませんか。 宜しくお願い致します。
- ベストアンサー
- CSS
- 背景画像
背景画像のCSSを教えてください wordpressのfooterのように、footer内のみに縦100px横幅1pxの画像で敷き詰めたいです 実際に横960pxに敷き詰められるようにしたいです #footer_in { position:relative; margin:0 auto; padding:0; width:960px; height:100px; background:url(../images/footer_bg.png) no-repeat center 13px; font-size:12px; } <div id="footer_in"> </div>
- ベストアンサー
- CSS
お礼
javaScriptを使えば今の見え方が少し変わってしまうので うーん・・・って感じなのですが 確かにそっちの方がいいかもしれないですね！ なんとか検討してみます＞＜