• 締切済み

ｊsでメインとサブのHTML高さを揃える!!

先ほどこちらで質問したのですが、 cssでfloatを使用してサブ(左)とメイン(右)を作成した場合に、 どちらか長い方にボトムを揃えるやり方を、 <script type="text/javascript" src="./heightLine.js"></script> を使用して解決しました。 しかし、html内にオンマウスで画像や文字を変更させるものがあると、 サブとメインのボトムがずれてしまいます… これはどうにもならないのでしょうか？ おわかりになられる方、ご教授下さい。 よろしくお願いしますm(_ _)m

  • HTML
  • 回答数2
  • ありがとう数7

みんなの回答

  • abril
  • ベストアンサー率69% (388/560)
回答No.2

> cssでfloatを使用してサブ(左)とメイン(右)を作成した場合に、どちらか長い方にボトムを揃える 質問の直接の解決にはならないのですが、そのJavaScriptを併用することで他のスクリプト部分に影響が出てしまうぐらいなら、段組の見栄えの問題に関してはCSSにまかせてしまった方が楽な様に思えます。やり方はいくつかありますが、よくあるパターンを2つほど。 (1)実際のソースは下記をご覧下さい。 http://css-happylife.com/log/css-template/000174.shtml http://coliss.com/articles/build-websites/operation/css/558.html 上記の各コンテンツで挙げられているサンプルの考え方はどちらも同じです。この方法の利点は、右コラムと左コラムをさらに囲む様な外枠のコラムを使わなくても左右の「高さが常に揃っている様に見える」事ですが、前者の筆者の方などは「ブラウザの負荷」等の可能性に対する懸念も述べられています。5桁というそれこそ桁違いの余白とネガティブ・マージンを同時に指定して"overflow: hidden;"で断ち切るというかなり力業な方法論なので。 (2)上記でもちょっと書きましたが右コラムと左コラムを囲む親のブロックに右コラムと左コラムの背景をひとまとめにした背景画像を水平方向にリピートしてレンダリングさせるやり方とか。こちらも、背景をレンダリングしているのは親要素なので右左どちらのコラムの高さが高かろうが低かろうが、常にそれぞれのコラムの領域が「同じ長さまである様に見え」ます。 ただしこちらは入れ子構造が1つ増えるという事（構造によってはその限りでもない場合もありますが）や、左右それぞれの背景が単なる「背景色」で済む様な場合でも「背景画像」を作ってやらなければならない、という欠点もあります。 とはいえどちらのやり方も文法的に間違ってるとかではないので、もしご自身で納得できるものがあればご使用を検討されてみては。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

