html css ホームページ作成練習

実現したいこと

下記画像のようなホームページを作成したいです。
大まかで構わないので、どのようにレイアウトしたら、画像のようなイメージになるのか、ご教授いただきたいです。

発生している問題・分からないこと

現在、下記のようにコードを入力しているのですが、
レイアウトが画像のイメージのような状態にならなくて困っています。

また、画像の挿入のコードを下記のように入力しているのですが、
<div-class="logo"><img src="logo_name.ing"></div-class>
画像が加わってこないのは、画像のパスがそもそも違うからなのか、コードがそもそも違うのかご教授いただきたいです。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title></title>
6  <link rel="stylesheet" type="text/css" href="base.css">
7</head>
8<body>
9  <header>
10    <div-class="logo"><img src="logo_name.ing"></div-class>
11    <nav>
12        <ul>
13            <li><a href="#vision">VISION</a></li>
14            <li><a href="#service">SERVICE</a></li>
15            <li><a href="#company">COMPANY</a></li>
16        </ul>
17    </nav>
18</header>
19
20<main>
21    <section id="vision">
22        <h2>VISION</h2>
23        <ul>
24            <li>私たちは情報を持ってあらゆるニーズに対応していきます。</li>
25            <li>努力を怠らない事によりやりたいことを追求し続けます。</li>
26            <li>最大限のパフォーマンスを発揮し効果を出し続け特異な効果を生み出します。</li>
27        </ul>
28    </section>
29    
30    <section id="service">
31        <h2>SERVICE</h2>
32        <div class="services">
33            <div class="service-item">
34                <img src="3_2/images/outsourcing.jpg" >
35                <p>あらゆる要望を踏まえおいてプロフェッショナル集団が最終的な環境変化に対応。</p>
36            </div>
37            <div class="service-item">
38                <img src="service2.jpg" alt="Service 2">
39                <p>JavaやPHP、オープン系開発からネイティブアプリ、デザインやWebディレクションなど、幅広い領域に対応しております。</p>
40            </div>
41            <div class="service-item">
42                <img src="service3.jpg" alt="Service 3">
43                <p>専門分野に特化したエージェントがお仕事をご紹介します。</p>
44            </div>
45        </div>
46    </section>
47    
48    <section id="company">
49        <h2>COMPANY</h2>
50        <p>会社名　株式会社LiNew</p>
51        <p>代表　西本弘昌</p>
52        <p>資本金　500万円</p>
53        <p>本社住所　東京都港区芝2-27-13芝尾島ビル3F</p>
54    </section>
55</main>
56<footer>
57    <p>Copyright © 2020 LiNew Inc. All Rights Reserved.</p>
58</footer>
59
60</div>
61</body>
62</html>
63

css
1body {
2    font-family: Arial, sans-serif;
3    margin: 0;
4    padding: 0;
5    background-color: #f2f2f2;
6}
7
8header {
9    background-color: #279b8f;
10    color: white;
11    padding: 10px 0;
12    display: flex;
13    justify-content: space-between;
14    align-items: center;
15}
16
17header .logo {
18    font-size: 24px;
19    margin-left: 20px;
20}
21
22header nav ul {
23    list-style: none;
24    display: flex;
25    margin-right: 20px;
26}
27
28header nav ul li {
29    margin: 0 15px;
30}
31
32header nav ul li a {
33    color: white;
34    text-decoration: none;
35    font-weight: bold;
36}
37
38main {
39    padding: 20px;
40    max-width: 1200px;
41    margin: auto;
42}
43
44section {
45    margin-bottom: 40px;
46      }
47
48section h2 {
49    background-color: #004d4d;
50    color: white;
51    padding: 10px;
52    margin-bottom: 20px;
53}
54
55#vision ul {
56    list-style: none;
57    padding-left: 0;
58}
59
60#vision ul li {
61    background-color: white;
62    padding: 10px;
63    margin-bottom: 10px;
64    border-left: 5px solid #004d4d;
65}
66
67.services {
68    display: flex;
69    justify-content: space-between;
70}
71
72.service-item {
73    background-color: white;
74    padding: 10px;
75    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
76    width: 30%;
77}
78
79.service-item img {
80    width: 100%;
81    height: auto;
82}
83
84#company {
85    background-color: white;
86    padding: 20px;
87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
88}
89
90footer {
91    background-color: #004d4d;
92    color: white;
93    text-align: center;
94    padding: 10px 0;
95    position: relative;
96    width: 100%;
97    bottom: 0;
98}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

