Q&A
（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
また、CSSライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）
前提・実現したいこと
HTML,CSSのコーディングを行い、レシピサイトを作成しています。出力された時の画像
画像のh2にあたる”本場イタリアのカルボナーラの秘密”及び、pにあたる”テキストテキストテキストテキスト...”の部分に余白ができてしまいます。検証を行うと画像のようにmargin-rightの余白である可能性は考えられるのですが、ボックスモデルを見るとmargin-rightの設定がされていません。これらの情報で解決方法があれば教えてください。求めている出力の画像
cssライブラリ
normalize
skeleton.css
該当のソースコード
HTML ファイル名 column-list.html
ソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <!-- Basic Page Needs 5 –––––––––––––––––––––––––––––––––––––––––––––––––– --> 6 <meta charset="utf-8"> 7 <title>Cooking Labo</title> 8 <meta name="description" content=""> 9 <meta name="author" content=""> 10 <meta name="viewport" content="width=device-width, initial-scale=1"> 11 12<!-- CSS 13 –––––––––––––––––––––––––––––––––––––––––––––––––– --> 14 <link rel="stylesheet" href="css/normalize.css"> 15 <link rel="stylesheet" href="css/skeleton.css"> 16 <link rel="stylesheet" href="css/style.css"> 17 18<!-- jQuery --> 19 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 20 21<!-- Js 22 –––––––––––––––––––––––––––––––––––––––––––––––––– --> 23 <script src="cooking.js"></script> 24 </head> 25 <body> 26 <header> 27 <div id="header_in" class="container"> 28 <div class="row"> 29 <div class="u-max-full-width three columns"> 30 <div id="sp_logo"> 31 <a href="index.html"><img class="u-max-full-width" src="images/logo.jpg" alt="logo"></a> 32 </div> 33 <!--sp_logo--> 34 <div id="pc_logo"> 35 <a href="index.html"><img class="u-max-full-width" src="images/logo.jpg" alt="logo"></a> 36 </div> 37 <!--pc_logo--> 38 </div> 39 <div class="navi"> 40 <div class="sp_navi u-max-full-width"> 41 <ul class="sp_icon"> 42 <li><a href="#"><img class="u-max-full-width" src="images/twitter.jpg" alt="twitter"></a></li> 43 <li><a href="#"><img class="u-max-full-width" src="images/instagram.jpg" alt="instagram"></a></li> 44 <li><a href="#"><img class="u-max-full-width" src="images/note.jpg" alt="note"></a></li> 45 <li><a href="#"><img id="sp_navi_btn" class="u-max-full-width" src="images/humberger_list.jpg" alt="メニュー"></a></li> 46 </ul> 47 <ul class="sp_navi_li"> 48 <li><a href="#">レシピトップ</a></li> 49 <li><a href="#">レシピを探す</a></li> 50 <li><a href="#">料理の基本</a></li> 51 <li><a href="#">コラム</a></li> 52 </ul> 53 </div> 54 <!-- sp_navi --> 55 <div class="pc_navi"> 56 <div id="search_inner"> 57 <img src="images/search.jpg" alt="検索バー"> 58 </div> 59 <!--検索バー--> 60 <div class="pc_icon"> 61 <ul> 62 <li><a href="#"><img class="u-max-full-width" src="images/twitter.jpg" alt="twitter"></a></li> 63 <li><a href="#"><img class="u-max-full-width" src="images/instagram.jpg" alt="instagram"></a></li> 64 <li><a href="#"><img class="u-max-full-width" src="images/note.jpg" alt="note"></a></li> 65 </ul> 66 </div> 67 <div class="clearfix"></div> 68 <!--sns--> 69 <div class="pc_navi_box"> 70 <ul class="pc_navi_li"> 71 <li><a href="#">レシピトップ</a></li> 72 <li><a href="#">レシピを探す</a></li> 73 <li><a href="#">料理の基本</a></li> 74 <li><a href="#">コラム</a></li> 75 </ul> 76 </div> 77 </div> 78 <!-- pc_navi --> 79 </div> 80 </div> 81 <!-- row --> 82 </div> 83 <ul class="breadcrumb clearfix"> 84 <li><a href="index.html">レシピトップ</a></li> 85 <li><span>/</span></li> 86 <li><a href="#">コラム一覧</a></li> 87 </ul> 88 <!-- header_in --> 89 </header> 90 <div class="contents"> 91 <div id="japanese_cover"> 92 <h1><img class="u-max-full-width clearfix" src="images/column_cover.jpg" alt="コラムカバー"></h1> 93 </div> 94 <div class="container"> 95 <div class="row"> 96 <div class="twelve columns"> 97 <p class="column_text">料理の操作を行う理由を科学的に説明するコラムです。各国の食文化についても書くことがあります。</p> 98 </div> 99 <div class="nine columns"> 100 <div class="column_box"> 101 <img class="u-max-full-width" src="images/rome.jpg" alt="ローマの風景"> 102 <div class="columntext"> 103 <h2>本場イタリアのカルボナーラの秘密</h2> 104 <p>テキストテキストテキストテキストテキストテキストテキスト</p> 105 </div> 106 </div> 107 </div> 108 </div> 109 </div> 110 </div> 111 <footer> 112 <p> 113 <small>copyright© SHUNSUKE TAKAGI All rights reserved</small> 114 </p> 115 </footer> 116 </body> 117</html>
**css ファイル名：style.css 長いので該当するページに適応したcssのみ示します。
css
1 2/*column-list*/ 3 .column_text{ 4 font-size: 30px; 5 padding-left: 5%; 6 } 7 .columntext{ 8 float: right; 9 width: 60%; 10 margin: 0; 11 } 12 .column_box{ 13 background-color: #f8f8f8; 14 padding: 2%; 15 border-radius: 3%; 16 } 17 .column_box img{ 18 width: 38%; 19 } 20 .column_box h2{ 21 font-size: 24px; 22 width: 60%; 23 text-align: center; 24 margin: 0; 25 } 26 .column_box p{ 27 font-size: 24px; 28 width: 60%; 29 } 30 .column_boxtext{ 31 float: right; 32 width: 60%; 33 } 34
試したこと
・検証ツールで余白の原因の確認
・margin: 0;にしてリセットする。
・編集後、再読み込み
回答ありがとうございました。追記を行いましたが、
→CSSライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）
こちらの部分は使っているcssライブラリのリンクを追記するということでよろしかったでしょうか？
間違えていたら申し訳ございません。
> cssライブラリのリンクを追記
それで大丈夫です。
CSSがほとんどありませんが、提示されたコードだけで問題が再現できるのでしょうか。
自分で記述したstyle.cssが文字数超過で表示できないです。
問題が再現できていれば良いです。
あと、teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）
回答2件
0
ベストアンサー
画像を見た感じここ。
CSS
1 .column_box h2{ 2 font-size: 24px; 3 /* width: 60%; *//* これを消す */ 4 text-align: center; 5 margin: 0; 6 } 7 .column_box p{ 8 font-size: 24px; 9 /* width: 60%; *//* これを消す */ 10 } 11```**動くサンプル：**[https://jsfiddle.net/L8u7toqv/1/](https://jsfiddle.net/L8u7toqv/1/)
投稿2020/06/20 04:46
総合スコア69583
0
まあ全然ページのレイアウトが再現できてないのでアレなんですが、2箇所からwidth: 60%;を削除して、
CSS
1.column_box h2{ 2 font-size: 24px; 3 text-align: center; 4 margin: 0; 5} 6.column_box p{ 7 font-size: 24px; 8}
じゃないですかね。<div class="column_box">...</div>の内部の60%しか使わないから右に空きがでるのでは。
投稿2020/06/20 04:45
総合スコア11990
あなたの回答
tips
プレビュー
