こんにちは、先日progateさんを卒業し、
初めてサイトの模写をデイトラさんで配布されているものでトライしてみました。
すごく時間もかかり、コードも見ずらいし、このときのコードはこれでいいのか？と不安になり
もっともっとスマートに書けるのではないかと、出来たという達成感がまるでありません....。

ご教示よろしくお願いします。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <link rel="stylesheet" type="text/css" href="style.css">
8</head>
9<body>
10    <header>
11        <div class="header-logo">
12            <p>30DAYSトライアル</p>
13        </div>
14
15        <div class="header-list">
16            <ul>
17                <li>デイトラとは</li>
18                <li>コース一覧</li>
19                <li>お問い合わせ</li>
20            </ul>
21        </div>
22    </header>
23
24    <div class="top-img">
25    </div>
26
27    <div class="contents-wrapper">
28        <h2>デイトラとは</h2>
29        <div class="contents-deitora">
30            <img src="about.png" alt="">
31            <p>デイトラとは、無料で・迷わず・美しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。１日１個30日でプロのWebエンジニアを目指しましょう！</p>
32        </div>
33        <h2>コース一覧</h2>
34        <ul class="contents-course">
35            <li><img src="web_first.png" alt=""><p class="p-txt">HTML / CSS / Bootstrap</p></li>
36            <li class="li-center"><img src="web_second.png" alt=""><p class="p-txt">HTML / CSS / JavaScript / jQuery</p></li>
37            <li><img src="web_third.png" alt=""><p class="p-txt">PHP / WordPress</p></li>
38        </ul>
39        <h2>お問い合わせ</h2>
40        <div class="contents-form">
41            <p>さぁ今日から30日間を始めよう！</p>
42            <input type="text" placeholder="  メールアドレス">
43            <div class="form-btn">
44                <a>無料ではじめる</a>
45            </div>
46        </div>
47    </div>
48
49    <footer>
50        <p>fhhgdusjhshjfsi</p>
51    </footer>
52
53</body>
54</html>

CSS
1header{
2    margin: 0 auto;
3    width: 960px;
4    height: 60px;
5}
6
7.header-logo {
8    float: left;
9    font-weight: bold;
10}
11
12.header-list {
13    float: right;
14    font-weight: bold;
15}
16
17.header-list ul {
18    display: flex;
19    list-style: none;
20}
21
22.header-list li {
23    padding: 0 15px;
24}
25
26.top-img {
27    height: 450px;
28    background-image: url("main-vsual.png");
29    background-size: cover;
30}
31
32.contents-wrapper {
33    text-align: center;
34    margin: 0 auto;
35    width: 960px;
36}
37
38.contents-deitora {
39    display: flex;
40}
41
42.contents-deitora p {
43    font-weight: bold;
44}
45
46.contents-deitora img {
47    width: 50%;
48    padding-right: 15px;
49}
50
51.contents-course {
52    display: flex;
53    padding-left: 0px;
54}
55
56.contents-course li {
57    width: calc(100%/3);
58    list-style: none;
59}
60
61.contents-course li  img {
62    max-width:100%;
63    height: auto;
64}
65
66.li-center {
67    padding: 0 20px;
68}
69
70.p-txt {
71    text-align: left;
72    margin: 0 0;
73}
74
75.contents-form p {
76    margin: 0;
77}
78
79.contents-form input {
80    border: 2px solid rgb(177, 176, 176);
81    padding: 5px 0;
82    border-radius: 20px;
83    box-shadow: none;
84    width: 50%;
85    height: 30px;
86}
87
88.form-btn {
89    display: block;
90    background-color: rgba(255, 0, 0, 0.541);
91    width: 40%;
92    margin: 20px auto 0 auto;
93    padding: 15px 0;
94    border-radius: 5px;
95    color: white;
96    font-weight: bold;
97}
98
99footer {
100    border-top: solid 2px rgba(0, 0, 0, 0.075);
101    margin: 100px auto 0 auto;
102    width: 960px;
103    height: 60px;
104    text-align: right;
105}

