- ベストアンサー
div inboxにて囲まれた場所を自動スクロールする方法
- div inboxにて囲まれた場所を自動スクロールする方法についてご質問です。
- 要件を満たすために、CSSとJavaScriptを使用して自動スクロールを実装することができます。
- また、div inbox内の情報は検索ロボットに拾われる可能性があるため、注意が必要です。
- morinokoe
- お礼率13% (23/165)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- ブログでのスクロール枠の設置の仕方
<div style="margin:0px;padding:0px;" align="left"><div style="margin:0px;padding:0px;line-height:1.3;width:200px;background-color:#FFFFFF;"><div style="margin:0px;padding:10px;line-height:1.3;overflow:auto;border: 2px solid #66CCCC;font-family:'ＭＳ Ｐゴシック',Osaka,sans-serif;text-align:left;font-size:100%;height:5em;scrollbar-arrow-color:#66CCCC;scrollbar-3dlight-color:#66CCCC;scrollbar-darkshadow-color:#66CCCC;scrollbar-face-color:#FFFFFF;scrollbar-track-color:#FFFFFF;scrollbar-track-color:#FFFFFF;scrollbar-shadow-color:#FFFFFF;">文章挿入</div></div></div> スクロール枠です。 これをブログにはめ込んでるんですが、この枠をもう一つ横並びに貼り付けたいのですが、段落ちしてしまいます。 改行はしてないので、それでの段落ちではないです。 お分かりになる方、よろしくお願いします。 ライブドアブログです。
- 締切済み
- HTML
- float横並びにしたブロックの中のul/liを縦並びにさせたい
float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 （html） <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。
- ベストアンサー
- CSS
- ＣＳＳレイアウト positionについて
下記のタグにてpositionタグを使って指定した場合 ＩＥの文字サイズを変更しるとcopyrightと言うboxが ずれてしまいます。ずれない方法はありませんでしょうか？ お分かりの方のご回答をお待ちしております。 なお簡単なタグを記載してくれると幸いです。 body { margin-left:3em; margin-left:3em; } .mainspace { width:480px; position:absolute; left:260px; padding-top:10px; padding-bottom:10px; } .leftmenu { width:200px; height:280px; position:absolute; left:50px; padding:5px; } .rightmenu { width:200px; height:280px; position:absolute; left:750px; padding:5px; } .copyright { text-align:center; position:absolute; left:50px; top:480px; width:900px padding-bottom:10px; padding-top:10px; } ＨＴＭＬ <h1>タイトル</h1> <div class="mainspace"> <h2>タイトル</h2> <br> <h2>タイトル</h2> <br> </div> <div class="leftmenu"> <h3>メニュー</h3> <ul> <li><a href="">テスト</a></li> <li><a href="">テスト</a></li> </ul> <h3>メニュー</h3> <ul> <li><a href=""></a>テスト</li> <li><a href=""></a>テスト</li> </ul> <h3>メニュー</h3> <ul> <li>テスト</li> <li>テスト</li> </ul> </div> <div class="rightmenu"> <h3>サブタイトル</h3> <br> </div> <div class="copyright"> test </div>
- ベストアンサー
- HTML
- スクロールバーが表示されない。。
枠つきのスクロールバーをもらい ブログにつけようとしましたが、 なぜか枠だけでスクロールバーだけが表示されません。。 原因はなんでしょうか？ 改善の方法はありますか？ 下のタグです <div style="width:337;height:200;overflow:auto; scrollbar-3dlight-color:#ff00ff; scrollbar-arrow-color:#ff00ff; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ff00ff; scrollbar-track-color:#ffffff; "> <Table border="1" width="320" height="300" cellspacing="0" bordercolor="#004a95"> <Tr><Td height="30" bgcolor="#004a95" align="left"> <font size="3" color="#ffffff" face="ＭＳ ゴシック"> タイトル部分</font> </Td></Tr> <Tr><Td bgcolor="#ffffff" align="center" valign="top"> 内容部分 </Td></Tr> </Table></div>
- ベストアンサー
- CSS
- CSSの左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->
- ベストアンサー
- CSS
- スマホ画面で長い文章が、左端に短い幅で片寄る。
スマホ画面で長い文章の部分だけ折り返され、左端に短い幅で片寄ってしまいます。 これはどのように修正すれば良いのでしょうか。PCではいろんなブラウザで問題なく表示されています。 #header { width:100%; background:#cccc99; } #container { width:950px; margin-left:auto; margin-right:auto; text-align:left; } #col1 { width:740px; float:left; margin-left:20px; background:#383838; } #col2 { width:190px; float:left; } #footer { clear:left; width:100%; border-top:1px solid #8f8472; } 左側にメニュー（190px）を配置したレイアウトです。 h1,h2,P,liタグなど、とにかく長い文章の部分だけ、画面幅ではなく、短い幅で折り返され 左側に片寄っています。下記のxxxxxxxxの部分もそのようになります。 ul.abc { list-style:none; width:100%; margin: 0; padding: 0; } ul.abc li { float:left; margin-right:1em; padding: 0; } ul.abc a { float:left; line-height:85px; } ul.abc img { float:left; margin-right:.5em; vertical-align:middle; } <ul class="abc"> <li><a href="..." target="_blank"><img src="..." width="115" height="85" alt=""/><img src="..." height="1px" width="1px" border="0"> xxxxxxxxxxxxxxxxxxxxx</a></li> </ul><div style="clear: left;"></div> よろしくお願い致します。
- 締切済み
- CSS
- テキストの揃え方について
CSSの勉強を始めて間もないのですが、下記のようにホームページを作成し、左右に均等の間隔を指定して、テキストも中央揃えになっています。<div id="01">を5段、<div id="02">で1段、この後<div id="03">と<div id="04">で合わせて2段にしたいと考えています。そのうえで、<div id="03">以降は左右に均等の間隔になっている幅の中(<div id="01">や<div id="02">が配置されている400pxの位置)で、テキストを左揃えにして配置したいと考えています。text-align: left;をCSSのいろいろなところに書いているのですが、ウィンドウの左端に配置されてしまいます。どのようにCSSに書いたら実現できるのでしょうか。CSSレベル2までの書き方でお教えください。 【HTMLの<body>内】 <div id="01_05"> <div id="01"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> </div> <div id="02"> <img src="gazou01.jpg" alt="画像01" width="400" height="300" border="0"> </div> <div id="03"> </div> <div id="04"> </div> </div> 【CSS】 body { margin: 0; padding: 0; width: 100%; text-align: center; overflow: hidden; } #01_05 { margin: 0 auto; padding: 0; width: 400px; } #01 { position: relative; margin: 0; width: 100%; } ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; } li { position: relative; left: -50%; float: left; display: inline; margin: 0; padding: 0; } li a { float: left; width: 80px; display: block; margin: 15px 0; padding: 15px 0; } #02 { clear: left; width: 100%; } #03 { float: left; margin: 0; width: 200px; } #04 { float: left; margin: 0; width: 200px; }
- ベストアンサー
- CSS
- CSSのみで作る横ドロップダウンメニュー
教えてください。白旗です。 クライアントの指示でCSS＋xhtmlのみでサイトを作成していますが、横並びのプルダウンメニューで行き詰りました。 IE6以外のブラウザでは正常な表示をされるのですが、IE６のみへんてこりんになってしまいます。 下記ソースで、メニューAにマウスを乗せてドロップダウンをさせると、メニューBが右に動きます。 これに2日間はまってます。 よろしくお願いします。 ---ソース--- 【html】 <div id="gnavi_container"> <div id="gnavi"> <ul> <li class="gmenu02_off" onmouseover="this.className='gmenu02_on'" onmouseout="this.className='gmenu02_off'"><a href="#"><img src="img/1.jpg" width="122" height="25" alt="" onmouseover='this.src="img/3.jpg"' onmouseout='this.src="img/1.jpg"' /></a> <ul class="gmenu_sub"> <li><a href="#"><img src="img/4.jpg" width="138" height="19" alt="" /></a></li> </ul> </li> <li class="gmenu03_off" onmouseover="this.className='gmenu03_on'" onmouseout="this.className='gmenu03_off'"><a href="#"><img src="img/2.jpg" width="81" height="25" alt="" onmouseover='this.src="img/2.jpg"' onmouseout='this.src="img/2.jpg"' /></a> </li> </ul> </div> </div> 【css】 img{ border:0; } div#gnavi_container{ position : relative; z-index:100; width:800px; height:25px; text-align:left; } div#gnavi ul { margin: 0; padding: 0; list-style: none; } div#gnavi li { float : left; margin : 0; padding : 0; } .gmenu_sub li{ overflow:visible: } .gmenu02_off{ height:25px; width:122px; overflow : hidden; } .gmenu02_on{ width:122px; overflow :visible; } .gmenu03_off{ height:25px; width:81px; overflow : hidden; } .gmenu03_on{ width:81px; overflow :visible; } div#gnavi ul.gmenu_sub{ margin : 0; padding : 0; } div#gnavi ul.gmenu_sub li{ margin : 0; padding : 0; float : none; clear : both; }
- 締切済み
- HTML
- 【至急】ボックスの高さ指定
base（３つのボックスを包囲する）のボックスに背景画像をつけています。baseの中にboxを３つ横に並べてます。 ■box左は画像（背景黒でパディングで画像に黒枠をつけているようにみせている※アウトラインでやったらIEだと表示されなかったので） ■box真ん中は仕切り線（背景はなし） ■box右はテキスト（背景グレー）にしてます。 質問内容： box右【テキストの高さ】に合わせて、baseの【背景画像】とbox真ん中の【仕切り線】を延長させるにはどうすればいいのでしょうか？ （html） <div class="base"> <div class="box1_img"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2_line"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3_text"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; } .base { width: 618px; height: 100%;（←分からない？？） margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1_img { width: 130px; height: 97px; margin: 0; padding: 2px; float: left; background: black; } .base .box2_line { width: 2px; height: 100%;（←分からない？？） margin: 0 10px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3_text { width: 450px; margin: 0; padding: 5px; float: left; text-align: left; background: #eee; } ul .list-y{ font-weight: bold; text-align: left; } とっても切羽詰まってます！！ すぐに回答いただけると、とっても助かります。 よろしくお願いいたします。
- ベストアンサー
- CSS
- floatしたdivの高さを画面いっぱいにした際の質問です。
下記のTIPSを利用してfloatさせたdivを画面いっぱいの高さに表示したいのですが、 FireFoxだとうまく表示されますが、IEだとものすごく縦長のページとして認識されてしまいます。 (div#catsideが長く表示されてしまうようです） IEでもうまく表示させるにはどうすればいいでしょうか。 もしこのTIPSではなく別のTIPSで同じ表示が可能でしたらそちらを教えていただければ幸いです。 よろしくお願いいたします。 ※デザイン上添付の画像のようにレイヤー化する必要があるため、z-indexは必須です。ここが邪魔しているのかなとも思うのですが・・・ ＜HTML＞ <div id="catwrapper" class="cl"> <div id="catsidemenu" class="cl"> <div id="catSidePhotoBg"> <div id="catSidePhoto"> <span>サイドバー写真</span> </div> </div> <ul> <li><a href="menu01">menu01</a></li> <li><a href="menu02">menu02</a></li> <li><a href="menu03">menu03</a></li> <li><a href="menu04">menu04</a></li> <li><a href="menu05">menu05</a></li> </ul> </div> <div id="catbody"> 略 </div> </div> ＜CSS＞ div#catwrapper{ background:#e6e6e4; overflow: hidden !important; overflow: visible; min-height: 100%; height: auto !important; height: 100%; width:1004px; z-index:-100; } div#catwrapper div#catSidePhotoBg , div#catwrapper div#catsidemenu{ float:left; padding-bottom: 32767px !important; margin-bottom: -32767px !important; padding-bottom: 0; margin-bottom: 0; overflow:hidden; height: 100%; } div#catsidemenu{ height: 100%; width: 400px; } div#catsidemenu div#catSidePhoto{ display:block; width:217px; height:800px; overflow:hidden; } div#catsidemenu ul , div#catsidemenu ul li{ 略 } div#catSidePhotoBg{ background:url(images/sidebarbg.png) repeat-y; width:257px; display:block; position:relative; z-index:150; overflow:hidden; } div#catbody{ width:auto; padding:90px 0 0; margin:0 0 0 420px; height:100%; text-align:left; } .cl { display: inline-block; } .cl:after { content: ""; display: block; clear: both; }
- 締切済み
- HTML
補足
早速試してみました。 回答ありがとうございます。 しかし、infobox内のスクロールが少ししか動きません。 動作として、サイトのページ全体が少しスクロールし、その後、infobox内の部分が少しスクロールされます。 また、スクロール速度は調整できるのでしょうか？ お手数ですが教えて頂けないでしょうか？ よろしくお願い致します。