shinji000のプロフィール

@shinji000 shinji000
ありがとう数2
質問数0
回答数3
ベストアンサー数
2
ベストアンサー率
100%
お礼率
0%

  • 登録日2018/08/01
  • リスト要素を横に並べたらずれました！！

    関係ありそうなHTMLとCSSは以下のあたりだと思います。 もしかすると違うかも知らませんが？ 足りなければ追記します。 画像のようにブロックがずれてしまいます。どうすれば 綺麗にならべて表示できるでしょうか？ よろしくお願いします。 ---HTML------------------------------------------------------------- <div id="sidebar2"> <dl> <dt>検索エンジン・リアルタイム</dt> <dd> <ul> <li><a href="http://www.ceek.jp/" target="_blank">CEEK.JP</a></li> <li><a href="http://www.google.co.jp/" target="_blank">Google</a></li> <li><a href="http://www.yahoo.co.jp/" target="_blank">Yahoo</a><a href="https://login.yahoo.co.jp/config/login_verify2?.src=ym" target="_blank">【Yahoo:ログイン】</a></li><li><a href="http://search.yahoo.co.jp/realtime" target="_blank">Yahoo検索リアルタイム</a></li> <li><a href="http://buzztter.com/#/ja" target="_blank">buzztter</a></li> </ul> </dd> </dl> --css------------------------------------------------------------------- #sidebar2 { float: right; width: 70%; } #sidebar2 ul>li { display:inline-block; width: 250px; height: 50px; font-size: 13px; text-decoration: none; text-align: center; padding: 4px; background: #009999; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #sidebar2 ul>li:hover { background: #99CCFF; } #sidebar2 ul>li>a{ text-decoration: none; color: #FFFFFF; display: block; }

  • ブロック表示すると重なってしまいます！！

    下記のｃｓｓとHTMLでWEBサイトを昔作りました 上部に■いねずみ色のブロックを並べて表示しその下に左に 縦にリスト形式でメニューが並び右にピンクのブロックで項目を並べる 形式にしたのですが、右のブロックの項目の下にテキストで文章を入れたり 何かブロックを足そうとするとブロックが重なってしまい、 上手くできませんでした。 どのようにすればうまく行きますか？教えて下さいよろしくお願いします。 /* mycss.css */ html { background-color: aqua; height: 100%; } body{ height: 100%; font-family: Verdana, Arial; font-size: 14px; } body > #container{ height: auto; } #container { min-height: 100%; height: 100%; width: 90%; margin: 0 auto; padding: 0 10px; background-color: #fff; box-shadow: 0 0 3px rgba(0,0,0,0.5); } #header { width: 100%; height: 80px; background: skyblue; border-radius: 20px; } #menu{ margin-bottom: 15px; overflow: hidden; } #main{ overflow: hidden; margin-bottom: 15px; } #contents{ float: left; width: 25%; font-size: 14px; } #contents ul { margin-bottom: 15px; padding: 10px; } #contents dl{ border-bottom: 10px; border-top: 2px solid #ccc; } #contents dd{ border-top: 2px solid #ccc; } #contents ul>li>a{ text-decoration: none; } #contents ul>li:hover { background: orange; } #sidebar { float: right; width: 70%; } #sidebar ul>li { float: left; width: 230px; height: 25px; font-size: 13px; text-align: center; padding: 4px; background: #ffd8ff; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #sidebar ul>li:hover { background: #ddd; } #sidebar ul>li>a{ text-decoration: none; display: block; } #footer{ font-size: 12px; color: #ccc; text-align: center; border-top: 1px solid #ccc; padding: 10px 0 20px; } #menu ul>li { float: left; width: 120px; height: 25px; font-size: 13px; text-align: center; padding: 2px; background: #ccc; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #menu ul>li:hover { background: #ddd; } #menu ul>li>a{ text-decoration: none; display: block; } ----------以下HTML------------------------------------------------------------------- <!DOCTYPE html> <html lang="ja"> <head> <meta chraset="shift-jis"> <title>ああああ</title> <link rel="stylesheet" href="mycss.css"> </head> <body> <div id="container"> <div id="header"> <h1>テストページ<A></h1> </div> <div id="menu"> <h2>便利リンク</h2> <ul> <li><a href="">Google</a></li> <li><a href="">Youtube</a></li> <li><a href="">【amazon】</a></li> </ul> </div> <div id="main"> <div id="contents"> <dl> <dt>検索エンジン・リアルタイム</dt> <dd> <ul> <li><a href="">CEEK.JP</a></li> <li><a href="">Google</a></li> <li><a href="">buzztter</a></li> </ul> </dd> </dl> <dl> <dt>SNS/検索エンジン/メール/質問サイト</dt> <dd> <ul> <li><a href="">Facebook</a></li> <li><a href=""">Excite</a></li> <li><a href="">Baidu</a></li> </ul> </dd> </dl> </div><!-- #contents --> <div id="sidebar"> <ul> <li><a href=""_blank">BOOK・OFF Online</a></li> <li><a href="" target="_blank">イーブックオフ</a></li> <li><a href="">infoseekニュース</a></li> </ul> </div><!-- #sidebar --> </div><!-- #main --> <div id="footer">Copyright 2018</div> </div><!-- #container --> </body></html>

  • javascript 要素追加後の高さ

    $("div").append("要素"); で要素を追加した後の親要素divの高さは、実際に要素を追加して結果の要素の高さをみる、もしくはどういう構造になるか計算して高さを事前に計算する以外に手はないでしょうか？ 要素追加前に親要素の高さをアニメーションで大きくして、その後要素を追加したいです。

もっと見る