Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Todo App の HTML に DOCTYPE がないことの見た目の影響 #1263

Closed
dogatana opened this issue Sep 12, 2020 · 3 comments · Fixed by #1318
Closed

Todo App の HTML に DOCTYPE がないことの見た目の影響 #1263

dogatana opened this issue Sep 12, 2020 · 3 comments · Fixed by #1318

Comments

@dogatana
Copy link
Contributor

サンプルソースでは先頭に <!DOCTYPE html> がありません。
手元で写経しているときには <!DOCTYPE html> をつけていて、これによる見た目の違いがあったので、報告しておきます。使用ブラウザは Firefox です。

昨今では <!DOCTYPE html> をつけて、HTML5 であることを宣言するのが通例と読んだことがあります。それが正しければ、つけた状態としておくのが良いように思います。

  • 詳細
  1. What・・ の後の空白行がなく、線が1本になる
    space

<!DOCTYPE html> がない場合、User Agent の Style Sheet の margin-block-end: 1em が適用されるようです。(Chromeで確認)

  1. 箇条書きのマークが枠外にはみでる
    dot

<li> が単独で(<ul> で囲まれずに)存在するためのようです。<ul> があれば css の .todo-list ul { list-sytle: none; } でマークが消されます。

@azu
Copy link
Collaborator

azu commented Sep 12, 2020

<!DOCTYPE html> つけないとHTML5として解釈されないため、UA(ブラウザ)のもつデフォルトのスタイルシートが違うみたいですね。
抜けているのは意図的ではないと思うので、追加してしまうのがよさそうです

@dogatana
Copy link
Contributor Author

細かいですが、コードの他に画面キャプチャも差し替えが必要になりますね。

@azu
Copy link
Collaborator

azu commented May 9, 2021

<!DOCTYPE html> を追加してスクショを更新しました。
最初の方だけ ul がコード的に抜けているので、これは別Issueで作りました
#1316

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants