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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

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

Q&A

3回答

1476閲覧

h2タグの位置をcontactの真上に配置したい

kanpanerura

総合スコア4

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

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

0グッド

0クリップ

投稿2020/07/03 18:45

編集2020/07/04 09:59

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
仮のサイトを制作しています
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>〜最高の1台をあなたに〜</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のように左に揃えるようにしたいです

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

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

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

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

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

kei344

2020/07/03 18:49

(質問文は編集できます)質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
kanpanerura

2020/07/03 18:54

申し訳ございません。 修正しました
kei344

2020/07/03 18:54

こちらの環境では変更/修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか?最近teratailで修正が保存されない事がたまにあるようなので・・・。
kanpanerura

2020/07/03 18:58

ご指導いただいたように更新したのですが反映されていないようです。。
Nippun

2020/07/03 21:22

まだ変更できてないみたいです。
kanpanerura

2020/07/03 21:36

すいません 使い方が慣れていなくてできているかわかりませんでした
m.ts10806

2020/07/03 23:19

CSSのほうも。コードブロック(マークダウンのcode利用)はファイル毎にまとめてください。 下記質問が参考になるかと。 https://teratail.com/questions/238564 ただ、HTMLも全体提示された方が良いかと思います。
-millmill-

2020/07/04 07:59

「contactの画像」とは何を指しておられるのでしょう? #contact の真上(真ん中)であればkei344さんのやり方になりますし .tel 画像の上など、特定の画像の上なら指定方法が変わりますので ^^;
kanpanerura

2020/07/04 09:54

電話の画像の真上にCONTACTの文字が来るように設定したいです わかりにくくて申し訳御座いません
m.ts10806

2020/07/04 09:56 編集

HTMLも全体提示された方が良いかと思います。 ここまでしてもらえると「だいぶわかりやすく」なるのですが。
kanpanerura

2020/07/04 09:59

変更しました ご指導ありがとうございます
guest

回答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

-millmill-

総合スコア676

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

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

0

こういうことでしょうか。

CSS

1#post > h2 { 2 text-align: center; 3}

投稿2020/07/04 04:22

kei344

総合スコア69606

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

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

0

拝見しました。

.contactのmarginを0にして、#postのmarginに100pxを指定すると、余白の大きさは統一されるのではないでしょうか。

投稿2020/07/03 19:15

ToyoshimaHi

総合スコア130

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

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

kanpanerura

2020/07/03 19:20

#post{ margin: 100px auto; } #contact{ margin: 0 auto; これでやって見たのですが真上には来ませんでした
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問