HTMLのtext-alignが反映されません。

<!doctype html>

<html lang="ja">
    <head>
      <meta chaset="UTF-8">
      <title>WCB Cafe-MENU</title>
      <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet"href="https://unpkg.com/ress/dist/ress.min.css">
      <link href="css/style.css" rel="stylesheet">
    </head>

<body>
<div id="menu" class="big-bg">
  <header class="page-header wrapper">
   <h1><a href="index.html"><img class="logo" src="image/logo.svg"alt="WCBカフェホーム"></a></h1>
   <nav>
     <ul class="main-nav">
       <li><a href="news.html">news</a></li>
       <li><a href="menu.html">Menu</a></li>
       <li><a href="contact.html">contact</a></li>
     </ul>
   </nav>
</header>
<div class="menu-content wrapper">
   <h2 class="page-title">Menu</h2>
   <p>
     体に優しい自然食を提供する、WCB　CAFE。無添加の食材を利用したメニューが特徴です。
     おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒してください。
   </p>
 </div><!-- /.menu-content -->
</div><!-- /#menu -->


<footer>
   <div class="wrapper">
      <p><small>&copy;2019 Manabox</small></p>
    </div>
  </footer>
</body>
</html>
```css**ボールドテキスト**

@charset "UTF-8";
html{
font-size: 100%;
}
body{
font-family:"Yu Gothic Medium";
color: #432;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
}
.logo{
width:210px;
margin-top:14px;
}
.main-nav{
display: flex;
font-size:1.25rem;
text-transform: uppercase;
margin-top: 34px;
list-style: none;
}
.main-nav li{
margin-left: 36px;
}
.main-nav a {
color:#432;
}
.main-nav a:hover{
color:#0bd;
}
.page-header{
display: flex;
justify-content:space-between;
}
.wrapper{
max-width:1100px
margin:0 auto;
padding: 0 4%;
}
/home
----------------------/
.home-content{
text-align: center;
margin-top: 10%;
}
.home-content p{
font-size:1.125rem;
margin: 10px 0 42px;
}
.page-title{
font-size:5rem;
font-family:'Philosopher',serif;
text-transform:uppercase;
font-weight:normal;
}
.button{
font-size:1.375rem;
background: #0bd;
color:#fff;
border-radius: 5px;
padding: 18px 32px;
}
.button:hover{
background: #0090aa;
}
.big-bg{
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
#home{
background-image: url(../image/main-bg.jpg);
min-height:100vh;
}
#news{
background-image: url(../image/news-bg.jpg);
height:270px;
margin-bottom:40px;
}
#news .page-title{
text-align: center;
}
footer{
background:#432;
text-align:center;
padding:26px 0;
}
footer p{
color:#fff;
font-size:0.875rem;
}
article{
width:74%;
}
aside{
width:22%;
}
.news-contents{
display:flex;
justify-content: space-between;
margin-bottom:50px;
}
.post-info{
position:relative;
padding-top:4px;
margin-bottom:40px;
}
.post-date{
background:#0bd;
border-radius:50%;
color:#fff;
width:100px;
height:100px;
font-size:1.625rem;
text-align:center;
position: absolute;
top:0;
padding-top:10px;
}
.post-date span{
font-size:1rem;
border-top:1px rgba(255,255,255,.5)solid ;
padding-top:6px;
display: block;
width:60%;
margin:0 auto;
}
.post-title{
font-family:"Yu Mincho",serif;
font-size:2rem;
font-weight:normal;
}
.post-title,
.post-cat{
margin-left:120px;
}
article img{
margin-bottom:20px;
}
article p{
margin-bottom:1rem;
}
.sub-title{
font-size:1.375rem;
padding:0 8px 8px;
border-bottom:2px #0bd solid;
font-weight:normal;
}
aside p{
padding: 12px 10px;
}
.sub-menu{
margin-bottom:60px;
list-style:none;
}
.sub-menu li{
border-bottom:1px #ddd solid;
}
.sub-menu a{
color:#432;
padding:10px;
display:block;
}
.sub-menu a:hover{
color:#0bd;
}
@media(max-width:600px) {
h1{
color:#0Bd;
}
}
/モバイル版
--------------------------/
@media(max-width:600px) {
.page-title{
font-size:2.5rem;
}
/header/
.main-nav{
font-size:1rem;
margin-top:10PX;
}
.main-nav li{
margin:0 20px;
}
.home-content{
margin-top:20%;
}
.page-header{
flex-direction:column;
align-items: center;
}
.news-contents{
flex-direction: column;
}
article,
aside{
width:100%;
}
#news page-title{
margin-top:30px;
}
aside{
margin-top: 60px;
}
.post-info{
margin-bottom: 30px;
}
.post-date{
width:70px;
height:70px;
font-size:1rem;
}
.post-date span{
font-size:0.875rem;
padding-top:2px;
}
.post-title{
font-size:1.375rem;
}
.post-cat{
font-size:0.875rem;
margin-top:10px;
}
.post-title,
.post-cat{
margin-left: 80px;
}
.menu-content{
margin-top:20%;
}
}
article{
width:60%;
order:2;
}
aside{
width:22%;
order:3;
}
.ad{
order:1;
}

/* Menu -------------------------------------- */
#menu {
background-image: url(../image/menu-bg.jpg);
min-height: 100vh;
}
.menu-content {
max-width:560px;
margin-top: 10%;
}
.menu-content .page-title{
text-align:center;
}
.menu-content p {
font-size: 1.125rem;
margin: 10px 0 0;
}

```html
<!doctype html>

<html lang="ja">
    <head>
      <meta chaset="UTF-8">
      <title>WCB Cafe-NEWS</title>
      <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet"href="https://unpkg.com/ress/dist/ress.min.css">
      <link href="css/style.css" rel="stylesheet">
    </head>