chromeでレイアウト、画像挿入について調べ、いくつかのコードを試しました。
gridを用いて、やってみたりしたのですが、なかなかイメージしているレイアウトになりません。

補足

こちらの画像がイメージ画像です。

スクリーンショット 2024-06-18 21.36.04
こちらが現段階で表示されているサイトです。

pecchan

2024/06/18 12:07

>画像共に上手く加わりません。 >大まかで構わないので何をどうしたいのか正確にお伝えしないと誰もアドバイスしようがないです

退会済みユーザー

2024/06/18 12:23 編集

質問の意図が分からないので、もう少し詳しくお願いします。 > レイアウト、画像共に上手く加わりません。 - 「レイアウトが加わらない」とは、どの部分が参考サイトのように配置できないのでしょうか？ - 「画像が加わらない」とは、どの画像が表示されないのでしょうか？もしくは、思った通りに配置できないのでしょうか？

Shinnosuke0128

2024/06/18 12:40

コメントありがとうございます。質問を修正したのでご確認よろしくお願いいたします。

Shinnosuke0128

2024/06/18 12:42

https://codepen.io/sftovdra-the-vuer/pen/MWdQjbW 現状のコードだとこちらのようなサイトになってしまいます。

退会済みユーザー

2024/06/18 12:48

【画像が表示されない問題について】 `<div-class="logo"><img src="logo_name.ing"></div-class>`は、 `<div class="logo"><img src="logo_name.png"></div>`とするべきではないでしょうか？ - divとclassの間に余計なハイフンが入っている（divの閉じタグも同様） - 画像の拡張子がingになっているご確認ください。

退会済みユーザー

2024/06/18 12:51

【レイアウトについて】具体的にどの部分という訳ではなく、「ページのすべてを添付画像と同じようするにはどうしたらいいか？」ということでしょうか？

Shinnosuke0128

2024/06/18 13:00

kitaizumi506様ご回答ありがとうございます。画像挿入のコード入力変えてみましたが、やはり画像の挿入がされないので、パスが間違っているという認識で合っていますか？レイアウトについてそうです。意図の読み取りにくい質問になってしまい、申し訳ございません。よろしくお願いいたします。

退会済みユーザー

2024/06/18 13:11

> パスが間違っているという認識で合っていますか？今わかっている情報からでは、パスが間違っている可能性が高いです。 htmlファイルや画像ファイルなどの、ファイル名やフォルダ構成などを教えていただけたらアドバイスできるかもしれません。（スクリーンショットでもいいです） > レイアウトについて「ページのすべてをサンプル通りにするにはどうすればいいか？」などはここで質問するべきことではないかもしれないですね。「代わりにページを作成してください」とほとんど同じなので。ポイントを絞ってできないことを質問していただけたらお答えできます。例）サンプル画像のようにヘッダーのナビゲーションを画面中央に寄せる方法を教えてください。

meg_

2024/06/18 16:34

> 画像挿入のコード入力変えてみましたが、やはり画像の挿入がされないので、パスが間違っているという認識で合っていますか？何かしらのエラーが出力されていませんか？（ブラウザの開発者ツールで確認した場合）

Shinnosuke0128

2024/06/19 13:12

ご回答ありがとうございます。絶対パスというのを調べてたことで、無事画像の挿入はでいるようになりました。レイアウトに関しては、まだできていないので、試しながら学習を進めていこうと思います。

行動規範の内容に同意します

回答1件

HTML Live Standardではdiv-classタグは定義されておりません。
おそらく<div class="logo"></div>と書くべきところを、誤って<div-class="logo"></div-class>としてしまったのが原因かと思われます。

<div>タグ(というかすべてのタグ)に対して有効な属性の一つとしてclassが存在しており、それぞれの属性は (スペース)で区切られています。

投稿2024/06/25 07:13