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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

964閲覧

text-alignの使える場合について

syo--

総合スコア28

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/12 10:00

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

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

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

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

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

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

guest

回答2

0

ベストアンサー

text-alignはブロック要素の中のインライン要素に適用されると聞いたのですが

違います。text-align自体はブロック要素に適用されて、(単なる文字を含め)その中身の並び方を変えます。

そして、text-align継承されますので、「.message-wrapperの中のh2,h3」もtext-align: centerが適用されています。

投稿2020/09/12 10:11

maisumakun

総合スコア145121

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

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

syo--

2020/09/13 08:39

ご回答ありがとうございます 中身がインライン要素でなくても中身の並び方を 変えられるということでしょうか?
maisumakun

2020/09/13 08:44

> 中身がインライン要素でなくても中身の並び方を 変えられるということでしょうか? 中身の「インライン要素や単なる文字」に適用されます。
maisumakun

2020/09/13 08:48

×「.message-wrapperに適用されたtext-align:centerがh2やh3の配置を変えている」 ○「text-align:centerは.message-wrapperから中身のh2やh3へ継承され、それぞれの要素の中身を整列している」
syo--

2020/09/14 02:52

ありがとうございます!ようやく理解できました!
guest

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

Daregada

総合スコア11990

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

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

syo--

2020/09/13 08:38

ご回答ありがとうございます そのスタイルを追加してみると、確かにh2,h3が左端から表示されているのがわかりました ただ、「真ん中によっているのは、h2要素やh3要素の内容」というのが少し理解できませんでした 少し詳しい解説をいただけないでしょうか?
maisumakun

2020/09/13 08:46

> ただ、「真ん中によっているのは、h2要素やh3要素の内容」というのが少し理解できませんでした 書いてのとおりです。継承でh2やh3自体がtext-align: centerとして振る舞い、中身のテキストを整列します。
syo--

2020/09/14 02:50

なるほど!containerだけでなくh2やh3にも適用されているんですね ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問