検索結果
DD200
- 全てのカテゴリ
- 全ての質問
- リストマークにホバー効果
ttp://liquidfolio.queldorei.com/features/post-formats/ こちらのページにあるリストマークの部分が、ホバーによって拡大縮小されているのですが、仕組みが全く判りません。 どなたか判る方居ましたら、よろしくお願いします。
- 締切済み
- CSS
- Minami_0777
- 回答数2
- HTMLについて
現在HTMLを勉強しています そこで画像の配置についてわからないところがあるので教えてください 添付した画像のようにしたいのですが緑の画像がかなりしたになってしまいます どうすればいいでしょうか？ コードとCSSは HTML <body> ～～～省略～～～ <div class="menu_block"> <table class="menu_left"> <tr> <td class="photo"><img src="img/siri-zu.gif" style="margin-top:80px;"></td> </tr> <tr> <td class="photo"><img src="img/sekkenn.gif" style="margin-top:20px;"></td> </tr> <tr> <td class="photo"><img src="img/oiru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/jeru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/set.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/mini.gif"style="margin-top:10px;"></td> </tr> </table> <img src="img/3.gif" height="300" alt="3STEP" class="menu_right"> <img src="img/rank.jpg" style="margin-top: 80px ;" class="ranking"> <img src="img/test.jpg" width="600" height="200" style="margin-left: 200px;" class="rebyu"> </div> </div> </body> CSS @charset "UTF-8"; h1 { margin: 30px 0 30px 0; padding: 0 0 0 0; line-height: 0; text-align: center; } #wrapper { width: 1050px; margin: 0 auto 0 auto; } .menu_block { overflow: hidden; zoom: 1; } .menu_left { float: left; margin-right: 20px; } .menu_right { float: left; margin-top: 80px; margin-left: 20px; } .ranking { float: left; margin-left: 20px; } .rebyu { float: left; margin-top: 10px; } です 赤の真下に緑が来るというのが理想です
- ベストアンサー
- HTML
- DreamyLife_615
- 回答数3
- css:floatの挙動について
いつもお世話になっております。 よろしくお願いいたします。 floatの挙動がいまひとつ理解できません。 配置した画像をfloat:leftで左寄せして、画像の説明文を右側に配置したいと考えてます。説明文の要素にmarginで画像との間に空白を設けたいのですが、適用されません。 説明文要素に枠線をつけてみると、次のように配置されてしまっています。 ┌──────┐ │画像 説明文 │ └──────┘ 私としては、こうしたいのですが ┌───┐ 画像│説明文│ └───┘ 何故でしょう？ 画像側でmarginを設定すると空白が設けられるのですが、 説明文の文字数が多く、業の高さが画像の高さをオーバーすると 画像の方に溢れてしまいます・・・ ご存知の方、どうぞご教示くださいますようお願いいたします。
- ベストアンサー
- CSS
- ninnikutips
- 回答数2
- floatの挙動について
いつもお世話になっております。 次のコードで#sidebody内に#a～cboxを左側に縦に並べ、#dboxを右側に配置したいのですが、 #dboxのfloatが#sidebodyに対して効きません。 原因を教えていただけませんでしょうか。 シンプルな構造なのに、何が問題なのか分かりません。 何卒よろしくお願いいたします。 <html> <head> <link href="test.css" rel="stylesheet" type="text/css" media="screen"> <body> <div id="content"> <div id="sidebody"> <div id="abox">a</div> <div id="bbox">b</div> <div id="cbox">c</div> </div> <div id="dbox">d</div> </div> </body> </head> </html> #content { width: 200px; height: auto; border: red solid; } #abox { width: 100px; height: 20px; background-color: blue; text-align: center; color: white; } #bbox { width: 100px; height: 100px; background-color: pink; text-align: center; color: white; } #cbox { clear: both; width: 100px; height: 100px; background-color: darkblue; text-align: center; color: white; } #dbox { width: 100px; height: 250px; float: left; background-color: green; text-align: center; color: white; }
- ベストアンサー
- CSS
- ninnikutips
- 回答数5
- CSS、ヘッダーの上にあいだが開く
初めてWEBページを作ろうとしているものなのですが、 なぜかヘッダーの上にあいだが開いてしまいます。（送付の図のように） このあいだを無くして濃いオレンジからピッタリ、ヘッダーから始めたいんですけれども、どうしたらいいのでしょうか？ 「HTML」 <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>公式サイト</title> </head> <body id="body"> <div id="header"> <h1 class="title">title</h1> </div> <div id="page"> <div id="main"> <div class="center"> <img src="top-picture2.jpg" width="675" height="420"> </div> <h4>グループについて・・・</h4> <p>testtesttesttesttesttesttesttesttesttest</p> <div class="history"> <h4>更新履歴</h4> </div> <div class="youtube"> <h4>ユーチューブ</h4> </div> </div> <div id="sidebar"> <img src="top.jpg"> <img src="top2.jpg"> </div> </div> <div id="footer"> <h2>フッター</h2> <p class="center">©2014 dutchiris.lolipop.jp All rights reserved.</p> </div> </body> </html> 「CSS」 @charset "UTF-8"; /* 背景色用 */ #body{ background-color: #FFD5AA; } #header{ height: 75px; background-color: orange; clear: both; /*background: url(path_back1.gif) repeat-x bottom; */ } .title{ color: #FFFFFF; padding-top: 30px; font-size:45px; font-family:"ＭＳ Ｐゴシック","ＭＳ Ｐゴシック",sans-serif; width: 1000px; margin: 0 auto; } #main{ float: left; background-color: #ffffff; width: 750px } #sidebar{ float: right; background-color: #ffffff; width: 250px; } #page{ margin-top:75px ; width: 1000px; margin: 0 auto; } .history{ float: left; width: 375px; } .youtube{ float: right; width: 375px; } #footer{ width: 1000px; clear:both; width:100%; } /* 中央寄せ */ .center{ text-align: center; }
- 複数のdivを横並びさせる時一つだけ中央
複数のdivを横並びさせる時一つだけセンタリングする方法はありますか？ widthを狭めてもカラム落ちや片方に寄らせずに l--口----------l３カラム l--------------l l---------------l左右可変l--------------l l-----------------------------------------l l-----------------------------------------l margin: 0 auto;で指定しても左の画像に寄ったり離れたりしてしまいます。 body{ width:1500px;} #3カラム{margin-left: 0 auto; margin-right: 0 auto; width:500px; ～～ } #左画像{width:100px; margin-left:10px; z-index:2; }
- 自作ＨＰのレイアウトがセンターにきません！＞＜。。
サイトのレイアウト構成は、『ヘッダー・２段組み・フッダー』をそれぞれ分かりやすく色づけしたのですが、なぜか２段組みのとろだけ、センターにきません。 また、３つの構成に上下に隙間が出来てしまいます。 誰かどこがオカシイのか教えてください。 下記にXHTML、CSSを入力しました、メモ帳等にコピペして見て頂けないでしょうか？ ご回答お待ちしております。 【XHTML】 <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title> Ｌｉｓｔ </title> <link rel="stylesheet" href="style.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div class="box_header"> </div> <hr /> <div class="box_a"> </div> <div class="box_b"> </div> <hr /> <div class="box_footer"> </div> </body> </html> 【CSS】 @charset "shift_jis"; body { background-color: #ffffff; margin-left: auto; margin-right: auto; font-family: Osaka, "ヒラノギ角ゴ Pro W3","小塚ゴシック Std B","ＭＳ Ｐゴシック",; } hr { height: 1px; width: 100%; background-color: #000000; } div.box_header { background-color: #ff0000; width: 1200px; height: 200px; margin-left: auto; margin-right: auto; } div.box_a { background-color: #808080; float: left; width: 800px; height: 2000px; margin-left: auto; margin-right: auto; } div.box_b { background-color: #0000ff; float: left; width: 400px; height: 2000px; margin-left: auto; margin-right: auto; } div.box_footer { background-color: #008000; clear: left; width: 1200px; height: 200px; margin-left: auto; margin-right: auto; }
- ベストアンサー
- レンタルサーバ・ASP
- hiromitsu418
- 回答数2
- IEのレイアウト崩れについて 助けてください
いつもお世話になっております。 実はブログを作成していて一部、IEのみ配置が違っている部分（検索フォーム部分のみ）がございました。 どのようにCSSを変更しても他ブラウザのように表示されず困っております。 そこでIEハックをして修正しようと思いました。 IE11でのハック方法が分からず、どなたかご教示頂けませんでしょうか。 また、CSSなど修正可能な方がいらっしゃいましたら助言頂けると嬉しいです。 【HTML】 <!-- コンテンツ部分 --> <div id="contents"> <a href="#" title="トップページ"><div class="btn">Home</div></a> <a href="#" title="当サイトについて"><div class="btn">about</div></a> <a href="#" title="写真・画像置き場"><div class="btn">Photo</div></a> <a href="#" title="ツイッター - Twitter -"><div class="btn">Twitter</div></a> <a href="#" title="お問い合わせ"><div class="btn">Mail</div></a> <!-- 検索フォーム --> <div class="search" align="right"> <form action="./" method="get" >サイト内検索 <input class="search_input" type="text" name="q" maxlength="200" value="<%search_word>"> <input class="search_btn" type="image" src="pngファイル(15px*14px)"> </form> </div> </div> 【CSS】 /***** ボタン部分 *****/ #contents{ width: 1200px; height: 35px; margin-bottom: 25px; } .btn{ float: left; width: 100px; height: 33px; padding-left: 20px; padding-right: 20px; border: 1px solid #15aeec; background-color: #49c0f0; background-image: -webkit-linear-gradient(top, #49c0f0, #2cafe3); background-image: linear-gradient(to bottom, #49c0f0, #2cafe3); color: #fff; -webkit-transition: none; transition: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); line-height: 33px; } /* マウスオーバー */ .btn:hover{ border:1px solid #1090c3; background-color: #1ab0ec; background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2); background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2); } /* クリック */ .btn:active { background: #1a92c2; box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2); color: #1679a1; text-shadow: 0 1px 1px rgba(255, 255, 255, .5); } /***** 検索部分 *****/ .search{ /*float: left;*/ height: 33px; margin-left: auto; border: 1px solid #15aeec; background-color: #49c0f0; color: #fff; -webkit-transition: none; transition: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); line-height: 33px; } .search_input{ width: 220px; padding: 5px 35px 5px 6px; border:1px solid #333; } /* 可能であれば:root .search_btnを共通で使用したいです */ :root .search_btn{ position: relative; top: 3px; left:-30px; } /* まだIE10の配置修正はしていません */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .search_btn{ position: relative; top: 0px; left:-30px; } } 動きを確認したところ .search_inputのheightをデフォルトより広くとるとIEのレイアウトのみ崩れるようになりました。 何卒、ご返事よろしくお願い致します。
- 両端を開けたデザイン
最近ＨＰつくりを始めたのですが 他のいろんなサイトを見ていると、 ブラウザの横幅をマックスに使わないサイトが多いです。 私なんかは、テーブルの横幅も100％にしているし、 文字も左から詰めて書いています。 特にみにくいとは思ってないのですが、 どうやって少し両端を開けて中央に表示させるのでしょうか？ 例えば こちらのサイトも左右に開いています http://www.shoshinsha.com/hp/1hour/ http://www.justsystems.com/jp/products/hpb/ このサイトもそうです。 こういう風に作った方が見やすいのならば、 頭からお尻までテーブルで囲ってセンターに配置し、横幅を設定すればいいのでしょうか？
- マウスがホバーした時に開くメニュー
webの初心者です。 class="title"にマウスがホバーした時に .menu : hoverに設定したアニメーションを動作させて マウスがホバーすると開くメニューを作りたいのですが この状態だとclass="menu"にホバーした時は開くのですが class="title"の上にマウスが乗るとメニューが閉じてしまいます。 どうにかしてclass="title"にホバーした時もメニューが開くようにしたいです。 伝わりにくかったらすいません。 どなたか分かる方おられましたら回答お願いします。 <body> <div class="wrap"> <div class="title"></div> <div class="menu"> <h1 id="m1"></h1> <h1 id="m2"></h1> <h1 id="m3"></h1> <h1 id="m4"></h1> <h1 id="m5"></h1> <h1 id="m6"></h1> </div> </div> </body> .menu { height: 620px; width: 150px; background-repeat: no-repeat; margin-left: 0px; background-image: url(../img/menu.gif); background-position: right; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; -ms-transition: all 1s ease-in-out 0s; -o-transition: all 1s ease-in-out 0s; transition: all 1s ease-in-out 0s; } .title { background-image: url(../img/title.gif); background-repeat: no-repeat; height: 620px; width: 130px; float: left; } .menu:hover { margin-left: 40px; }
- 需要の価格弾力性について
ある財の市場需要曲線がD=-2P+1200だとする。ただしDは需要量、Pは市場価格である。 (1)市場価格が300から400へ上昇した時の需要の価格弾力性はいくらか？ (1)の問題の解き方を教えてください。 宜しくお願いします。
- 【CSS】HTML直書き→外部ファイルにしたい
HTMLにCSSを適応する方法としていくつかあると思いますが、 こんな風に↓ <div style="height:90px; width:300px; text-align:center; float:left;"> HTMLソース内に『直書き』してあるものを外部CSSに書き直すには どうしたらいいですか？ 当方、他の外部CSSをちょこっといじって変更したり HTMLの簡単な更新経験程度の知識しかありません。 タグ名｛プロパティ：値｝みたいなルールは分かるのですが、 すべてを最初から書くのが初めてで、何から手を付けていいのか 分かりません。 こうしてみたら？とか、私ならこうする、という アドバイスを頂けると助かります。 お詳しい方、回答よろしくお願いします！
- 締切済み
- HTML
- question_xxx
- 回答数6
- DDモータの回転
DDモータを回転させることで動特性パラメータの推定をしています。 トルク値を与え、そのとき角速度をみてみました。ここで-5.0Nmと5.0Nmのときに着目して見たときに、それぞれの角速度の大きさの差が約2.0rad/sもありました。あまり差はないと推測されるので、この差はあまりに大きいと思いますが、この原因が何なのかわかりません。 何か考えられることがあれば教えてほしいです。よろしくおねがいします。
- 締切済み
- 物理学
- ppppppp4ma
- 回答数1
- イメージマップのhoverについて
イメージマップのhoverで困っています。 以下のようなJavaとHTMLで実装しているのですが、メニューhoge2 は問題なくhoverできるのですが、 イメージマップを使ったメニューhoge1がうまくいきません。 IEだとhoverするのですが、chromeではhoverしません。 【Javaスクリプト】 <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> 【HTML】 <ul> <!-- メニュー hoge1 --> <li><img src="hoge.jpg" border="0" alt="hoge1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu1','','hoge_hover.jpg',1)" name="menu1" usemap="#prdlink" /> <map name="prdlink"> <area shape="rect" coords="20,40,75,80" href="./product/hoge1.html" alt="hoge1" /> <area shape="rect" coords="80,40,134,80" href="./product/hoge2.html" alt="hoge2" /> </map> </li> <!-- メニュー hoge2 --> <li><a href="top.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu2','','top_hover.jpg',1)"> <img src="top_off.jpg" alt="top" name="menu2" /></a> </li> </ul> なにぶん、前任者のソースを見よう見まねで修正しており、知識もないためご教示いただければと思っております。
- ベストアンサー
- HTML
- hhiroki_77
- 回答数4
- イメージマップで文章を表示したい。
下記の例のように、「map.gif」という画像の各箇所ごとにそれぞれのリンクを貼るのは下記の方法で出来ると思うのですが、 「coords="22,11,122,62"」にマウスが乗ったときに指定した箇所に文章を表示するにはどうしたらよいのでしょうか？ ※それぞれの箇所によって、それぞれ違った文章を表示したいです。 ※「map.gif」という画像が表示されている上段（下段でもＯＫ）に枠を作って、その中に説明文が表示される仕組み。 <img src="map.gif" alt="サンプル" usemap="#sample"> <map name="sample"> <area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1"> <area shape="circle" coords="184,86,30" href="map2.html" alt="リンク2"> <area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="リンク3"> <area shape="default" href="map4.html" alt="リンク4"> </map> 宜しくお願いします。
- cssで写真と説明文の表示方法？
初心者です。こんな時のcssの記述方法を教えて下さい。（添付データ参照） 一つのボックス内にp要素ばかりがあるのですがこんなときは、無理に見出しや定義リストでマークアップした方が良いのでしょうか? それとも、p要素に一つずつクラス設定をした方が良いのでしょうか？ 全体をdiv class="goodsBoix"でくくり、タイトルは見出し<h2>で設定しました。 次に商品写真<p>にid=mainImgをつけて左にフロートしました。 右側の説明文の高さを固定して（説明文が長いのや短いのがあるので）、横並びになったイラストと金額を説明文の下側に並べたいのですがどうしたらよいのでしょうか？
- ＣＳＳ <li> ＨＰデザイン
ＨＰ作成初心者です。 下記のようなデザインと言うか、配置を考えています。赤枠と青枠はfloat left,righitで分ければいいと思います。 赤枠の中をテーブルを使わずに<li>で作りたいのですが、どのようにすればいいでしょうか？ 横1列ごとに<div>で囲み、横に並べればと考えていますが、他に今後も増やしていく場合に便利なやり方などはありますでしょうか？ よろしくお願いいたします。 <div id="test"> <li>画像</li> <p>テキスト、説明</p> <li>画像</li> <p>テキスト、説明</p> </div>
- 締切済み
- CSS
- hatamoto177
- 回答数3
