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

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

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

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

CSS

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

Q&A

解決済

1回答

739閲覧

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

nob_0112

総合スコア5

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/07/28 00:13

編集2021/07/28 02:45
<!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>

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

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

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

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

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

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

回答追記しました。
guest

回答1

0

ベストアンサー

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問