Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
XDからのコーティングに挑戦しています。
実際に行うと、言語の文法理解だけでなく、それぞれのツールの使い方にも苦戦しています。そこで、今回はXDからのコーティングについての質問です。
paddingが機能せずにいます。原因を教えていただけると幸いです。
発生している問題・エラーメッセージ
ロゴの位置が思ったように動きません
該当のソースコード
HTML
1ソースコード 2<!DOCTYPE html> 3<html lang="en"> 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Logo</title> 9 <link rel="stylesheet" href="coding-biginner.css"> 10</head> 11<body> 12 <header class="page-header"> 13 <h1>Logo</h1> 14 <div class="main-nav"> 15 <li><a href="home.html">Home</a></li> 16 <li><a href="about.html">About</a></li> 17 <li><a href="contact.html">Contact</a></li> 18 </div> 19 20 </header> 21</body> 22</html> 23 24 25```CSS 26ソースコード 27/*共通事項CSS----------------*/ 28html{ 29 font-size: 100%; 30 } 31body{ 32 font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; 33 34 } 35 36 a{ 37 text-decoration: none; 38 } 39 img{ 40 max-width: 100%; 41 } 42 43.page-header{ 44 background-color: #58A9EF; 45 width: 1366px; 46 height: 80px; 47} 48.page-header h1{ 49 color: #FFFFFF; 50 width: 82px; 51 height: 31px; 52 padding: 26px, 1077px, 23px, 27px; 53 font-weight: arial, bold; 54 line-height: 32px; 55 font-size: 28px; 56 text-align: center; 57 58} 59 60### 試したこと 61XDからのコーティングを行っているため、 62どの位置にあるか調べました。 63また、復習のために改めてpaddingとmarginの意味を調べ、理解に努めました。 64 65### 補足情報（FW/ツールのバージョンなど） 66 67イメージ図は、こちらです。 68noteで公開されているしょーごさんの教材 です。 69https://note.com/samuraibrass/n/n793ab571a88e#jrBdy
>paddingとmarginの意味を調べ、
意味より「正しい使い方」が必要なのでは。
paddingが機能しない、という所まで原因を絞り込んだのであれば、まずは「paddingにエラー（誤字脱字、文法間違い、全角入力などのミス）がないか」という視点で見直すクセをつけることです。「間違い探し」みたいな感じ。
回答1件
0
ベストアンサー
入門書等を買って、一通り体系だてた知識を得ることをお勧めします。
CSS
1/* padding: 26px, 1077px, 23px, 27px; 2 ↓ ↓ ↓ */ 3 padding: 26px 1077px 23px 27px;
【padding - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/padding
投稿2021/03/09 15:11
総合スコア69596
あなたの回答
tips
プレビュー
