Q&A
ご回答ありがとうございます
そのスタイルを追加してみると、確かにh2,h3が左端から表示されているのがわかりました
ただ、「真ん中によっているのは、h2要素やh3要素の内容」というのが少し理解できませんでした
少し詳しい解説をいただけないでしょうか？
Progate中級編 道場コースにて
<.message-wrapper>にtext-align:center;を指定すると、画像（見本）のように.message-wrapper内の文字がきちんと真ん中によります
text-alignはブロック要素の中のインライン要素に適用されると聞いたのですが、.message-wrapperの中のh2,h3はブロック要素ですよね 一体何が起こっているのか教えていただきたいです 
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 <!-- ここでFont Awesomeを読み込んでください --> 8 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 9</head> 10<body> 11 <!-- ここにコードを書いていきましょう --> 12 <header> 13 <div class="container"> 14 <div class="header-left"> 15 <img src="https://prog-8.com/images/html/advanced/main_logo.png" class="header-logo"> 16 </div> 17 <div class="heder-right"> 18 <a href="#" class="header-link">ログイン</a> 19 </div> 20 </div> 21 </header> 22 <div class="top-wrapper"> 23 <div class="container"> 24 <h1>LEARN TO CODE.</h1> 25 <h1>LEARN TO BE CREATIVE.</h1> 26 <p>Progateはオンラインプログラミング学習サービスです。</p> 27 <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 28 <div class="btn-wrapper"> 29 <a href="#" class="signup">新規登録はこちら</a> 30 <p>or</p> 31 <a href="#" class="facebook"><span class="fa fa-facebook"></span>Facebookで登録</a> 32 <a href="#" class="twitter"><span class="fa fa-twitter"></span>Twitterで登録</a> 33 </div> 34 </div> 35 </div> 36 37 <div class="lesson-wrapper"> 38 <div class="container"> 39 <div class="lesson-h"> 40 <h2>Learn Where to Get Started!</h2> 41 </div> 42 <div class="lessons"> 43 <div class="lesson"> 44 <img src="https://prog-8.com/images/html/advanced/html.png"> 45 <p class="lesson-name">HTML & CSS</p> 46 <p class="lesson-text">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 47 </div> 48 <div class="lesson"> 49 <img src="https://prog-8.com/images/html/advanced/jQuery.png"> 50 <p class="lesson-name">jQuary</p> 51 <p class="lesson-text">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p> 52 </div> 53 <div class="lesson"> 54 <img src="https://prog-8.com/images/html/advanced/ruby.png"> 55 <p class="lesson-name">Ruby</p> 56 <p class="lesson-text">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> 57 </div> 58 <div class="lesson"> 59 <img src="https://prog-8.com/images/html/advanced/php.png"> 60 <p class="lesson-name">PHP</p> 61 <p class="lesson-text">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> 62 </div> 63 </div> 64 65 66 67 </div> 68 </div> 69 70 <div class="message-wrapper"> 71 <div class="container"> 72 <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2> 73 <h3>Let's learn to code, learn to be creative!</h3> 74 <a href="#" >さっそく開発する</a> 75 </div> 76 </div> 77 78<footer> 79 <div class="container"> 80 <img src="https://prog-8.com/images/html/advanced/footer_logo.png"> 81 <p>Learn to Code, Learn to be Creative.</p> 82</div> 83</footer> 84 85 86</body> 87</html>
CSS
1/* CSSのリセット（消さないでください） */ 2html, body, 3ul, ol, li, 4h1, h2, h3, h4, h5, h6, p, div { 5 margin: 0; 6 padding: 0; 7} 8 9body { 10 font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; 11} 12 13li { 14 list-style: none; 15} 16 17a { 18 text-decoration: none; 19} 20 21.container{width:1170px; padding:0px 15px; margin:auto; } 22 23header{height:65px; background-color:rgba(34,49,52,0.9); position:fixed; top:0px; width:100%; z-index:10;} 24.header-logo{width:124px; margin-top:20px; float:left;} 25.header-link{float:right; color:white; padding-right:25px; padding-left:25px; background-color:rgba(255,255,255,0.3); 26line-height:65px; display:inline-block; transition:all 0.5s; } 27.header-link:hover{background-color:rgba(255,255,255,0.5);} 28 29 30.top-wrapper{padding-top:180px; padding-bottom:100px; background-image:url(https://prog-8.com/images/html/advanced/top.png); 31 background-size:cover; text-align:center; 32} 33.top-wrapper h1{color:white; opacity:0.7; } .top-wrapper p{color:white; opacity:0.7; } 34.top-wrapper h1{font-size:45px; letter-spacing:5px;} 35.btn-wrapper a{color:white; opacity:0.8;} 36.btn-wrapper p{margin-bottom:15px;} 37.signup{background-color:#239b76; padding:8px 24px;display: inline-block; margin-top:30px; margin-bottom:15px; border-radius:4px;} 38.facebook{background-color:#3b5998; padding:8px 24px; display: inline-block; margin-right:10px; border-radius:4px;} 39.twitter{background-color:#55acee; padding:8px 24px; display: inline-block; border-radius:4px;} 40.facebook:hover{opacity:1;} .signup:hover{opacity:1;} .twitter:hover{opacity:1;} 41.btn-wrapper span{margin-right:3px;} 42 43.lesson-wrapper{height:580px; text-align:center; background-color:#f7f7f7;} .lesson-h h2{font-weight:normal; color:#5f5d60; padding-top:80px; padding-bottom:50px;} 44.lesson{float:left; width:25%;} .lesson{position:relative; } 45.lesson-name{position:absolute; top:90px; width:100%; color:white; } .lesson img{padding-bottom:15px;} 46.lesson-text{width:80%; font-size:13px; color:#b3aeb5; display:inline-block;} 47 48.message-wrapper{ padding-bottom:80px; border-bottom:1px solid #eee;} 49.message-wrapper h2{font-weight:normal; color:#5f5d60; padding-top:80px;} 50.message-wrapper h3{padding-bottom:50px;} 51.message-wrapper a{background-color:#5dca88; opacity:0.8; 52color:white; padding:15px 40px; border-radius:4px; box-shadow:0px 7px #1a7940;} 53.message-wrapper a:hover{opacity:1;} .message-wrapper a:active{box-shadow:none; position:relative; top:7px; } 54/* ここからCSSを書いていきましょう */ 55footer img{margin-top:30px; width:124px;} footer p{font-size:12px; color:#b3aeb5; margin-bottom:30px;} 56 57
回答2件
0
ベストアンサー
text-alignはブロック要素の中のインライン要素に適用されると聞いたのですが
違います。text-align自体はブロック要素に適用されて、（単なる文字を含め）その中身の並び方を変えます。
そして、text-alignは継承されますので、「.message-wrapperの中のh2,h3」もtext-align: centerが適用されています。
投稿2020/09/12 10:11
総合スコア146018
0
次のスタイルを追加してみるとわかりますが、h2要素やh3要素は、親要素(ここではcontainerクラスのdiv要素)の左端から表示され、真ん中によったりはしていません。
真ん中によっているのは、h2要素やh3要素の内容ですね。
CSS
1.message-wrapper h2, 2.message-wrapper h3 { 3 width: 50%; 4 border: 1px solid red; 5}
投稿2020/09/12 10:18
総合スコア11990
> ただ、「真ん中によっているのは、h2要素やh3要素の内容」というのが少し理解できませんでした
書いてのとおりです。継承でh2やh3自体がtext-align: centerとして振る舞い、中身のテキストを整列します。
なるほど！containerだけでなくh2やh3にも適用されているんですね
ありがとうございます
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/13 08:39
2020/09/13 08:44
2020/09/13 08:48
2020/09/14 02:52