<body>
<div id="news" class="big-bg">
  <header class="page-header wrapper">
   <h1><a href="index.html"><img class="logo" src="image/logo.svg"alt="WCBカフェホーム"></a></h1>
   <nav>
     <ul class="main-nav">
       <li><a href="news.html">news</a></li>
       <li><a href="menu.html">Menu</a></li>
       <li><a href="contact.html">contact</a></li>
     </ul>
   </nav>
</header>
<div class="wrapper">
   <h2 class="page-title">News</h2>
</div><!-- /.wrapper-->
</div><!-- /#home-->
  <div class="news-contents wrapper">
  <article>
    <header class="post-info">
      <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2>
      <p class="post-date">3/30<span>2019</span></p>
      <p class="post-cat">カテゴリー：お店の紹介</p>
    </header>
    <img src="image/wall.jpg" alt="店内の様子">
    <p>
      体に優しい自然食を提供する、WCB　CAFE。無添加の食材を利用したメニューが特徴です。
      おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒してください。
      体に優しい自然食を提供する、WCB　CAFE。無添加の食材を利用したメニューが特徴です。
      おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒してください。
    </p>
   <p>
     体に優しい自然食を提供する、WCB　CAFE。無添加の食材を利用したメニューが特徴です。
     おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒してください。
     体に優しい自然食を提供する、WCB　CAFE。無添加の食材を利用したメニューが特徴です。
     おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒してください。
     体に優しい自然食を提供する、WCB　CAFE。無添加の食材を利用したメニューが特徴です。
     おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒してください。
   </p>
   <p>体に優しい自然食を提供する、WCB　CAFE。</p>
  　</article>

<aside>
    <h3 class="sub-title">カテゴリー</h3>
    <ul class="sub-menu">
      <li><a href="#">お店の紹介</a></li>
      <li><a href="#">期間限定メニュー</a></li>
      <li><a href="#">イベント</a></li>
      <li><a href="#">お客様との会話</a></li>
    </ul>
  <h3 class="sub-title">このお店について</h3>
  <p>
    体に優しい自然食を提供する、WCB　CAFE。無添加の食材を利用したメニューが特徴です。
    おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒してください。
  </p>
</aside>
<div class="ad">
  <img src="image/banner.jpg" alt="新メニュー登場">
</div>
</div><!-- /.news-contents-->
<footer>
   <div class="wrapper">
      <p><small>&copy;2019 Manabox</small></p>
    </div>
  </footer>
</body>
</html>

html
1<!doctype html>
2
3<html lang="ja">
4    <head>
5      <meta chaset="UTF-8">
6      <title>WCB Cafe</title>
7      <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
8      <meta name="viewport" content="width=device-width, initial-scale=1">
9      <link rel="stylesheet"href="https://unpkg.com/ress/dist/ress.min.css">
10      <link href="css/style.css" rel="stylesheet">
11    </head>
12
13<body>
14<div id="home" class="big-bg">
15  <header class="page-header wrapper">
16   <h1><a href="index.html"><img class="logo" src="image/logo.svg"alt="WCBカフェホーム"></a></h1>
17   <nav>
18     <ul class="main-nav">
19       <li><a href="news.html">news</a></li>
20       <li><a href="menu.html">Menu</a></li>
21       <li><a href="contact.html">contact</a></li>
22     </ul>
23   </nav>
24</header>
25<div class="home-content wrapper">
26  <h2 class="page-title">We'll Make Your Day</h2>
27  <p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ。</p>
28  <a class="button" href="menu.html">メニューを見る</a>
29 </div><!-- /.home-content -->
30<div><!-- /#home-->
31</body>
32</html>

K_3578

2021/07/28 00:18 編集

ソースコードはMarkDownのcodeで提示しましょう。 ```言語名(html等) <!DOCTYPE HTML> <html lang="ja"> (中略) </html> ``` という形で前後をバッククォートで囲むとコードブロックになります。参考質問: https://teratail.com/questions/238564 同様の方法でcssも提示してください。

nob_0112

2021/07/28 02:43

すみません。こちらです。

Lhankor_Mhy

2021/07/28 02:45

text-align が5か所ありましたが、全てについて効いていないということですか？

nob_0112

2021/07/28 02:47

.menu-contentと#menuの.page-titleが効いていません。

K_3578

2021/07/28 02:49

text-align:centerが効いてないんですよね？

nob_0112

2021/07/28 02:49

はい。そうです。

K_3578

2021/07/28 02:52

回答追記しました。

行動規範の内容に同意します

回答1件

ベストアンサー

css提示されてないのでなんとも言えないけど現状気になったので言えば

<meta chaset="UTF-8">
chaset属性はないのでcharsetのtypoと思う。

<div id="home" class="big-bg">
この<div>は閉じられてない。

これが原因とは思わないけどとりあえず指摘として回答しておきます

恐らく単純なタイプミスですね。

css
1.wrapper{
2  max-width:1100px
3  margin:0 auto;  
4  padding: 0 4%;
5}

で、max-width:1100pxにセミコロン(;)がないです。こちらで付けたらtext-alignが適用されました。

投稿2021/07/28 00:26

編集2021/07/28 02:51

K_3578

総合スコア1282

nob_0112

2021/07/28 03:03

ありがとうございます! 確認してみます。

K_3578

2021/07/28 04:26

これで効かないようなら提示されていないcssでtext-align:centerが上書きされている、とかですかね。

nob_0112

2021/07/28 10:56

セミコロン入れたら解決しました。ありがとうございました!

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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

HTMLのtext-alignが反映されません。

関連した質問