asked 5年 ago
お世話になっております。
只今、本を利用させていただいて勉強させていただいております。
何度確認してもつまずいてしまっているのでご教授願います。
index.html about.htmlのcssは反映されるのですが、タイトルにも記載したとおりmenu.html access.html contact.htmlのcssが反映されません。
とりあえずmenu.htmlのhtmlとcssを添付しますので原因を教えていただけませんでしょうか？
↓menu.htmlのhtml
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>メニュー | KUJIRA Cafe</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<div class=”wrapper”>
<!– ヘッダー –>
<header class=”header”>
<h1 class=”logo”><a href=”index.html”><img src=”images/logo.png” alt=”KUJIRA Cafe”></a></h1>
<nav class=”nav”>
<ul>
<li><a href=”index.html”>ホーム</a></li>
<li><a href=”about.html”>店舗案内</a></li>
<li><a href=”access.html”>アクセス</a></li>
<li><a href=”menu.html”>メニュー</a></li>
<li><a href=”contact.html”>お問い合わせ</a></li>
</ul>
</nav>
</header>
<!– ヘッダー ここまで –>
<!– メイン –>
<main>
<h2>メニュー</h2>
<div class=”menu-block”>
<div class=”menu-item”>
<div class=”menu-photo”>
<img src=”images/menu-photo1.jpg” alt=””>
</div>
<div class=”menu-text”>
<h3>カシスとオレンジのジュース</h3>
<p>リキュールを使ったカクテルでおなじみのカシスは、ポリフェノールやビタミンが豊富なベリー系のフルーツです。オレンジとともにジューサーにかけて、爽やかなドリンクに仕上げました。</p>
<p>¥480-</p>
</div>
</div>
<div class=”menu-item”>
<div class=”menu-photo”>
<img src=”images/menu-photo2.jpg” alt=””>
</div>
<div class=”menu-text”>
<h3>ナッツのタルト</h3>
<p>ピーカンナッツにアーモンド、くるみ、ヘーゼルナッツ、パンプキンシード。5種類のナッツを贅沢にトッピングした当店の定番タルトです。黒糖を使用したコクのある甘味は、コーヒーのお供にぴったりです。</p>
<p>¥550-</p>
</div>
</div>
<div class=”menu-item”>
<div class=”menu-photo”>
<img src=”images/menu-photo3.jpg” alt=””>
</div>
<div class=”menu-text”>
<h3>太陽プラムのタルト</h3>
<p>今月の旬のタルトはこちら。山梨産のプラム「太陽」を使用しています。太陽は、完熟すると酸味が抜けて、驚くほど甘くなります。クリームチーズを混ぜ込んだフィリングとも相性抜群。この時期だけの味、ぜひお試しください。</p>
<p>¥600-</p>
</div>
</div>
</div>
</main>
<!– メイン ここまで –>
<!– フッター –>
<footer class=”footer”>
<p>©Copyright KUJIRA Cafe. All rights reserved.</p>
</footer>
<!–フッター ここまで –>
</div>
</body>
</html>
↓menu.htmlのcss
/* menu.html */
.menu-item {
display: flex;
border-bottom: 1px dashed #bec2c7;
padding: 20px 8px;
}
.menu-photo {
margin-right: 16px;
flex: 1 1 auto;
}
.menu-text {
flex: 0 0 336px;
}
answered 5年 ago
回答がないので自分で調べた結果、こちらをcssに記載してみると解決しました。
display:-webkit-box;
display:-moz-box;
display:box;
display:-webkit-flex;
お言葉ですが、本の通りにやってもうまくいかないのはいかがなものかと思います。
狩野 祐東 Staff answered 5年 ago
現在出張中で詳しくソースコードを確認できないのですが（著者本人が回答しているためお時間がかかることはご了承ください）、サンプルデータはダウンロードされましたか？
その中に完成したサイトのデータがあります。そのサイトが正しく表示されていれば、本書の内容は間違っていません。もう一度、バリデーター（本書に記載があります）を使って、ご自分でお作りになったソースコードを確認することをおすすめします。
どこでお調べになったのかわかりませんが、そのCSSはかなり古いもので、標準仕様でなく、現在は推奨されていません。おばたさんがものすごく古いブラウザを使っているならともかく、調べたそのCSSで表示が直るとはちょっと考えられません。何か別の原因があるはずです。