Q&A
（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
仮のサイトを制作しています
contactの画像の真上にCONTACTの文字を置きたいのですが
左上に来てしまいます。
この場合max-widthを指定するべきなのでしょうか？
該当のソースコード
HTML
1コード 2 <!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="utf8"> 6 <meta name="author" content="saito koki"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <meta name="description" content=""> 9 <meta name="keywords" content="H"> 10 <title></title> 11 <link rel="stylesheet" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> 12 <link href="https://fonts.googleapis.com/css?family=Anton|Gloria+Hallelujah" rel="stylesheet"> 13 <link rel="stylesheet" href="css/style.css" media="all"> 14 <script> 15 (function(d) { 16 var config = { 17 kitId: 'czw4ovy', 18 scriptTimeout: 3000, 19 async: true 20 }, 21 h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) 22 })(document); 23</script> 24</head> 25 26<body> 27 <header class="flexbox"> 28 <h1>garege</h1> 29 <nav class="header-nav"> 30 <ul class="flexbox"> 31 <li> <a href="#home">HOME</a> </li> 32 <li> <a href="#about">About</a> </li> 33 <li> <a href="#works">Works</a> </li> 34 <li> <a href="#price">Price</a> </li> 35 <li> <a href="#contact">Contact</a> </li> 36 </ul> 37 </nav> 38 </header> 39 40 <div class="mv"> 41 <p>〜最高の１台をあなたに〜</p> 42 </div> 43 44 <main> 45 <section id="about"> 46 <h2>代表挨拶</h2> 47 <article class="flexbox"> 48 <img src="img/s2.jpg" alt=""> 49 <p>初めまして。代表のです。 私はこの仕事を通して車の楽しさや便利さを知ってもらいたく日々仕事をしています。現代では若者の車離れや高齢者の暴走運転など問題になっていますが、お客様にあった車を提供していますのでお気軽にご相談下さい。</p> 50 </article> 51 </section> 52 53 <section id="works"> 54 <section id="catch"> 55 <div class="works-image"> 56 <img src="img/s3.jpg" alt=""> 57 </div> 58 59 <div class="works-font"> 60 <h2>車両販売</h2> 61 <p>スポーツカーから一般車まで幅広く販売しております。ご希望の車などあればお気軽にご連絡下さい。</p> 62 </div> 63 </section> 64 65 <section id="catch"> 66 <div class="works-image"> 67 <img src="img/s4.jpg" alt=""> 68 </div> 69 70 <div class="works-font"> 71 <h2>オイル交換</h2> 72 <p>garegeではWAKO`Sや MOTULその他、色々なエンジンオイルを取り揃えています。 エレメントなども多数御座います。</p> 73 </div> 74 </section> 75 76 <section id="catch"> 77 <div class="works-image"> 78 <img src="img/s5.jpg" alt=""> 79 </div> 80 81 <div class="works-font"> 82 <h2>タイヤ交換</h2> 83 <p>garegeでは普通車のタイヤ交換から大手のチェーン店では対応できない引っ張りタイヤなどのタイヤ交換まで可能です。</p> 84 </div> 85 </section> 86 87 <section id="catch"> 88 <div class="works-image"> 89 <img src="img/s6.jpg" alt=""> 90 </div> 91 92 <div class="works-font"> 93 <h2>パーツ取り付け</h2> 94 <p>追加メーターやエアロ類などの車のパーツ取り付けでお悩みの事などあればまずはご相談下さいその他車検なども受付しています。</p> 95 </div> 96 </section> 97 98 </section> 99 100 <section id="price"> 101 <div class="inner"> 102 <h2>PRICE</h2> 103 104 <div class="price-wrap"> 105 <p class="question">オイル・クーラント交換</p> 106 <ul class="answer"> 107 <li>・エンジンオイル交換 1500円</li> 108 <li>・オイルエレメント交換 1000円</li> 109 <li>・デフオイル交換 1500円</li> 110 <li>・ブレーキオイル交換 3000円</li> 111 <li>・クーラント交換 3500円</li> 112 <li></li> 113 </ul> 114 115 <p class="question">タイヤ交換</p> 116 <ul class="answer"> 117 <li>・タイヤ交換 1200円</li> 118 <li>・タイヤ裏組 800円</li> 119 <li>・引っ張りタイヤ 1500円</li> 120 <li>・タイヤバランス 1000円</li> 121 <li>・パンク修理 500円</li> 122 </ul> 123 124 <p class="question">消耗品類交換</p> 125 <ul class="answer"> 126 <li>・ブレーキパッド交換 6000円</li> 127 <li>・ブレーキローター交換 15000円</li> 128 <li>・プラグ交換 1本 500円</li> 129 <li>・クラッチ交換 50000円〜</li> 130 <li>・ベルト交換 20000円〜</li> 131 </ul> 132 133 <p class="question">パーツ取り付け</p> 134 <ul class="answer"> 135 <li>・車高調取り付け 1本 5000円〜 </li> 136 <li>・マフラー取り付け 20000円〜</li> 137 <li>・デフ取り付け 30000円〜</li> 138 <li>・ドライブレコーダー取り付け 5000円〜</li> 139 <li>・レーダー探知機取り付け 5000円〜</li> 140 </ul> 141 </div> 142 </div> 143 144 <section id="post"> 145 <h2>CONTACT</h2> 146 <section id="contact" class="flexbox"> 147 <div class="tel flexbox"> 148 <img src="img/s7.png" alt=""> 149 <p>090-1234-5678</p> 150 </div> 151 152 <div class="line flexbox"> 153 <img src="img/s8.jpeg" alt=""> 154 <img src="img/s9.png" alt=""> 155 </div> 156 </section> 157 </section> 158 159
コード
#contact{ margin: 100px auto; width: 90%; } .tel{ align-items: center; width: 40%; } .line{ width: 40%; } #contact img{ width: 60px; }
PRICEのように左に揃えるようにしたいです
申し訳ございません。
修正しました
こちらの環境では変更／修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか？最近teratailで修正が保存されない事がたまにあるようなので･･･。
ご指導いただいたように更新したのですが反映されていないようです。。
変更できました
まだ変更できてないみたいです。
すいません
使い方が慣れていなくてできているかわかりませんでした
CSSのほうも。コードブロック（マークダウンのcode利用）はファイル毎にまとめてください。
下記質問が参考になるかと。
https://teratail.com/questions/238564
ただ、HTMLも全体提示された方が良いかと思います。
「contactの画像」とは何を指しておられるのでしょう?
#contact の真上(真ん中)であればkei344さんのやり方になりますし
.tel 画像の上など、特定の画像の上なら指定方法が変わりますので ^^;
電話の画像の真上にCONTACTの文字が来るように設定したいです
わかりにくくて申し訳御座いません
HTMLも全体提示された方が良いかと思います。
ここまでしてもらえると「だいぶわかりやすく」なるのですが。
変更しました
ご指導ありがとうございます
回答3件
0
質問への回答と訂正ありがとうございますm(__)m
.flexbox の指定が提示されていませんでしたので
css
1.flexbox {display: flex; justify-content: center;}
という前提にしています。
id="contact" が90%となっていますので
それに合わせて<h2>の位置を計算しています
▼ をcssに追加してください
css
1#post h2 { 2 margin-left: calc(9% - 60px); 3 width: 36%; 4 text-align: center; 5}
これでいけると思います^^
投稿2020/07/04 13:10
総合スコア674
0
こういうことでしょうか。
CSS
1#post > h2 { 2 text-align: center; 3}
投稿2020/07/04 04:22
総合スコア69398
0
拝見しました。
.contactのmarginを0にして、#postのmarginに100pxを指定すると、余白の大きさは統一されるのではないでしょうか。
投稿2020/07/03 19:15
総合スコア130
#post{
margin: 100px auto;
}
#contact{
margin: 0 auto;
これでやって見たのですが真上には来ませんでした
あなたの回答
tips
プレビュー
