• 締切済み

CSSについてです

tumblrのテーマを作っているのですがサイドバーのレイアウトがうまくいきません。 具体的には、サイドバーがコンテンツがある部分の長さまでしか伸びず、それより下は記事の部分が食い込んでしまうといった問題が発生しています。 僕は、サイドバーの横にあるborder-rightを記事などほかの部分と同じ長さまできっちり伸びるようにしたいです。 このサイトを見てこんな設定をしてみたのですがこれでは画面に表示されている部分までしか効果がなくスクロールしたら意味がなくなってしまいます。 サイト http://d.hatena.ne.jp/seto-san/20081215/1229335070 HTML <body> <div id="body">本文</div> </body> CSS * { margin: 0px; padding: 0px; } html{ height: 100%; } body{ height: 100%; } #body { height: 100%; min-height: 100%; } body > #body { height: auto; } tumblrのテーマはごちゃごちゃしているので、簡易的なページを位置から作ってそこでサイドバーを実装してみてもうまくいきませんでした。 何かうまいやり方があったら教えてください

画像を拡大する
  • CSS
  • 回答数3
  • ありがとう数2

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

修正したはずが修正前の物をあげてしまったようです。 セクションや行数を増減、ウィンドウ幅を変更してみてください。 常に高さ一杯(少ないときはウィンドウ高さ一杯)で左のborderは引かれる筈です。 ★HTMLにはデザイン的要素はありませんから、自由にデザインは変更できるはずです。 ★印刷時には表示されません。 ★子供セレクタ(>)使用していませんので冗長ですが、IE7以降は問題なく表示されるはずです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;position:relative;} /* 左右の枠線指定 */ /* 検索フォームを左に、最底画面高～body高さ */ /* 本文目次は本文右、高さは本部高 */ html{height:100%;} body{min-height:100%;} div.header form p, div.section div.nav{ position:absolute; height:100%; top:0;width:150px;/* 位置 */ border:ridge gray; } /* 枠線など細かい調整 */ div.section{position:relative;}/* 位置サイズの基準 */ div.section div.nav{border-width:0 0 0 2px;right:0;} div.header form p{ border-width:0 2px 0 0; left:0;text-align:center; } div.header,div.section,div.footer{margin-left:155px;} h1,h2,h3,h4,p{margin:0;line-height:1.6em;} div.section p{text-indent:1em;} div.section div.section{margin:0 155px 0 5px;} div.header form p form{ margin-top:20px; } /* テストのため */ div.section div.section{min-height:300px;} /* おまけ */ div.header form p:before, div.section div.nav ol:before{ color:red;font-weight:bold;white-space:pre; } div.header form p:before{content:"ディスプレイ高一杯\A";} div.section div.nav ol:before{content:"本文高一杯\A";} pre{border:solid black 1px;padding:0.5em;1em;} body{background-color:silver;} div.section{background-color:white;} div.section div.section{background-color:rgb(255,255,200);} div.header form p{background-color:aqua;} --> ＿</style> ＿<style type="text/css" media="print"> <!-- div.section div.nav,form{display:none;} div.footer{page-break-before:always;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<form action="./"><p><input type="text" size="10" value=""><input type="submit" value="検索"></p></form> ＿</div> ＿<div class="section"> ＿＿<h2>質問と回答</h2> ＿＿<div class="section" id="Question"> ＿＿＿<h3>CSSについてです</h3> ＿＿＿<p> ＿＿＿＿tumblrのテーマを作っているのですがサイドバーのレイアウトがうまくいきません。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿具体的には、サイドバーがコンテンツがある部分の長さまでしか伸びず、それより下は記事の部分が食い込んでしまうといった問題が発生しています。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿僕は、サイドバーの横にあるborder-rightを記事などほかの部分と同じ長さまできっちり伸びるようにしたいです。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿このサイトを見てこんな設定をしてみたのですがこれでは画面に表示されている部分までしか効果がなくスクロールしたら意味がなくなってしまいます。</p> ＿＿＿</p> ＿＿</div> ＿＿<div class="section" id="Answer"> ＿＿＿<h3>親コンテナブロックを基準に</h3> ＿＿＿<p> ＿＿＿＿デザインは必ず文書構造に従うはずです。文書構造に反したデザインは利用しづらい。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿このサンプルでは記事全体に付随したヘッダは記事全体に、本分に付随した目次は本文のサイズに従います。 ＿＿＿</p> ＿＿＿<pre>position:absolute; height:100%;</pre> ＿＿＿<p>ポイントは、この2プロパティだけ・・・</p> ＿＿</div> ＿＿<div class="nav" id="tableContent"> ＿＿＿<ol> ＿＿＿＿<li><a href="#Question">CSSについてです</a></li> ＿＿＿＿<li><a href="#Answer">親コンテナブロックを基準に</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-02-13</dd> ＿＿</dl> ＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

quieta
質問者

お礼

丁寧にありがとうございます。参考にします。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

全く酷いサイトがあるものですね。 ・横に表示する要素を内容が少ないときは表示高さ一杯、 ・多いときはそれと同じ長さまで伸ばす。 　(その要素には一方にborderを引く) 　ということはその要素はルートに存在するはずです。ということは文書構造もそうなっているはずです。 でしたら、極めて単純で必要な指定は、 position:absolute; height:100%; たった、これだけ。 そもそも、デザインのためにHTMLを書こうとするから難しくなるのです。 HTMLは、文書構造をひたすらマークアップする物で、プレゼンテーションはスタイルシートに任せる。15年も前のHTML4.01の勧告以来、言われ続けてきたことです。 　⇒構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) ★『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 　すなわち、どこが文書のヘッダーか、どこが本文か、どこがナビゲーションか機械にも判る様に <div class="header"> 　　この文書の導入やナビゲーション 　<div class="nav"> 　　ナビゲーション 　</div> </div> <div class="section"> 　本文だよ </div> <div class="footer"> 　文書情報・著作権などフッタ </div> としろと・・・これなら機械は無論!!。作者も他人もよくわかる。その上で、どのようにデザインするかをスタイルシートで書けば良い。下記サンプル（HTML4.01）を見ると、スタイルシートだけ読んでも、デザインで何をしようとしているか判るはず。もちろんHTMLも誰でも書き加えられる。さして検索エンジンもページの内容を理解できる。印刷では、そんな枠線はなくシンプルに印刷される。 　あまりにも浸透しないため、HTML5では、 ★　⇒文書をよりよく構造化するために、要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) 　section、article、aside、hgroup(採用されない見込み)、、header、footer、nav、figure　および、figcaption、それ以外にmainが加わる予定・・ よってHTML5では、 <header> 　　この文書の導入やナビゲーション 　<nav> 　　ナビゲーション 　</anv> </header> <section> 　本文だよ </section> <footer> 　文書情報・著作権などフッタ </footer> となる。 [HTML4.01サンプル]タブは＿に置換してあるので戻す。とってもわかりやすいでしょう。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;position:relative;} div.header form p, div.section div.nav{ position:absolute; height:100%; top:0;width:150px; border:ridge gray; } div.section{position:relative;} div.section div.nav{border-width:0 0 0 2px;right:0;} div.header form p{ border-width:0 2px 0 0; left:0;text-align:center; } div.header,div.section,div.footer{margin-left:155px;} h1,h2,h3,h4,p{margin:0;line-height:1.6em;} div.section p{text-indent:1em;} div.section div.section{margin:0 155px 0 5px;} div.header form p form{ margin-top:20px; } div.section div.section{min-height:400px;} div.header form p:before, div.section div.nav ol:before{ color:red;font-weight:bold;white-space:pre; } div.header form p:before{content:"ディスプレイ高一杯\A";} div.section div.nav ol:before{content:"本文高一杯\A";} pre{border:solid black 1px;padding:0.5em;1em;} --> ＿</style> </head> <body> ＿<div class="article"> ＿＿<div class="header"> ＿＿＿<h1>タイトル</h1> ＿＿＿<form action="./"><p><input type="text" size="10" value=""><input type="submit" value="検索"></p></form> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2>質問と回答</h2> ＿＿＿<div class="section" id="Question"> ＿＿＿＿<h3>CSSについてです</h3> ＿＿＿＿<p> ＿＿＿＿＿tumblrのテーマを作っているのですがサイドバーのレイアウトがうまくいきません。 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿具体的には、サイドバーがコンテンツがある部分の長さまでしか伸びず、それより下は記事の部分が食い込んでしまうといった問題が発生しています。 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿僕は、サイドバーの横にあるborder-rightを記事などほかの部分と同じ長さまできっちり伸びるようにしたいです。 ＿＿＿＿</p> ＿＿＿</div> ＿＿＿<div class="section" id="Answer"> ＿＿＿＿<h3>親コンテナブロックを基準に</h3> ＿＿＿＿<p> ＿＿＿＿＿デザインは必ず文書構造に従うはずです。文書構造に反したデザインは利用しづらい。 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿このサンプルでは記事全体に付随したヘッダは記事全体に、本分に付随した目次は本文のサイズに従います。 ＿＿＿＿</p> ＿＿＿＿<pre>position:absolute; height:100%;</pre> ＿＿＿＿<p>ポイントは、この2プロパティだけ・・・</p> ＿＿＿</div> ＿＿＿<div class="nav" id="tableContent"> ＿＿＿＿<ol> ＿＿＿＿＿<li><a href="#Question">CSSについてです</a></li> ＿＿＿＿＿<li><a href="#Answer">親コンテナブロックを基準に</a></li> ＿＿＿＿</ol> ＿＿＿</div> ＿＿</div> ＿＿<div class="footer"> ＿＿＿<h2>文書情報</h2> ＿＿＿<dl class="documentHistry"> ＿＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿＿<dd>2013-02-13</dd> ＿＿＿</dl> ＿＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿＿</div> ＿</div> </body> </html>

  • kon77
  • ベストアンサー率70% (83/117)
