質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1196閲覧

cssで余白を設定したのに余白が生まれない

Yuriplllll

総合スコア29

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/02/13 02:27

cssで余白を設定してリストタグを使ってバナーを作ろうとしたのですがcssで設定した余白が無視されてしまいます。2カラムレイアウトで右と左に30pxの余白を設定しています。
背景色を使ってアクアの色をつけてcssで設定したdiv#left自体は30pxの余白が右側に空いています。
しかしリストタグを使ってバナーの箱を設定するとバナーの箱が余白なしで作られてしまいます。
リストタグのcssにmarginやpaddingを使ってみましたが余白を空けることはできませんでした。

cssやhtml以外の知識が必要でしょうか?
上がhtmlで下がcssです。

よろしくお願いいたします。

<!-- leftここから --> <div id="left"> <ul> <li><a href="#">お電話でのご予約はこちら</a></li> <li><a href="#">院長のブログ</a></li> <li><a href="#">お客様の声</a></li> </ul> </div> <!-- leftここまで --> <!-- rightここから --> <div id="right"></div> <!-- rightここまで --> <div class="clearfix"></div>
/* ======================================== レフト ========================================= */ div#left{ width: 280px; height: 300px; background-color: aqua; float: left; margin-right: 30px; } div#left ul{ margin-right: 30px; } div#left ul li{ width: 280px; height: 50px; background-color: #f5fbff; margin-bottom: 10px; border: 1px solid #63abd4; } div#left ul li a{ font-size: 16px; font-weight: bold; color: #555555; text-decoration: none; line-height: 50px; background: url(images/icon_tel.png) no-repeat 15px center; display: block; padding-left: 47px; } /* ======================================== ライト ========================================= */ div#right{ width: 650px; height: 300px; background-color: gray; float: left; } /* ======================================== フロート解除 ========================================= */ div.clearfix{ clear: both; } コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

そもそもliタグがleftの中に収まってなくてはみだしているので

・ulにpadding:0px;を指定する または

・liタグのwidth指定をやめる

のどちらか一方でだいたい納めることができます。

これでliタグはleftにギチギチで収まってrightとの間隔は30pxになりますが
やりたいことはこれであっていますか?

もしそうでなくてleftの中でさらに余白が欲しいなら上記の二つを両方することになるか、
もしくはleftの幅を広げることになると思います。

投稿2019/02/13 03:03

user14

総合スコア125

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yuriplllll

2019/02/13 13:14

ありがとうございます。勉強になりました。今後の参考にいたします。
guest

0

ベストアンサー

各要素にはデフォルトでマージンやパディング等設定されています。それを「リセット」する必要があります。

また、コンテンツ・パディング・ボーダーのサイズの取扱い方をbox-sizingで統一した方が良いかと思います。どのようなものかは検索してみてください。

以下のCSSを追加してみてください。

CSS

1ul { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5} 6 7li { 8 list-style: none; 9 box-sizing: border-box; 10}

投稿2019/02/13 02:53

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yuriplllll

2019/02/13 13:13

回答ありがとうございました。cssを追加したら修正ができました。またなにかあったら質問させていただくかもしれません。よろしくお願いします。
yoshinavi

2019/02/14 01:36

「CSSのリセット」は、レイアウトに必ず関わってきますので、どれをどのようにするのかは、デザインに寄りますので、いろいろと試されてみてください。 解決されて何よりです。 (^^)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問