うーん・・・

webサイト作りが上手くいきません

締切済

質問者：bosukete
質問日時：2019/10/04 05:33
回答数：1件

webサイトを作りたくて、まず下の画像のような感じにしたいんですけど、案の定というか、上手くいきません。

↓HTMLとCSSをこう書きました。

●HTML

<body>

<header>
<img class="logo" src="logo.svg" alt="ロゴ">
</header>

<div class="title-img">
<h1 class="page-title">サイト名</h1>
</div>

<nav>
<ul class="main-nav">
<li><a href="page1.html">ページ１</a></li>
<li><a href="page2.html">ページ２</a></li>
<li><a href="page3.html">ページ３</a></li>
</ul>
</nav>

</body>

●CSS

.logo {
width: 210px;
margin-top: 14px;
}

.title-img {
background-image: url(../main-bg.jpg);
}

.title-img .page-title {
text-align: center;
}

.main-nav {
display: flex;
font-size: 1.25rem;
text-transform: uppercase;
margin-top: 34px;
list-style: none;
}

.main-nav {
display: flex;
justify-content: center;
align-items: center;
}

・できた事
logo.svgの表示
サイト名を中央に配置
ページ〇を横に並べて、お互いに幅を持たせる
ページ〇をクリックしてリンク先に移動する

・できなかった事
logo.svgの縮小
main-bg.jpgの表示
ページ〇を中央に配置（左端に寄ってしまう）

どうやったらいいのでしょうか。
入門書やネットの情報を参考にしているのですが、上手くできたことは資料に書かれていることをそのまま書いただけのもので、自分なりにやろうとしたことは一つも上手くいきませんでした。
宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： naokita
回答日時：2019/10/04 06:32

body{ max-width: 960px; margin:0 auto;}

.logo {width: 120px;}
.title-img { height: 280px; background-image: url(../main-bg.jpg); background-size: cover;}

● CSSを追加/変更すれば良いです。

・数値は適当に変える
・main-bg.jpgの表示は、ロゴのように画像を配置すれば良い
ロゴは、logo.svgが正解のようだけど、../logo.svgではないよね？何故？　この関係のようにmain-bg.jpgをディレクトリ（フォルダ）に画像を配置する事
配置の間違えか、ファイル名の間違いか、どちらかって事です。

この程度までは、基本的な事であって、このままならまだまだWebサイトぽい感じに綺麗にはならず、WordやPDFぽい感じかな。