Q&A
コードは画像ではなくテキストで質問文に挿入してください。
自分で書いてみたCSSもテキストで質問に挿入してください。
HTML/CSSを学習中です。
今回、書籍を見ながら同じようにコードを書いているのですが、書籍通りにならず困っています。
添付したHTMLコードは書籍と全く同じ状態です。
まだCSSには何も書いていない状態でブラウザに表示するとリストマーカーが表示されるのですが書籍では表示されていません。
リストマーカーを非表示にするには、CSSに「list-style-type: none;」と書けばできる事は学習済です。
ですが、書籍のCSSコードにはlist-styleの表記はありません。
仕方がないので、自分でCSSに書こうと思ったのですが、ulやli・aに書いてみても一向に非表示になりません。
このコードの場合にリストマーカーを非表示にするには、どのように書けば良いでしょうか？
※追記※
リストマーカーだけではなく、CSSのコードが何ひとつ反映されていないようです。
【index.html】
<!doctype html> <html lang="ja"> <head> <meta cherset="utf-8"> <title>WCB Cafe</title> <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ"> <link rel="stylesheet" hres="https://unpkg.com/ress/dist/ress.min.css"> <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <header class="page-header"> <h1><a href="index.html"><img class="logo" src="./images-rogo/WCB CAFE.png" 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> </body> </html>【style.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;
margin-top: 34px;
list-style: none;
}
.main-nav a {
color: #432;
}
.main-nav a:hover {
color:#0bd;
}
回答1件
0
ベストアンサー
<link href="css/style.css" rel="stylesheet">
index.html と同じディレクトリに css サブディレクトリを作って、その中に style.css を置いてください。
または、index.html と style.css を同じディレクトリに置いて、href属性を href="style.css" のように変更してください。
ulやli・aに書いてみても一向に非表示になりません。
li に list-style-type: none で合ってます。
投稿2021/08/02 14:52
総合スコア21695
あなたの回答
tips
プレビュー
