Q&A
関連するHTMLと、PC用・スマホ用CSSがあると、回答がつきやすくなるかと思います。
HTML5 &css3を勉強しています。下のコードにmargin-left: -200px;が出てくるのですが意味を教えてください。
あと左のサイドバーside1がfloat:right;になっているのはなぜでしょうか。
デザインは左にサイドバー、右にsectionの中のmain画面ひょうじになっています。
sectionでmain画面は右にfloatするのはわかります。
main画面には左に200pxの空白をとっているのもわかっています。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Herb Kitchen</title> <meta name="viewport" content="width=device-width"> <link href="css/15-3-3M.css" rel="stylesheet" media="only screen and (min-width:600px) and (max-width:900px)"> </head> <body> <div class="pagebody"> <div class="header"> <h1><a href="#">Herb Kitchen</a></h1> </div> <div class="nav"> <ul> <li><a href="#">News</a></li> <li id="now"><a href="#">Food</a></li> <li><a href="#">Drink</a></li> <li><a href="#">Goods</a></li> <li><a href="#">Column</a></li> </ul> </div> <div class="section"> <div class="main"> <h2>オリジナルレシピ</h2> <p>ハーブを使ったカンタンで美味しいオリジナル料理のレシピをご紹介します。ハーブを使ったカンタンで美味しいオリジナル料理のレシピをご紹介します。</p> <div class="article"> <h3>タコのカルパッチョ</h3> <p><img src="images/salad-M.jpg" alt="タコのカルパッチョの画像">ハーブは西洋料理で使われるものばかりではありません。葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。ハーブは西洋料理で使われるものばかりではありません。ハーブは西洋料理で使われるものばかりではありません。<br> 葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。ハーブは西洋料理で使われるものばかりではありません。葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。ハーブは西洋料理で使われるものばかりではありません。</p> </div> <div class="article"> <h3>しらすのペペロンチーノ</h3> <p><img src="images/pasta-M.jpg" alt="しらすのペペロンチーノの画像">ハーブは西洋料理で使われるものばかりではありません。葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。ハーブは西洋料理で使われるものばかりではありません。葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。<br> 葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。ハーブは西洋料理で使われるものばかりではありません。葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。 </p> </div> </div> </div> <div class="aside side1"> <h2>最新記事</h2> <ul> <li><a href="#">バジルに虫がついたら</a></li> <li><a href="#">風邪に効くハーブ</a></li> <li><a href="#">ハーブフェア開催!</a></li> <li><a href="#">ローズヒップティー</a></li> </ul> <h2>人気レシピ</h2> <ul> <li><a href="#">しらすのペペロンチーノ</a></li> <li><a href="#">ハーブピザ</a></li> <li><a href="#">夏野菜のジェノベーゼ</a></li> <li><a href="#">タコのカルパッチョ</a></li> <li><a href="#">エスニックサラダ</a></li> </ul> <h2>人気商品</h2> <ul> <li><a href="#">イタリアンハーブmix</a></li> <li><a href="#">オーガニックミント</a></li> <li><a href="#">電動グラインダー</a></li> <li><a href="#">フレッシュハーブセット</a></li> <li><a href="#">エスニックmix</a></li> </ul> <h2>今週のお勧め</h2> <ul> <li><a href="#">カモミールティー</a></li> <li><a href="#">バジルペースト</a></li> <li><a href="#">ハーブ入りアイマスク</a></li> <li><a href="#">ラベンダーオイル</a></li> <li><a href="#">ドライローズマリー</a></li> </ul> </div> <div class="aside side2"> <div class="ad"><a href="#"><img src="images/ad1.jpg" alt=""></a></div> <div class="ad"><a href="#"><img src="images/ad2.jpg" alt=""></a></div> </div><div class="footer"> <address> Copy Right <a href="#">Herb Kitchen</a> Co.,Ltd. Since 2004 </address> </div> </div> </body> </html> //css/css.15-3-3m @charset "utf-8"; /*タブレット用CSS*/ @import url("base.css"); .header , .nav { padding:0 10px; } .section { float:right; margin-left:-200px; width:100%; } .main { margin-left:200px; padding-left:10px; padding-right:10px; } .side1 { float:right; width:180px; padding-left:10px; padding-right:10px; } /* マージンには負の値を指定することもできます。 マージンに負の値を指定することで、 複数の領域を重ねて表示させることが可能ですが、重なり順や重ね位置が ブラウザによって異なるため、注意が必要です。 */
回答1件
0
ベストアンサー
左に200px引っ張っています。
「ネガティブマージン」でググってみてください。
https://try-m.co.jp/blog/web-create/354/
HTMLやキャプチャなどあったほうが、一応もっと具体的に答えられるかと思いますが。
投稿2019/02/03 03:36
総合スコア3404
あとこれは「HTML5」じゃなくて「CSS」の問題なので、タグ変えておいてください〜
ありがとうございます。ネット見てもよくわからないですが、ｙ方向に上に4pxずらしているのはわからました。勉強します。
あなたの回答
tips
プレビュー
