- 締切済み
ＣＳＳに詳しい方！
ＨＴＭＬとＣＳＳを使って画像（完成図）のようなページを作ろうとしていますが、どうしても失敗例のようになってしまいます。どうすれば完成図のようになりますか。 失敗１→サイドバーにfloat:left;を設定。 失敗２→サイドバーと本文にfloat:left;を設定。
- NKM_Chitose
- お礼率0% (4/5256)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- DOUGLAS_
- ベストアンサー率74% (397/534)
関係のありそうなＷＥＢページをググって、練習なさってみてください。 ●レイアウトを区切るタグ https: //chot.design/html-css-beginner/5cac8c19c5ec/ ●CSS floatを初心者向けに図で解説 抑えるべき注意点とは？ https: //udemy.benesse.co.jp/development/web/css-float.html ●floatの解除にclearfixを使って、思い通りのレイアウトに！ https: //qiita.com/mariofujisaki/items/2ad1de8432d7249afadc ★この程度でもイケそうです。 <div style="background: red;">ヘッダー</div> <div style="background: blue; width: 70%; float: right;">本文<br>本文</div> <div style="background: green; width: 30%;">サイド</div> <div style="background: yellow; clear: right;">フッター</div>
関連するQ&A
- CSSに関して教えてください。
CSSで左列がサイドバーで右列がメインコンテンツの二段組レイアウトについて質問します。 ●要点 サイドバーには背景色が指定してあり、サイド、メインとも高さが可変(指定なし)とします。メインコンテンツの高さの変動に応じてサイドバーの高さも変化してサイドバーの背景色とメインコンテンツの高さが同じになるように変化させたいのです。 ---------- CSSソース ---------- body { text-align: center } #wrapper { width: 720px; margin: 0 auto; text-align: left; } #content { width: 720px; background: url("../img/content.gif") repeat-y; } #main { float: right; width: 540px; } #sidebar{ float: left; width: 180px; background: blue; } ---------- HTML ---------- <body> <div id="wrapper"> <div id="content"> <div id="main"> ・・・・・・・・・ </div> <div id="sidebar"> ・・・・・・・・・ </div> </div> </div> </body> CSSでcontentに背景画像(サイドバーの幅が青色の画像)を指定してrepeat-yとするとIE6ではメインコンテンツの高さに合せてcontentに指定した画像が繰り返されサイドバーの色がメインコンテンツの高さと揃います。Firefoxでは、メインコンテンツがサイドバーより高くなると揃わなくなります。contentに指定された画像が表示されてないようです。 どのようなことでもいいのでお教えください。手がかりがなく困っています。
- ベストアンサー
- HTML
- ページヘッダー部分のHTML/CSS
独学で勉強中の学生です。 どうしてもできなくて…よろしくお願いします！ ページヘッダー部分1～5（グローバルナビより上）を画像でHTML入れました。 CSSで 全体を inline 1をfloat: 2をmargin-left; 5をfloat: right; 3,4の高さを合わせることができません。 添付画像のような配置にするにはどうしたらよいのでしょうか。 使っているのはDreamweaverです。 よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- CSSで 画像をかさねたい
お世話になります。 CSSで 画像をかさねたいんです。 下になる画像を「背景」にして それで２つを重ねればいいのかと思いましたが、どうもうまくいきません。 CSSソースは .left{ width:182px; background:url(sideback.gif) float:left; } .left-midashi{ width:182px; text-align: center; } ＊「float:left」がはいっているのは、右隣にメインの枠があるからです HTMLは↓ <div class="left"> <div class="left-midashi"><img src="sidemanu-canner.gif"></div> </div> です。 初心者なので凡ミスかもしれませんが、自分ではよくわからなくなってしまいました。。。よろしくおねがいいたします。m(_ _"m)ペコリ
- ベストアンサー
- HTML
- CSSがわかりません！
やりたいことは 一般の画像に「transition: 0.3s;」を適用 hogeクラスの画像に「float: left;、height: 100px;」を適用 です。 CSSには img { transition: 0.3s; } img.hoge { float: left; height: 100px; } と記述しました。 これだと、<div class="hoge"><img （画像）></div> の、（画像）の部分に「float: left;、height: 100px;」が適用されませんでした。 試しに img { float: left; height: 100px; transition: 0.3s; } としてみたところ、すべての画像に float: left;、height: 100px;、transition: 0.3s;が適用されました。 ということは img { transition: 0.3s; } という、書き方がまずかったのでしょうか？ transition: 0.3s;は、すべての画像に適用したかったので あえてクラスを設定することはしませんでしたが この度のfloat: left;、height: 100px;を、一部の画像にクラスを指定し 追加することは可能ですか？
- 締切済み
- CSS
- 【CSS】float:left; を使用した２カラム、本文中でclearすると間が空いてしまう
お世話になります。 左がメニュー（仮称・BOX-A、float:left指定）、右が（仮称・BOX-B）本文、下にフッター（clear: both）…といったページを作成しています。 問題は、本文・BOX-Bにおいて、縦長の画像を使用した場合、文章を画像の右に回りこませたい時があります。 ↓ ↓ ↓ <img src="xxx.jpg" style="float:left; width:100px"> 画像回り込み文章～～～文章 <br style="clear:left"> 通常の文章 ----------------------------------------------------------- しかし、これを行ってしまうと、BOX-Aのfloatも解除されてしまい、BOX-Aの内容（高さ）分、 BOX-Bの『通常の文章』が表示される位置に空間ができてしまうのです。 …以下のURLが、その状態の例です。 http://www.geocities.jp/multi_column/practice/sample/2column2_fixed_liquid_poor.html 上記サイト様の、 http://www.geocities.jp/multi_column/practice/2column2.html#liquid の、ページ半ば…よりやや下に、上記問題点を克服するという 『メインカラム幅可変、サイドバー幅固定 2カラム（ネガティブマージン型）』 の説明が載っているのですが、同じように組んでも上手く行きません…。 本文中（BOX-B）で、floatのclearを行っても支障がなくなるようなCSSの組み方はありませんでしょうか？ 何卒、宜しくお願い致します。
- ベストアンサー
- HTML
- CSSにてfloat:leftを使用して画像を3つ並べたのですが。。
CSSにてfloat:leftを使用して画像を3つ並べたのですがこの3つの画像をセンターによせることができません。 なんでかまったくわかりません（ToT） 教えてくださいｍ（＿＿）ｍ 【HTML】 <div class="box2"><img src="images/sum2.gif"></div> <div class="box3"><img src="images/sum3.gif"></div> <div class="box4"><img src="images/sum4.gif"></div> 【CSS】 .box2{ float:left; width:219px; } .box3{ float:left ; width:156px;} .box4{ float:left ; width:195px; }
- 締切済み
- その他([技術者向] コンピューター)
- CSSでのセンタリングができません。
CSSでのセンタリングができません。 こちらのページを参考にCSSで下記のようにCSSを設定したのですが センタリングされません。設定方法がまずいのでしょうか? それともWEB上で確認せずローカルで確認していることに問題があるのでしょうか? 宜しくお願い致します。 (CSSの記述はヘッダーに入れておりHTMLはBODYに記述しております) http://desperadoes.biz/style/dan/ +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ * { margin : 0 ; padding : 0 ; } body { width : 100% ; float: center; } #my_body { position : relative ; margin-left:auto ; margin-right:auto; } #my_main { width : 950px ; } #my_header { width : 950px ; } #my_navigation { float : left ; width : 190px ; } #my_contents { float : left ; width : 750px ; } #my_contentsM { float : left ; width : 550px ; } #my_contentsS { float : right ; width : 190px ; } #my_contentsB { float : left ; width : 750px ; } HTML部分は <body> <div id="my_body"> <div id="my_header"> </div> <div id="my_main"> <div id="my_navigation"> </div> <div id="my_contents"> <div id="my_contentsM"> </div> <div id="my_contentsS"> </div> <div id="my_contentsB"> </div> </div> </div> </div> </body>
- ベストアンサー
- ブログ
- CSSのfloatについて
ホームページを作成していて、CSSが効かなくて困っています。 ２カラムで左側にメニュー 右側にメインのコンテンツを作成しております。 メインのコンテンツは floatでrightに設定していて その中にさらに ２つの内容を入れようと （メインコンテンツ内に左側に画像で右側に画像の詳細をいれたい） floatタグでleftとrightに設定したのですが CSSが効かなくて 左側に画像が配置され その下に画像の詳細文が配置されてしまい 全部左側に配置されてしまいました。 色々と試したみたのですが やっぱりCSSが効きませんでした。 すいません誰かお分かりになられましたら 教えてください。宜しくお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- プロバイダごとのCSS設定比較を知りたい
CSSはブログプロバイダーごとに違うと聞きました。 記事ページやサイドバーの幅設定が各社違うってことでしょう？ 概要（超簡単）でいいのですが、設定を比較した資料ってありますか。例えばseesaaブログはサイドバー幅を○○に設定しているが、FC2ブログは△△にサイドバー幅を設定している、とかです。 最大の理由はブログによって、サイドバーが落ちるということです。 ●●社ブログの本文記事幅やサイドバー幅設定は××になっている、などです。
- 締切済み
- ブログ