回答No.1

恐らくですが、以下の記事が参考になるのではないでしょうか。 【ブロックレベルのカラムの高さを揃える4つの方法】 http://blog.e-riverstyle.com/2009/07/4.html 【Equal Height Columns with Cross-Browser CSS （英語サイト）】 http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

quieta
質問者

お礼

display要素はnoneとblockしかつかっていなかったためとても参考になりました。 borderがついてこないのが少し不便ですが、シンプルで後から整理しやすいので当分はこれを使ってみようかとおもいます。

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

関連するQ&A

  • CSSで擬似的にフレームを作りたい

    CSSのoverflow:scrollを利用した、 フレームのように一部分をスクロールできるページを考えております。 画面左側をメニューにするには <body> <div class="menu"></div> <div class="content"></div> </body> のようなHTMLに *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{height:100%;float:left;width:100px;overflow:scroll;} .content{height:100%;margin:0 0 0 100px;overflow:scroll;} のようなスタイルシートという形で可能ですが、 上側をメニューにするにはどのようにすれば良いでしょうか？

    • ベストアンサー
    • HTML
  • html { } CSS設定の解釈を教えて下さい

    お世話になります。 あるサイトのCSS設定が↓のようになっていました。 +------------------------------------------------------------------ html { margin: 0; padding: 0; min-width: 700px; } body { margin: 0; padding: 0; min-width: 800px; } +------------------------------------------------------------------ bodyの指定はわかるのですが、htmlにCSSをするのは 初耳です。また、min-widthの値が、bodyの同値より 少ないのですが、これは、どういった解釈になるのか、 教えて下さい。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSについて 入力フォームの上下揃い

    CSSについて 入力フォームの上下揃い sample.css @CHARSET "windows-31j"; html,body,div,span,h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%} html { height:100%; } body { height:100%; } body > #container { height: auto; z-index:0; } #container{ width:780px; margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; position:relative; min-height:100%; border:1px solid #999; } #header{ margin: 0; padding: 0px 0px 0px 0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } #main{ padding:auto; width:100%; backgruond-color:#87CEEB; z-index:1; } #footer{ position:absolute; bottom:0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } index.html <div id="container"> <div id="header"></div> <div id="main"> <div class="vartical-align"> <form action=""> <input type="text" name="id"> <input type="password" name="pas"> </form> </div> </div> <div id="footer"></div> </div> 上記の用なCSSにて入力フォーム等を、id=main内にて上下中央揃えにしたいのですが どうした良いでしょう？

  • html cssで困っています

    基本的な質問ですが、 html部分 <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="soto"> 　<div id="naka"></div> </div> </body> </html> css部分 @charset "utf-8"; #soto{ width:320px; height:480px; background-color:#FB0004; } #naka{ width:160px; height:50px; margin-top:160; margin-left:80px; background-color:#000000; } としたら、赤の長方形の真ん中当たりに黒の長方形がくると思ってやったのですが、全体が下がります。ねらった通りにするにはどのようにしたらいいのでしょうか。paddingで無理矢理したのですが、この記述の根本的なミスはなでしょうか？教えていただければありがたいです。

    • ベストアンサー
    • HTML
  • divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。

    divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？

    • ベストアンサー
    • CSS
  • CSSについて教えて下さい ブログレイアウトが崩れます

    御世話になります。 ■ブログの、本体部分がどうしても真ん中に固定できません。本体部分は div#wrapper { width: 750px; padding: 0 10px; margin:0 0 0 130px; border:1px solid;} 今はmarginでなんとなく真ん中に見せていますが、 1024～上で真ん中に見えるだけで、1280×～にすると左よりになります。 全体のCSSは body { margin:0px auto; color: #666; font: 12px/1.5em "meiryo","メイリオ","Lucida Sans Unicode","Lucida Grande",sans-serif} にして、marginをautoにしましたがこれでは真ん中にできないのでしょうか。 ■記事本文の下に、カテゴリが回りこみます（記事本文が、カテゴリより短かった時） 記事部分 div#contents { width: 500px; padding: 0 10px; float: left;} カテゴリー部分 div#navigation { width:190; padding:0px; border:1px solid;} カテゴリーが記事の高さを過ぎると、記事の下に回りこんでしまう状況です。 説明足らずであれば補足します。修正加筆箇所を宜しくお願いします。

    • ベストアンサー
    • HTML
  • CSSで画面を構成しています。

    CSSで画面を構成しています。 左ブロック、右ブロック共に角丸の四角にしたいので、**_head.gifというようなフタとソコになるような画像を使っています。 このままだと左右ブロックの高さが当然そろわないのですが、何か良い方法はないでしょうか？ テーブルレイアウト以外であれば、多少イレギュラーな方法でもかまいません。 *css********** div#body{width:800px; margin:10px auto; text-align:center; padding:0; } div#header{padding:0; margin:0 0 10px 0; background-image:url(**.gif); width:800px; height:50px; text-align:left; } div#main{ width:800px; text-align:left; } div#submenu{padding:0; margin:0 10px 10px 0; width:200px; text-align:left; float:left; } div#contents{padding:0; margin:0 0 10px 210px; width:590px; text-align:left; } div#footer{padding:0; margin:0 0 5px 0; clear:both; width:800px; height:30px; text-align:left; } *html**** <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> <div id="submenu"> <img src="img/common/sub_head.gif" width="200" height="10" /> 　<div>左ブロック</div> <img src="img/common/sub_foot.gif" width="200" height="10" /> </div> <div id="contents"> <img src="img/common/main_head.gif" width="590" height="10" /> 　<div>右ブロック</div> <img src="img/common/main_foot.gif" width="590" height="10" /> </div> </div> <div id="footer"> フッター </div> </div>

    • ベストアンサー
    • HTML
  • cssによる配置の計算が合いません

    cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>

  • HTML、ＣＳＳ が、なかなかうまくいきません。

    お世話になります。 HTMLを始めたばかりですので、 ご教授いただけたら幸いです。 以下の図のような感じに並べたいのですが、 なかなかうまい具合にいきません。 黄色は、全てボタンになります。 赤は、ボタンについた吹き出し部分となります。 上段の２つのボタンは、やや大きい感じのボタン。 下段の３つのボタンは、上段に比べて、少し小さい感じのボタンになります。 ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。 【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、 ご教授いただけたら、幸いです。 宜しくお願いします。

    • 締切済み
    • CSS
  • javascript　cssの値を取得、変更

    タイトルの通りですが、javascriptにてcssの値を取得することはできますでしょうか？ 考えている機能は、URLを指定するtextboxがあり、そこに入力したURLのボックスを解釈し、分解してmarginやpadding、border、width、height、合計縦幅、合計横幅…といった情報を出してくれる。その際できればcssで指定のないものも表示したい。いらない要素は破棄。 例： <html><style type="text/css"> #wrap{ width:250px; height:300px; margin:5px 10px; padding:10px 5px; } #hoge{ width:250px; height:50px; border:5px solid; } #moge{ width:100px; height:150px; margin:5px 10px; padding:10px 5px; } </style> <body> <div id="wrap"> <div id="hoge"> <ul> <li>aaa</li><li>bbb</li> </ul> </div> <div id="moge"> <img src="dammy1.gif" /> <img src="dammy2.gif" /> </div></div> </body></html> 適当ですけど、こんな感じだったら、 <html><style type="text/css"> #wrap{ background:#333; width:250px; height:300px; } #hoge{ background:#666; width:250px; height:50px;} #moge{ background:#999; width:100px; height:150px; } </style> <body> id名<br /> #wrap<br /> #hoge<br /> #moge<br /> … <div id="wrap"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> <div id="hoge"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> <div id="moge"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> </body></html> こんな感じにしてhtmlを吐き出す。 そんなことは可能でしょうか？少し大変になっても可能なら頑張って作ろうと思っています。よろしければ教えていただけないでしょうか？よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する