- 締切済み
サイドバーを自動にすると下のデザインが反映されない
H240S18B73の回答
- H240S18B73
- ベストアンサー率65% (190/288)
なかなかやり方が乱暴ですねぇ 角丸してくれってことはもうCSS3でやっていいってことだろうし 高さを揃えるのはflexでやるといいかもですよ
関連するQ&A
- サイドバーの背景画像(CSS)
以下のＣＳＳのソースなのですがサイドバーに http://www.01kaisha.com/img/main/main01_r2_c3.jpg を背景として使いたいのですがメインのほうに背景がいってしまい サイドバーで表示する事が出来ません。 どのようにすればサイドバーにhttp://www.01kaisha.com/img/main/main01_r2_c3.jpg を使用することが出来るのでしょうか？ どなたか分かる方いらっしゃいましたら教えてください、お願いします<(_ _)> body{ margin: 0px; padding: 0px; background-image: url(http://www.01kaisha.com/img/main/main01_r2_c3.jpg); background-repeat: repeat-y; } .main{ width: 642px; position: absolute; left: 0px; } .side{ margin-left: 642px; }
- ベストアンサー
- HTML
- 日記の文章が枠に張り付いています・・
初心者です。CSS編集で色々参考にしてやってるのですが、どうしてもわかりません。 左寄せで枠つきで日記を書いてるのですが、 枠に字がぴったりとくっついていて、多少スペースを入れたいのですが、"padding"というので合っていますか？さらにこの中で↓どこにそれをいれればいいのかわかりません・・・。 /* ----------------------- MainColumn ----------------------- */ #main { padding-bottom: 10px; } /*message*/ #message{ P STYLE="line-height: 1.8;" width:99%; margin-bottom: 15px; border-top: 1px dashed #778899; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #778899; } #message .contents{ margin-top: 10px; margin-bottom: 10px; }
- ベストアンサー
- ブログ
- CSS ブログ本文とサイドバーのバランス
質問させてください！ weeblyの2カラム標準テンプレートを使用しweb siteを運営しているのですが、 両端の空白をもう少し縮め、本文とサイドバーをその分広げたいと思い、CSSを 調整しようと調べながら各数値を変更してみたのですがうまくいきません。 どの数値を変更するべきなのか教えていただけたらと思います。 理想のサイトのリンク先も貼付けておきます。 http://www.fecalface.com/ body { background-color:#fff; font-family:"helvetica",arial,sans-serif; font-size:62.5%; color:#777; margin:0; padding:0; } acronym { cursor:help; border-bottom:1px dotted #ddd; } #container { font-size:1.2em; width:800px; margin:0 auto; } #header { color:#444; margin:0; padding:0px; background:#fff url(%%HEADERIMG%%) no-repeat bottom right; } #header h1 { font-family:"helvetica",arial,sans-serif; font-size:2em; color:#333; margin:30px 0 0 0; font-weight:normal; line-height:1.5; } #header h1 strong { color:#c00; } #header h2 { margin:1000px 0 0 0; font-size:1em; font-weight:normal; color:#999; } #navigation { text-align:right; margin:10px 10px 10px auto; } #navigation { margin:0 10px 0 0; padding:0; } #navigation li { margin:0; padding:0; list-style:none; display:inline; } #navigation li a { padding:5px 6px 2px 4px; margin:0 2px 0 0px; color:#000000; text-decoration:none; font-weight:helvetica; border-bottom:1px solid #ddd; } #navigation li a:hover { color:#C00; border-bottom:1px solid #c00; } #active a:link { color:#C00; border-bottom:1px solid #c00; } #active a:hover { color:#C00; border-bottom:1px solid #c00; } #active a:visited { color:#C00; border-bottom:1px solid #c00; } #content { margin:20px 0 20px 10px; padding:0; } #content p { padding:2px; text-align:justify; line-height:1.5; } #content h1 { display:block; margin:50px 0 0 10px; padding:0; font-family:"helvetica",arial,sans-serif; font-size:1.8em; color:#c00; border-color:#ddd; border-style:solid; border-width:0 0 1px 0; } #content h2 { display:block; margin:40px 40px 0 0px; padding:0 長くなってしまいましたがよろしくお願いします！
- ベストアンサー
- HTML
- CSSが正確に反映されません。
４つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います 丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。 しかし書いたCSSの設定が正確に反映されません。 headerとfooterもこの大きさで広げたいと思うのですが、広がりません。 また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。 背景を赤に設定しているのですが、それも反映されません。 なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。 どうかよろしくお願いします。 以下、2つのファイルは同じフォルダに保存しました。 dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。 style.css ---------------------------------------------------------- @charset "utf-8"; /* CSS Document */ <!-- * { margin:0; padding:0; } h1, h2, p { margin: 0 1em; } <!--背景の設定--> body { background-color: red; } <!--コンテンツの幅を指定--> #wrapper, #main, #header, #menu, #footer { width:1120px; } <!--角を丸くする--> #header, #menu, #contents, #footer { background-color: #66FFFF; border:2px solid #999; padding: 8px; margin-bottom:5px; -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } <!----> #wrapper { margin: 0 auto; line-height: 1.5; } #main { } #header { height: 50px; } #menu { width: 160px; float: left; } #menu ul { list-style: none; margin-left: 1em; } #contents { float: right; width: 900px; } #footer { clear: both; height: 50px; text-align: center; } --> ------------------------------------------------------------------------------------ index.html ------------------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>勉強用</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>Site Title</h1> </div> <div id="main"> <div id="menu"> <p><strong>float:left</strong></p> <ul> <li>Menu</li> <li>Menu</li> </ul> </div> <div id="contents"> <h2>Sub Title</h2> <p><strong>float:left</strong></p> <h2>Sub Title</h2> <p>text</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html>
- 締切済み
- CSS
- 至急 ヤプログ カスタマイズ サイドバーについて
現在サイドバーをカスタマイズしているところなのですが、画像のようにずれてしまい思うようになりません。 (1)サイドバー自体をスペースの空いている左よりにしたい。 (2)PR・プロフィールなどのタイトルもそれに合わせたい。 カスタマイズ初心者なためあまりタグの意味を理解しておらず、どこの数値を変更してよいかわかりません。 タグは以下です。 /*-------------------------------------- クラス ---------------------------------------*/ .side_title { margin-bottom: 0px; padding: 10px 100 10px 10; background: url() no-repeat left; font-size: 15px; text-transform: capitalize; text-align: center; color: #FFF; font-weight: bold; } #conts .title { margin: 0 0 10px 15px; padding: 14px 0 13px 10px; background: url(画像) no-repeat; font-size: 15px; font-weight: bold; color: #662C6B; } /* トラックバック・コメント・検索レイアウト */ #trackbacks, #comments, #comment_input, #comment_pending, #comment_error, #no_search_results, #no_search, #dynamic_pages_error { margin: 0 40px 0; } /* サイドナビ */ .side { margin-bottom: 10px; line-height: 1.2; } /* サイドナビリスト */ .side_text { margin: 0px 0px 0; padding: 3px 230px 15px 20px; } .side_feed { } .sidebox { background: url(画像) repeat-y; } サイドバーのタグはここだと思うのですが、もし違うようでしたらご指摘頂きたいです。
- 締切済み
- ブログ
- スタイルシートの記述方法に関して。
スタイルシートで、基本的なデザインは一通り出来ると思っています。 実は今サンプルのスタイルシートを修正しています。 スタイルシートの記述方法に関して、質問があります。 サンプルのスタイルシートの記述方法ですが、要素の記述にて上位の要素を全て記述し、最終的な要素を記載しています。 例として 一番外側の要素を：#wrapper ヘッダー：#header コンテンツ：#content メインコンテンツ：#main サイドコンテンツ：#side とします。 自分の場合であれば、スタイルシート内の記述は div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#header { width: 480px; margin: 0px auto; padding: 0px; } div#content { width: 480px; margin: 0px; padding: 0px; } div#main { float: left; width: 300px; margin: 0px; padding: 0px; } div#side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述していましたが、サンプルでは以下の通りに記述されています。 div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#wrapper #header { width: 480px; margin: 0px auto; padding: 0px; } div#wrapper #content #main { float: left; width: 300px; margin: 0px; padding: 0px; } div#wrapper #content #side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述されています。 上記の記述に、技術的に有利になる点は有るのでしょうか、単に CSS の記述を判りやすくしているだけのように思えます。 上記の記述方法は、一見判りづらいと思いますが、記述している要素が確実に判ると思います。 ただ、その反面 CSS のソースが肥大化します。 上記の記述方法に、他にメリット、デメリットがあるのかアドバイスを頂ければ幸いです。 ちなみに、参考にさせて頂いてる CSS のソースは海外で作られたソースになります。 海外では一般的に使われている記述方法になるのでしょうか。
- ベストアンサー
- CSS
- MacからアップしたCSSがWinで反映されな
こんにちは。現在、Macでホームページを作っています。 その際、CSSでレイアウトやフォント等を設定したのですが、アップロードしたCSSがWindowsでは反映されません。Macではすべてしっかり反映されています。 ブラウザごとの振り分け等、色々と調べて試しましたが変わりませんでした。 どこかおかしなところがあれば指摘、アドバイスの方よろしくお願い致します。 ↓<head></head>内 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>（タイトル）</title> <link rel="stylesheet" type="text/css" href="main.css"> ↓main.css * { margin: 0; padding: 0; } body,table,tr,td { font-size: 10px; font-family: "Times" ""Osaka"; line-height: 160%; text-align: left; } a:link {color: #000000; text-decoration: none; } a:visited {color: #000000; text-decoration: underline; } a:active {color: #000000; text-decoration: underline; } a:hover {color: #000000; text-decoration: none; } #layout { width: 650px; margin-top: 10px; margin-left : auto; margin-right : auto; text-align : center; } .header { margin: 5px 0px 3px; padding: 20px 10px; border: 1px solid #c0c0c0; background-image: url("（画像URL）") } #main { float: left; width: 436px; margin: 10px 14px 0px 0px; } .entry { border: 1px solid #c0c0c0; margin: 0px 0px 14px 0px; padding: 10px 30px; overflow: auto; } .entry_navi { text-align: left; } .entry_title { font-size: 13px; font-family: "Times"; border-bottom: 1px dashed #c0c0c0; color: #000000; } #side { float: right; width: 200px; margin: 10px 0px ; } .pict { margin: 15px 0px; padding: 8px; border: 1px solid #c0c0c0; } h1 { font-size: 20px; font-weight: bolder; font-family: "Times"; margin: 0px 0px 5px 0px; padding: 0px; color: #ffffff; } h1 a, h1 a:link, h1 a:visited, h1 a:active, h1 a:hover { color: #ffffff; text-decoration: none; } .description { font-size: 10px; color: #ffffff; padding-bottom: 30px; } .list { border: 1px solid #c0c0c0; margin: 0px 0px 14px 0px; padding: 10px 20px; } .list_title { font-family: "Times"; font-size: 16PX; font-weight: bolder; color: #000000; border-bottom: 1px dashed #C0C0C0; }
- ベストアンサー
- CSS
- CSS backgroundが反映されません
CSS初心者です。 CSSレイアウトで問題にぶつかりました。 下記CSSをIE6で見るとbodyに書いた 「background-image:url(images/flower.png); 」が反映されません。 IE10では反映されました。 いったい何故でしょうか。。。 調べてみたのですがいまいち分かりませんでした。 よろしくお願いいたします。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ * { margin:0; padding:0; } body { background-image:url(images/flower.png); background-repeat:no-repeat; background-position:bottom; background-attachment:fixed; background: rgb(#00000); color: rgb(76, 76, 76); } body{ text-align:center; } div#container { background-image:url(images/sora.jpg); background-repeat:no-repeat; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; } div#container{ width: 770px; margin: 0 auto; text-align: left; border: 3px solid rgb(228, 225, 219); } .photo{ margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute; } .photo2{ margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute; } p { line-height: 2em; font-size: 0.8em; } .p1{ font-weight: bold; letter-spacing: 0.1em; } .h1{ text-align: center; } h1 span { display:none; } h2 span { display:none; } h3 { line-height: 1.2em; padding-top: 2.4em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } h3 { background-image:url(images/h3.png); background-repeat:no-repeat; background-position:0px 35px; padding-right: 40px; padding-left: 30px; } h2 { line-height: 1.3em; padding-top: 1em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } a{ color:#0000ff; font-style:normal; text-decoration:underline; } a:link { color: rgb(90, 120, 255); font-style:normal; text-decoration:underline; } a:visited { color: rgb(165, 188, 255); text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } acronym { border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; } #intro { padding: 0px 79px 0px 86px; } #participation p { padding-right: 40px; padding-left: 10px; } #intro { padding-top: 50px; } #preamble p { padding-right: 40px; padding-left: 15px; } #explanation p { padding-right: 40px; padding-left: 15px; } #preamble { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #explanation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #participation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #benefits { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #requirements { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #quickSummary p{ padding-right: 40px; padding-left: 10px; } #footer { text-align: center; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; font-size: 0.9em; } #footer a:link { color: rgb(133, 126, 112); } #footer a:visited { color: rgb(133, 126, 112); } #footer a:hover { color: rgb(133, 126, 112); } #footer a:active { color: rgb(133, 126, 112); }
- ベストアンサー
- CSS
- スクロール時サイドバーを左側固定位置に配置の方法
スクロール時サイドバーを左側で固定位置に配置する方法 最近よくみかける、 画面を一定量スクロールした時、ページ途中にあるサイドバーなどを固定位置に配置する方法 を実現させたいと思っています。 で、固定したいサイドバーは左側です。 そして、後述の方法だと可能なのですが、 メイン部分（#main）をfloat:rightからfloat:leftにかえると、 ある程度スクロールしたあとsideとメイン部分のdivが重なってしまいます。 なおまた、ＩＥ１１だと固定すらしません。 とりあえず、わからなくても実現できればいいので、 画面を一定量スクロールさせたあと、左側のサイドバーが固定される方法をお教えいただけないでしょうか？ （ＵＲＬだけでもかまいません） どうも検索しても、右側のサイドバーを固定している例ばかりでして、左側固定を探しています。 よろしくお願い申し上げます。 ＝＝＝＝＝ 以下コード（タブを全角空白４つに変換してあります） ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>画面を一定量スクロールした時、ページ途中にあるサイドバーなどを固定位置に配置する方法 （DEMO）</title> <style> * { margin : 0; padding : 0; } body { color: black; background: gray; } h1 { font-size: 14px; font-weight: bold; margin: 10px; } h3 { font-size: 14px; font-weight: bold; margin-bottom : 10px; padding : 0; } /*********************************************************************/ #side { background: white; border-top: 4px solid black; border-bottom: 4px solid black; color: black; display:inline-block; font-size: 14px; height: 300px; padding: 0px; width: 200px; float:left; } .fixed { position: fixed; top: 10px; float:left; width: 200px;; z-index: 10000; } /*********************************************************************/ #tops { background: white; border: 4px solid black; border-radius: 6px; margin: 10px auto; width: 900px; } #main { background: white; border: 4px solid black; border-radius: 6px; color: black; font-size: 14px; float: right; height: 5000px; margin-right: 10px; margin-bottom: 10px; padding: 10px; width: 540px; } #goal { margin: auto; width: 900px; display: block; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(function($) { var tab = $('#glovalnavi'), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass('fixed'); } else { tab.removeClass('fixed'); } }); }); </script> </head> <body> <div id="tops"> <h1>画面を一定量スクロールした時、ページ途中にあるサイドバーなどを固定位置に配置する方法 （DEMO）</h1> </div> <div id="side"> <h3>side部分</h3> <p> この部分がスクロールされても、残ります。 </p> </div> <div id="main"> <h3>メイン部分</h3> <p> 上下にスクロールしてみてください。<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお</p> </div> <div id="goal"></div> </body> </html>
- 締切済み
- CSS
- So-net blog で記事の行間を変えたい
こんにちわ。 何か記事の一行一行の高さがありすぎて、気持ち悪いと思っています。 CSSのカスタムスキンで 該当しそうなところにline-height: 110%;といれたのですが 行と行の高さはつまりません。 どうすると直すことができますでしょうか？ ちなみに、記事は一文一文をＰタグで囲っています。 /* Articles */ #main { width:540px; overflow:hidden; } .articles { width:498px; padding: 8px 14px; margin-bottom:8px; border:1px solid #cccccc; overflow:hidden; line-height: 110%; } .articles p { line-height:110%; } .articles-title { background:url("/blog/_images/blog/_98a/***/9943895.jpg") no-repeat left center; margin:10px 0 10px 0; padding-bottom:7px; padding-left:22px; border-bottom:1px solid #cccccc; font-size:small; } .articles-body { line-height:110%; } .articles-body p { line-height:110%; } 参照↓ http://blog.so-net.ne.jp/blog-help/css_tag
- ベストアンサー
- ブログ
お礼
ご丁寧に、お返事ありがとうございます。 flexを使ってみることにします。 ありがとうございました。