どうしてもというなら、テーブルで処理するくらいでしょうか・・・ お勧めはしませんが、jsでこねくりますよりはましでしょう

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • shadowbox.jsについて

    shadowbox.jsとslimbox.jsを併用したいと考えています。 もともとshadowbox.jsをPrototypeで使用し、HTMLを呼び出すのに使用していたのですが、 画像のライトボックス表示にslimbox.js（jquery使用）を使いたいと思い、 両方とも記述したらshadowboxの方が正常に動作しなくなりました。 何か解決策はありますでしょうか。 非常に困っています。お願いします。 ちなみに以下の様なコードをhead内に記述しております。 <script src="../../common/js/prototype.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../../common/js/shadowbox/shadowbox.css"> <script src="../../common/js/shadowbox/shadowbox.js" type="text/javascript"></script> <script type="text/javascript">Shadowbox.init();</script> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript">Shadowbox.init();</script> </script> <link href="../../common/css/slimbox/slimbox.css" type="text/css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="../../common/js/jquery.js"></script> <script type="text/javascript" src="../../common/js/slimbox.js"></script> <script type="text/javascript"> //slimbox $(document).ready(function() { $('a[rel*=lightbox]').slimbox(); }); </script>

    • ベストアンサー
    • CSS
  • このHTMLの意味はなんでしょうか？

    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="scripts/jquery.queryloader2.js"></script> <script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script> <script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script> <script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script> <script type="text/javascript" src="scripts/jquery.scrollorama.js"></script> <script type="text/javascript" src="scripts/jquery.scrolldeck.js"></script> <script type="text/javascript" src="scripts/jquery-contained-sticky-scroll.js"></script> <script type="text/javascript" src="scripts/lightbox.js"></script> <script type="text/javascript" src="scripts/parallax01.js"></script> <script type="text/javascript" src="scripts/yazirusi01.js"></script> <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script> <script type="text/javascript" src="scripts/jquery.easie.js"></script> <script type="text/javascript" src="scripts/jquery.smoothScroll.js"></script> <script type="text/javascript" src="scripts/php_date.js"></script> <script type="text/javascript" src="scripts/script.js"></script> とあるサイトのソースの一部に、このような文章が書かれていました。 一体これはどういう意味なんでしょうか？ どなたか解説お願いします

    • ベストアンサー
    • HTML
  • 外部ファイルJS参照を全て消さないと「文字が正しくありません」エラー

    実に不思議なのですが、 以下のように4つのJSファイルをインクルードしているHTMLファイルを ローカルで開くと「文字が正しくありません」とスクリプトエラーが何回かでます。 ですが、script1～4.js　の行を全てコメントアウトすると、エラーはでません。 1～4のどれかにエラーが含まれているのかと、一つ一つを外してみましたが、 どの行を外しても、やはり「文字が正しくありません」と出てしまいます。 ローカルの然るべきパスに1～4はあります。また、HTML同様、JSもEUCになってます。 何が原因なのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>タイトル</title> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <link href="../css/style.css" rel="stylesheet"> <script src="../js/script1.js" type="text/javascript"></script> <script src="../js/script2.js" type="text/javascript"></script> <script src="../js/script3.js" type="text/javascript"></script> <script src="../js/script4.js" type="text/javascript"></script> </head>

  • 教えてください!　lightboxとskitter

    javascriptがまだよく理解できていないので、 愚問に思われるかもしれないですが、上手く動作しなくて困っています。 <head>内に下記のように記述したのですが、lightboxが上手く作動しません。 記述に問題があるんでしょうが、調べても全くわからないので こちらに投稿させていただきました。 どなたかこの問題の解き方をお教えください。 よろしくお願いします。 <link rel="stylesheet" type="text/css" href="css/lightbox.css"> <!--lightbox--> <script src="js/prototype.js" type="text/javascript"></script> <script type="text/javascript" src="js/builder.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/smartRollover.js"></script> <!--smartRollover--> <script type="text/javascript" src="js/jquery.quickflip.source.js"></script> <link rel="stylesheet" type="text/css" href="css/skitter_css/skitter.styles.css"> <!--Skitter--> <style type="text/css"> .box_skitter_large{ width:490px;height:190px; } </style> <script type="text/javascript" src="js/skitter_js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.skitter.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.animate-colors-min.js"></script> <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({interval: 8000}); <!--数字を大きくするとSkitterの時間がゆっくりになる--> //$('.box_skitter_large').skitter({thumbs: true, label: false,}); }); </script>

  • *.js ファイルの読み込みについて

    お世話になります。 *.jsファイルを読み込むのに <script type='text/javascript' src='abc.js'></script> とすれば、できます。 これを、 <script type="text/JavaScript"> <!-- src='abc.js; ・・・・・・・・・ ここにabc.js内の関数などを記載 ・・・・・・・・・ //--> </script> と、いう形にできないものでしょうか。 このままだと、abc.jsは読み込まれません。 よろしくお願いします。

  • 同HTML内で2種のJ-Queryを使用したい

    複数のjQueryを使用し、タブメニュータイプのものと自動スライドショータイプのを 同じHTML内にいれようとしていますが、1つのみしか作動せずJavaScriptエラーがでてしまいます。 片方ずつで行うと作動するのですが、同じHTMLに2種組み込むとうまくいきません。 同じ質問があり参考にさせて頂いたのですが良くわかりません。 複数使う場合の記述方法があるということもサイトで知ってやってみたりしたのですがうまくできませんでした。 http://stacktrace.jp/jquery/with_other_lib.html 使用しているものは以下です。 -------------------------------------------- <!-- jQuery --> <script type="text/javascript" src='/js/J-Query/jquery-1.5.2.min.js'></script> <!-- ナビ --> <script type="text/javascript" src='/js/J-Query/jquery.color-RGBa-patch.js'></script> <script type="text/javascript" src='/js/J-Query/example.js'></script> <!--スライダー--> <script type="text/javascript" src="/js/J-Query/jquery.flexslider.js"></script> <script type="text/javascript"> $(function(){ SyntaxHighlighter.all(); }); $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", start: function(slider){ $('body').removeClass('loading'); } }); }); </script> <script type="text/javascript" src="/js/J-Query/shCore.js"></script> -------------------------------------------- <!-- ナビ --> グローバルナビで使用 参照元 http://css-tricks.com/examples/MagicLine/ の下の方です。 <!--スライダー--> スライダーで使用 参考元 http://flexslider.woothemes.com/ お手数ですがどなたか教えて頂けると幸いです。

  • 複数のjQueryを導入するには…？

    見てくださってありがとうございます。 サイトにスムーススクロールとフォトギャラリーのjQueryを入れたのですが片方が動きません。 ------------------------- <!-- スムーススクロール↓ --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/test.js"></script> <!-- フォトギャラリー↓ --> <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> ------------------------- コードは上記のように記述してありあます。 スクロールはhttp://klutche.org/archives/536/様のを使用、、 フォトギャラリーはhttp://myisland.jp/様のフォトギャラリーSample#2を使用しています。 片方消すと正常に動くのでコードは間違っていないと思いますが なぜjsフォルダに一個一個入れて呼び出しているのに動かないのかわかりません。 head内にバージョン違いのjQuery本体を呼び出すと動かなくなるのは知っていますが この場合本体は一個しか呼び出していないですよね・・・？ プログラムさっぱりでとても困っています。 解決策よろしくお願いします。

  • 複数のjavascriptが作動しない

    http://www.coolwebwindow.com/template/public.php 上記無料で配布されているホームページのテンプレートに 下記lightboxを設置しました。 http://lokeshdhakar.com/projects/lightbox2/ このテンプレートには、ページ内リンクへの移動がスムーズになる javascripが設置されているのですが、 このページにlightboxを追加すると スムーズに移動するjavascriptが無効になってしまいます。 <!--ページをスムーズに移動するjs--> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!--lightboxのjs--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> どのように対処すればいいのでしょうか？ ご教授お願いいたします！

  • 呼出したjsファイル内で他jsファイルを呼出したい

    hoge.htmlに ----------------------------------------------- <script type="text/javascript" src="piyo.js"></script> ----------------------------------------------- を記述してpiyo.jsを読み込ませました。 この状況で、piyo.js内でfuga.jsを読み込むにはどのような記述をすればよいでしょうか？

  • jsファイルの記述順について

    レスポンシブデザインでホームページを制作しています。 解決できない問題に直面してしまいました。 どなたか詳しい方がいらっしゃいましたらアドバイスをお願い致します。 同一ページ内に qTip … ttp://craigsworks.com/projects/qtip/demos/content/loading と Naver … ttp://formstone.it/components/Naver/demo/index.html を使用したいと考えています。 しかし、色々と試してはいるのですが片方しか作動しません。 どちらも単体ではきちんと作動していますので、記述の順序の問題なのでしょうか。 該当部分は以下の通りです。 <head> <link type="text/css" rel="stylesheet" href="css/jquery.fs.naver.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="js/scrolltopcontrol.js"></script> <script type="text/javascript" src="js/smart-crossfade.js"></script> <script type="text/javascript" src="js/jquery.smoothScroll.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!-- qTip --> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> // Create the tooltips only on document load $(document).ready(function() { // Use the each() method to gain access to each elements attributes $('.col-lg-12 a[rel]').each(function() { $(this).qtip( { content: { // Set the text to an image HTML string with the correct src URL to the loading image you want to use text: '<img class="throbber" src="http://craigsworks.com/projects/qtip/images/throbber.gif" alt="Loading..." />', url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load title: { text: 'WORKS' + $(this).text(), // Give the tooltip a title using each elements text button: '×' // Show a close link in the title } }, position: { corner: { target: 'bottomMiddle', // Position the tooltip above the link tooltip: 'topMiddle' }, adjust: { screen: true // Keep the tooltip on-screen at all times } }, show: { when: 'click', solo: true // Only show one tooltip at a time }, hide: 'unfocus', style: { tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner border: { width: 0, radius: 4 }, name: 'light', // Use the default light style width: 280 // Set the tooltip width } }) }); }); </script> <!-- Naver --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.fs.naver.js"></script> <script type="text/javascript"> $(function(){ $("nav").naver({ animated: true, labelClosed: "", labelOpen: "" }); }); </script> </head> <body>直前に … <script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.js"></script> </body> 力不足で本当にお恥ずかしいのですが、よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する