完成の見本です

こちらが今回模写した物です。

gentaro

2020/06/13 04:00

そういう「作業」は「質問」ではありません。お金払って依頼しましょう。 https://menta.work/

965

2020/06/13 09:20

以前にも同じようなコードの指摘をお願いした時に回答がついていたので勘違いしてました、申し訳ございません。

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

回答3件

解決されてますが、
セマンティクス的や、
構文的な部分で回答します。

h1がいないのに、h2が出現している

これは致命的とも言えます。
SEO的にはダメダメです。
header要素内で該当できるものがあるので、それにh1当てましょう。

空にすべきでない要素が空になっている

divはただでさえセマンティックな意味を持たないのに、更に空では入れる価値はありません。
特にブロック要素、インラインレベルなり、空にすべきでない要素はいくつかあるので、しっかり勉強すべきかと。
また、空要素を使わないでもスタイル組めるようになるのが大事です。

グローバルナビゲーションに該当する要素が、navで囲われていない上、a要素を使っていない

これは、用語が分からなければ、勉強不足なので勉強しましょう。

altを入れるべき画像にテキストが入っていない、要素で囲っていない

例えば、
<img src="about.png" alt="">とかです。
これは、HTML文章内でも、サムネイルを明示しているものであり、altを入れるべき画像です。
なぜなら、サムネイルという意味をもつものだからです。
そして、意味を持たせるために、pなり、
figure要素で囲うべきです。
（装飾のみの画像の場合は、altもいらず、要素で囲う必要はない）

inputの部分は、この場合は擬似的でもformで囲うべき

もちろん、form使わずに、a要素で送信処理をする時はあります。
ですが、止むを得ずの場合に限ります。

以上のように、
見た目は揃えられたのかもしれませんが、
HTML構文的には全然ダメダメなので、
精進していかれるといいかと思います。
見た目だけ整える、で止めるなら、別に今のままでいいかと思いますよ。

投稿2020/06/13 16:21

miyabi_pudding

総合スコア9555

miyabi_pudding

2020/06/13 16:23

もちろん他にも突っ込みどころ満載ですが、キリないので、これで留めます。

965

2020/06/13 16:52

すいません感動しています、私に非があるのですが流れ的に。私情は置いておき、回答していただき、ありがとうございます。薄々感じては居たのですが、navやfromなど知らない属性が多々あるのでやはり色々なサイトで基礎を学び治していきたいのと、習ったであろう"h1がいないのに、h2が出現している"、"altを入れるべき画像にテキストが入っていない、要素で囲っていない"など疎かになっている部分が明白化しました。恐らくこういったサイトでこのような回答を得られるのは非常にレアなケースやと思います、タイムリーであまり問題を明白化していない状態で模写をしていたので非常に助かりました。以上を踏まえて精進させていただきます。ありがとうございました。是非全て言っていただけたら嬉しかったですが、本当に多いと思います.....。

miyabi_pudding

2020/06/13 17:10 編集

progateからの回答のソースコードを拝見したことがありますが、正直、お世辞にもセマンティックなコーディングはされていません。これは、progateの目的に起因するものと思われます。あくまで、HTMLの性質、スタイルの基本的な当て方を学習するもので、その先は自身で磨いていこう！という学習目標の意図が見てとれます。（progateのエンジニアは、やり込めばセマンティックなコーディングバリバリできるはずなので）なので、progate卒業は、あくまで、入り口に立った、と捉えるべきだと私は個人的に思います。なので、精進続けていきましょう。プロを目指すならあと、自分で言うのもなんですが、私は、teratailの回答者の中では、お節介焼きさんな方の人間です　汗たまに、そこまで回答すべきでないってとこまで回答しちゃう時はけっこうある自覚があります　汗

965

2020/06/13 17:29

