タグのつけ方や属性の数

前提・実現したいこと

簡単なwebサイトの模写をしています。僕のコードのclass属性の数は多すぎるでしょうか？また、タグのつけ方が曖昧で、spanタグを多用しているのですがこれは使えわない方がいいんでしょうか？divタグ,pタグだと次の文との間に空白ができてしまい使いづらいなと感じています。

発生している問題・エラーメッセージ

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>エンジニアになろう</title>
6    <meta name="description" content="最短でエンジニアになる方法">
7    <meta name="viewport" content="width=device-width,initial-scale=1">
8
9    <link ref="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
10    <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
11    <link href="css/styles.css" rel="stylesheet">
12  </head>
13
14  <body>
15    <header class="header">
16      <span class="days">30DAYSトライアル</span>
17
18      <ul class="ur">
19        <li class="co">デイトラとは</li>
20        <li class="co">コース一覧</li>
21        <li class="co">お問い合わせ</li>
22      </ul>
23    </header>
24
25    
26    <h1 class="home">
27      <img class="logo">
28      <div class="exp">
29        <span class="s1">1日1題30日で</span>
30        <br><span class="s2">プロのWebエンジニアになろう！</span></br>
31       <div class="line">
32        <br><span class="s3">毎日設定された課題をこなすだけ！未経験から</span></br>
33        <br><span class="s4">30日でプログラミングスキルが身につきます。</span></br>
34       </div>  
35      </div>
36    </h1>
37
38   <div class="whole">
39    <h2 class="deitora">
40      <span>デイトラとは</span>
41    </h2>
42    <div class="yoko">
43      <img class="pic" src="images/デイトラ/img/about.png" alt="実際のコースの写真です。" >
44     <div class="ex">
45       <br><span>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学</span></br>
46       <br><span>習アプリです。毎日設定された課題をこなしていくだけで、未経</span></br>
47       <br><span>験から30日でプログラミングスキルが身につきます。</span></br>
48       <br><span>1日一第30日でプロにWebエンジニアを目指しましょう！</span></br>
49      </div>
50    </div>
51  </div>
52 
53  <div class="course-all">
54    <h2 class="course">コース一覧</h2>
55    <div class="picc">
56      <div class="lett1">
57        <img src="images/デイトラ/img/web_first.png" class="pic1">
58        <br><span class="let1">HTML/ CSS/ Bootstrap</span></br>
59      </div>
60      <div>
61        <img src="images/デイトラ/img/web_second.png" class="pic2">
62        <br><span class="let2">HTML/ CSS/ JavaScript/ jQuery</span></br>
63      </div>
64      <div>
65        <img src="images/デイトラ/img/web_third.png" class="pic3">
66        <br><span class="let3">PHP/ WordPress</span></br>
67      </div>
68    </div>
69  </div>
70
71  <div class="ques">
72    <h2 class="que">お問い合わせ</h2>
73  </div>
74  
75  <div class="fin">
76    <span class="let">さあ今日から30日間を始めよう！</span>
77    <br><input type="email" placeholder="メールアドレス" size="60" style="height:40px;" class="email"></br>
78  </div>
79   
80
81
82
83
84    
85  </body>
86</html>
87        
88

試したこと

参考書やネットで3日間ほど調べた。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

 毎日設定された課題をこなすだけ！未経験から
上記は間違いです。 は「開始タグと閉じタグで囲う」タイプのタグではありません。

参考URL:
https://developer.mozilla.org/ja/docs/Web/HTML/Element/br

僕のコードのclass属性の数は多すぎるでしょうか？

数について、違和感はありません。きれいな方だと思います！

また、タグのつけ方が曖昧で、spanタグを多用しているのですがこれは使えわない方がいいんでしょうか？

には、それほど違和感はないのですが、<section>やは使ったほうがいいと思います。

HTML
1  <section class="whole"><!-- こちらはdivでなくsectionにしたほうがよさそうです。 -->
2    <h2 class="deitora">
3      <span>デイトラとは</span>
4    </h2>
5    <div class="yoko">
6      <img class="pic" src="images/デイトラ/img/about.png" alt="実際のコースの写真です。" >
7      
8      <!-- ↓こちらは<p>タグのほうがよさそうです。 -->
9      <p class="ex">
10       デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。<br>
11       1日一第30日でプロにWebエンジニアを目指しましょう！
12      </p>
13    </div>
14  </section>

以下のパーツについては、画像の下部に文字を表示したい意図だと思われます。

HTML
1      <div>
2        <img src="images/デイトラ/img/web_second.png" class="pic2">
3        <br><span class="let2">HTML/ CSS/ JavaScript/ jQuery</span></br>
4      </div>

こちらは以下のように記述したほうがいいと考えます。

HTML
1      <div class="xxxx xxxx2"><!-- この要素には何かしらクラスをしていたほうが便利です。xxxxはダミーです。 -->
2        <img src="images/デイトラ/img/web_second.png" class="pic"><!-- 親要素に1、2、3、といった数字を指定しているため、子要素には1、2、3...の数字は不要 -->
3        <span class="let">HTML/ CSS/ JavaScript/ jQuery</span><!--  -->
4      </div>

もしくは

HTML
1      <figure class="xxxx xxxx2">
2        <img src="images/デイトラ/img/web_second.png" class="pic">
3        <figcaption class="let">HTML/ CSS/ JavaScript/ jQuery</figcaption>
4      </figure>

1つの方法ですが、CSS側には以下のように指定します。

CSS
1.pic {
2  /* 縦並びにしたい画像や、前後のテキストには`display: block;`を指定することをおすすめします。 */
3  display: block;
4}
5
6/* 画像とテキストの縦並びとは関係がないですが、クラスの使い方としての例です。 */
7.xxxx {
8  /* 「画像とテキストのセット」同士の余白など、共通で指定したい記述 */
9}
10.xxxx2 .pic {
11  /* 2番目の要素の画像にだけなにか特殊なことを指定したい場合の記述 */
12}

別件として、
まず以下の文章の区切り方には (デザイナーとして) 強い違和感があります。

HTML
1<span>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学</span><br>
2<span>習アプリです。毎日設定された課題をこなしていくだけで、未経</span><br>
3<span>験から30日でプログラミングスキルが身につきます。</span><br>
4<span>1日一第30日でプロにWebエンジニアを目指しましょう！</span>

「学」と「習」、「未経」と「験」が改行で隔てられてしまっているのは、デザイン観点でいうと致し方なく、そうなってしまっているのであり、特にコーディングの知識がないデザイナーの視点だと「コーディングの技量不足」と受け取られかねないシチュエーションです。

その「コーディングの技量不足」の状態の見た目を模写する際に、無理やり などで再現するのはよくないと考えます。.wholeや.yokoなどにwidth、paddingなどを指定して横幅を調整し、その結果文末が「プログラミング学」で (やむなく) 途切れてしまっている、というソースコードのほうがいいです。

そのため私なら、例えば以下のようにコーディングします。(は不要かもしれません。)

HTML
1<p>
2  <span>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。</span><br>
3  <span>1日一第30日でプロにWebエンジニアを目指しましょう！</span>
4</p>

投稿2020/05/28 09:41

編集2020/05/28 10:31