Q&A
ソースコードはMarkDownの<code>ブロック内に貼り付けてご提示ください。
後、ソースコードは極力切り取らずに全部載せてください。
(css)
@charset "UTF-8";
html {
font-size: 100%;
}
body {
font-family: "Yu Gothic Medium", "遊ゴシック Medium", YuGothic, "遊ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
line-height: 1.7;
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;
list-style: none;
margin-top: 34px;
}
.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-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;
}
#news {
background-image: url(../images/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", "YuMincho", serif;
font-size: 2rem;
font-weight: normal;
}
.post-title,
.post-cat {
margin-left: 120px;
}
(html)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>WCB Cafe - NEWS</title> <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ"> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link href="https://fonts.googleapis.com/css2?family=Philosopher&display=swap" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link rel="icon" type="image/png" href="images/favicon.png"> </head></html>![イメージ説明]<body> <div id="news" class="big-bg"> <header class="page-header wrapper"> <h1><a href=index.html><img class="logo" src="images/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> </div> <div class="news-contents wrapper"> <article> <header class="post-info"> <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2> <p class="post-date">3/5 <span>2021</span></p> <p class="post-cat">カテゴリー :お店の紹介</p> </header> </article> <aside> </aside> </div> <footer> <div class="wrapper"> <p><small>© 2021 Kanabox</small></p> </div> </footer> </body>
コード
ここに質問の内容を詳しく書いてください。 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 chapter5/c5-06-5/style.cssまで制作中。 <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2> title部分がブラウザーで確認すると文字が改行されてしまいます。 本書のサンプルデータも確認しましたが原因がわからず困っています。 解決策がお分かりになる方ご教示ください。 ### 発生している問題・エラーメッセージ エラーメッセージ なし ### 該当のソースコード (css) .post-title { font-family: "Yu Mincho", "YuMincho", serif; font-size: 2rem; font-weight: normal; } .post-title, .post-cat { margin-left: 120px; } (html) <div class="news-contents wrapper"> <article> <header class="post-info"> <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2> <p class="post-date">3/5 <span>2021</span></p> <p class="post-cat">カテゴリー :お店の紹介</p> </header> </article> <aside> </aside> </div> ### 試したこと 本書のサンプルデータも確認済み ### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。
言い方が悪かったですね。
html,cssで個別にブロックで分けて欲しいのです。
```html
（この中にソース貼り付けてください)
```
(1行空ける)
```css
(ソースコード)
```
ご提示のコードを試してみましたが、問題が再現しませんでした。
ご提示いただいていない部分に原因があると思われます。
もしかして、MacOSとか、環境の問題でしょうか？
「本書のサンプルデータも確認済み」とのことですが、サンプルデータの場合は折り返されない、という意味ですよね？
こちらでも確認してみましたが問題再現出来ませんでしたね。
Lhankor_Mhyさんの仰るような問題があるかも？
Lhankor_Mhyさん
確認したところサンプルデータも折り返しされます。環境の問題かもしれません。
この場合、何をどうすればいいのでしょうか？
不躾な質問で申し訳ありません。。。
K_3578さん
問題検証していただきありがとうございます。
環境の問題が原因かもしれません。。。
そうなんですね。
では、↓これも折り返されていますか？ 当方の環境では折り返されていないように見えます。
http://kawada.sakura.ne.jp/news.html
環境の問題であれば、気にしないことですね。
フォント表示が環境で変わってくるのはどうしようもないです。
Lhankor_Mhyさん
添付して頂いたURLですが、みてみたところ折り返しされていました。。
今程、作ったものを検証いていたところエラーメーセージが出ていました。
多分これは関係なさそうですね????
（Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://unpkg.com/ress/dist/ress.min.css".）
しかし、環境問題であれば気にしないで良いとしれたのでスッキリしました。
貴重な時間を使って回答していただき感謝致します！！
環境の問題である旨書いて自己解決してもらって･･･と思いましたけど解決はしてない
のに解決にして良いのだろうか･･･？
> 多分これは関係なさそうですね
リセットCSSが読み込めていないのは大いに問題があると思いますが、これが原因なら、もっと表示が崩れているはず……
今更ですが、ズームレベルを変更したら折り返しが起きました。
これが原因の可能性もありますね。
K_3578さん
やっぱり解決してないのに解決したと思うのは良くないですよね????
Lhankor_Mhyさん
リセット cssが読み込めていなかったとは気づかなかったです！
至急直します！
ズームレベルですか！
そちらも変更してみます????♀️
Lhankor_Mhyさん、K_3578さん
リセット cssを正しく入れ直したら
折り返しが直りました????
お2人方には感謝しています！
本当にありがとうございました????♀️
そっちが原因でしたか。
ご解決されて何よりです。
お手数ですが、自己解決の処理をお願いします。
自己解決