方針ですね、progate卒業して、まずこの先どうするかつまずき模写にたどり着いたと思い、いざ取り掛かった所「どうするんやっけ」を検索したら、習ってない（捗りそうな）記法がヒットして悩む事が多いので納得できます...。でもこれもメリットだと思っていて、というのも最高より最低から徐々に勉強した方が「何故？」に強いと思うのが私のスタイルに合っていて向上速度は遅いですが急がば回れと言いますしね。いやぁ、ホンマに助かります...厚かましいですがまたこのような質問を上げる時にメンションさせていただくので、その時は回答の方よろしくおねがいします！ "プロを目指すなら"とありますが僭越ながらフリーランスを目指しています。とても険しい道になりそうです。

phper.k

2020/06/14 05:20

ここを使って、自動的にチェックするのもいいと思いますよ http://www.htmllint.net/html-lint/htmllint.html#

965

2020/06/14 07:13

回答ありがとうございます、こちらはどういったサイトなのでしょうか、見本のサイトを貼ってみても何百ものエラーが吐き出されて意図がわかりませんでした汗

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

ベストアンサー

厳しい意見でよければ

<title>Document</title>

この時点で私は見るのをやめました。

いずれにしても「模写の目的」次第で達成度合いは変わります。
なので、
「単に見た目を再現すること」とした場合は「別に見た目揃ってればいいんじゃない」ですし、
「模写先のサイトの意図や機能、設計部分まで再現する」とした場合は指摘し始めればキリがありません。

目的によって自身でチェックシートを作り、チェックするのが一番です。

他人に見てもらいたいのであれば、そのチェックの観点を明確にすること。
（でもそれって質問じゃないよね）

投稿2020/06/13 03:42

m.ts10806

総合スコア80875

phper.k

2020/06/13 05:15

自分は二行目「<html lang="en">」で見るのをやめた

hentaiman

2020/06/13 06:46

要約すると頭使えよって事だな

965

2020/06/13 09:34

title属性はSEOにおいても大変重要なのですね。どうも間違った質問みたいなので、目的の回答は得らえられないと思っていたのですがご回答頂きありがとうございます。 lang属性も今ではGoogleでは全く使われてなく、hreflang属性が多言語サイトには使われているようでとてもためになりました！チェックシートや目的以前の問題で自分に何が足りてないのか、又目的を作るための模写ですかね！

m.ts10806

2020/06/13 11:30

私の中のProgateの評価がteratailによってどんどん落ちてくだけですね。無料の範囲でも教えないのはおかしい。(もともとプログラミングの多くはやろうと思えばどこまでもお金はかけずにできるし)

965

2020/06/13 11:59

課金もさせていただきprogateさんで出来るHTML・CSSは全て受講したはずなのですが、HTMLのテンプレート属性titleやlangなどの実践で必要なSEOなどの知識というよりは、基礎の基礎というような知識を学ばせてもらったと思っています。順を追って必要に応じて色々なサイトを使っていこうと思い、全てをprogateさんに求めていたわけではないので良くか悪くか「おいprogate」とはなることはなかったですが、今はどこも無料無料といった感じなのでしょうか？

m.ts10806

2020/06/13 21:56

ネーミングは基礎の基礎です。ファイル作成にはファイル名考案から始まります。そしてtitleはその文書への命名です。「titleにはこのページの名前を入れます」程度も教えないならお金とっていいわけないですね。ちなみに私が「どこまでもお金かけずに」は、あくまで「スクールやオンライン学習に頼らず」と言った意図があります。 Progateやドットインストールなど有名なものはありますが、そのほとんどがteratailに駆け込み、基礎の基礎のところから指摘をうけている現状から、「お金とってるのに何を教えてるんだ？」と疑問をもってる回答者は多いのでは。ちなみに私はPHPを主戦場で最近はJavaが多いですが、いずれもオンライン学習やスクールは使ってません。HTMLとかも大学の時で授業でやった程度です。