Q&A
どの部分ですか？
前提・実現したいこと
lp模写をしています。
cssでmarginが効かないので教えてください。
現在PAS-POLのトップページ(https://pas-pol.jp/)の模写をしているのですが,以下の部分でmarginがうまく効かないので教えてください。
HTML
1コード 2<!DOCTYPE html> 3<html> 4 <head> 5 <link rel="stylesheet" href="stylesheet.css"> 6 <meta charset="utf-8"> 7 <title>PAS-POL</title> 8 </head> 9 <body> 10 <header> 11 <div class="header-container"> 12 <div class="header-left"> 13 <img class="logo" src="./img/siteLogo-pc@2x.png"> 14 </div> 15 <div class="header-right"> 16 <ul> 17 <li> 18 <a href="#">TOP</a> 19 </li> 20 <li> 21 <a href="#">PRODUCT</a> 22 </li> 23 <li> 24 <a href="#">ABOUT</a> 25 </li> 26 <li> 27 <a href="#">NEWS</a> 28 </li> 29 <li> 30 <a href="#">CONTACT</a> 31 </li> 32 </ul> 33 </div> 34 </div> 35 </header> 36 <!-- ここからmessage --> 37 <div class="message"> 38 <div class="message-title"> 39 <h1 class="title-text">旅に出よう。</h1> 40 </div> 41 <div class="message-sentence"> 42 <p> 43 僕たちが作りたいのは 44 <br /> 45 持っているだけで旅に出たくなるモノ。 46 <br /> 47 持っているだけでわくわくするモノ。 48 </p> 49 <p> 50 それは新しい時代の “パスポート” 51 <br /> 52 僕たちが作るものは、 53 <br /> 54 そんな、存在でありたい。 55 </p> 56 <p> 57 そして、人と人が繋がる 58 <br /> 59 こんな時代だからこそ、 60 <br /> 61 僕たちは、みんなでひとつのモノを 62 <br /> 63 作ることを追求したい。 64 </p> 65 <p> 66 <img src="./img/concept-siteLogo@2x.png" / class="siteLogo"> 67 </p> 68 <p> 69 それは、自分と世界を繋げる 70 <br /> 71 旅のモノづくりブランド 72 </p> 73 </div> 74 </div>
CSS
1コード 2body { 3 margin: 0; 4} 5 6a { 7 text-decoration: none; 8} 9 10li { 11 list-style: none; 12} 13/* ここからheader */ 14header { 15 width: 100%; 16 height: 900px; 17 color: white; 18 background-image: url(./img/main_visual_7-0x0.jpg); 19} 20.header-container { 21 width: 100%; 22 height: 122px; 23} 24.header-left { 25 margin-top: 50px; 26 margin-left: 7%; 27 float: left; 28} 29.header-left img { 30 width: 266px; 31 height: 72px; 32} 33.header-right { 34 float: right; 35 margin-top: 75px; 36 margin-right: 7%; 37} 38 39.header-right li { 40 float: right; 41 margin-left: 40px; 42} 43 44/* ここからmessage */ 45.message { 46 background-color: #f6f6f6; 47 padding: 250px 0px; 48} 49 50.title-text { 51 font-size: 44px; 52 font-weight: normal; 53 text-align: center; 54} 55 56.message-sentence { 57 width 50% 58 margin: 0 auto; 59} 60 61.siteLogo { 62 width: 211px; 63 height: 54px; 64 margin: 35px auto; 65 66}
申し訳ありません。書いてたと思ったら表示されてませんでした。
class="message-sentence"の部分全てを中央に揃えたいのですが、その場合cssをどのように書けばいいのかを知りたいです。
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
回答2件
0
こちらは message-sentence が中央にレイアウトできない問題でお間違いないですか？
その場合は以下のcssの一部記述が抜けていることが原因です。
widthのあとの :
50%のあとの ;
css
1.message-sentence { 2 width 50% 3 margin: 0 auto; 4}
投稿2019/07/22 12:42
総合スコア74
0
ベストアンサー
以下ではどうですか？
CSS
1.message-sentence { 2 width 50% 3 margin: 0 auto; 4 text-align: center; /* ← 追加 */ 5} 6
↓修正
CSS
1.message-sentence { 2 width: 370px; 3 margin: 0 auto; 4} 5
投稿2019/07/22 12:43
編集2019/07/22 12:53総合スコア3523
text-alignだと確かに中央には揃うのですが、お手本のサイトのように最初の文字が縦に揃った状態で中央に寄せることができませんでした。
スミマセン。よく参考先を見ていなかったです。
まず、全体の幅を決め、その中で、文字位置を揃える必要があります。
参考先に揃えるなら「text-align: center; /* ← 追加 */」を削除し、
「width 50%」
↓
「width: 370px」にしてみてください。
できました！
ありがとうございます。paddingとmarginについてもっと勉強します！
これは、PCを基準にした場合のみですので、レスポンシブを前提にすると、指定方法が変わります。
一度には、難しいかと思いますので、ひとつひとつクリアしていけば良いかと思います。
あなたの回答
tips
プレビュー
