実現したいこと

Javascriptを使用して、30秒ドローイングの練習をするウェブサイトを作成しています。
今のところ写真を表示する部分は作っておらず、カウントダウンと経過時間が表示されるようになっています。

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

ページ内に「開始する」というボタンを配置しており、これをクリックするとページ下部の表示が少し上にずれます。

該当のソースコード

GithubのリポジトリのURLを掲載して、ソースコードと代えさせて頂きます。
https://github.com/Poteto143/30s-drowing.github.io/blob/master/README.md
forkしていただいても構いません。

###備考
恐らくpタグの追加が原因だと推測しているのですが、それを解決する方法がわからず質問した次第です。
回答宜しくお願いします。

markey

2020/06/11 12:16

情報が不足していて状況がわかりませんので、追記していただけると良いと思います。 - ページの一部分の表示がずれるとは具体的にどういうことか(スクショなど) - pタグの追加が原因だと判断した根拠はなにか - 事象を解決するためにご自身で試されたこととその結果(どううまくいかなかったか)

Lhankor_Mhy

2020/06/12 05:59 編集

ohysさんも回答でおっしゃっていますが、CSSタグをつけるともっと詳しい人が来てくれるかもしれませんね。

退会済みユーザー

2020/06/12 05:27

お二方のご回答は、どちらもとても参考になる物だったのですが、Lhankor_Mhyさんの回答にある解決方法が簡単だったため、ベストアンサーとさせていただきました。回答、情報追加・修正依頼をしてくださった皆さんありがとうございました! cssタグは追記しておきます。

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

回答2件

ベストアンサー

いやはや、なかなか面白い現象ですね。

css
1#img-box {
2    vertical-align: top;
3}

で解消すると思います。

他にも解消法があって、

css
1#img-box {
2	/* margin-bottom: 10px; 削除 */
3}

とか、

css
1#img-box img{
2	display: block;
3}

とか。

まだ仕様に当たれていないのですが、inline-blockの行ボックスのベースラインは、

内容がない場合、inline-blockのマージン辺
内容がある場合、内容がインラインレベルであればそのベースライン。ブロックレベルであればinline-blockのマージン辺

ということなんだと思います。

仕様が見つかりましたら、追記します。

参考：
Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira

仕様が見つかったので追記

If an atomic inline (such as an inline-block, inline-table, or replaced inline element) does not have a baseline, then the UA synthesizes a baseline table thus:

alphabetic

The alphabetic baseline is assumed to be at the **under margin edge**.

central

The central baseline is assumed to be halfway between the under and over margin edges of the box.

The vertical-align property in [CSS2] defines the baseline of inline-table and inline-block boxes with some exceptions.
4.3. Atomic Inline Baselines | CSS Writing Modes Level 3

勝手訳：

元素的インライン（インラインブロック、インラインテーブル、あるいは置換インライン要素など）がベースラインを持っていない場合、ユーザーエージェントは以下のようにベースラインを合成します：
・アルファベット風
下マージン辺を、アルファベット風ベースラインとします。
・中央
上下マージン辺の中心線を、中央ベースラインとします。

この、alphabeticとcentralという2種類のベースラインですが、通常は前者が横書きの場合、後者が縦書きの場合、として使い分けられます。ただし、これを上書きするCSSプロパティもあります。

大変勉強になるご質問でした。
ありがとうございました。

投稿2020/06/12 05:13

編集2020/06/12 07:57

Lhankor_Mhy

総合スコア37413

解決方法から言うとstyle.cssで

css
1header {
2  ...
3  top: 0px; /* 追加 */
4}
5
6#img-box {
7    margin-top: 90px;
8    margin-bottom: 10px;
9    margin-left: auto; /* 追加 */
10    margin-right: auto; /* 追加 */
11    /*margin: 90px auto 10px; あるいはこう書き直す */
12    /*display: inline-block; 削除 */
13    ...
14}

とすると問題なく動作すると思います。

他にわかる方がいれば追記していただきたいのですが

なんでinline-blockにすると意図しない動作が発生するんでしょう？

#img-boxのdisplay: inline-block;を有効にしてボタンをクリックすると<div id="img-box">の右下に位置していた<br>が<div id="img-box">の右に移動する（結果として「ページ下部の表示が少し上にずれ」る）

タグcssつけて質問し直した方が良い気もしますが……

以下質問者のコードを必要分までざっくりと削ったものです

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="style.css">
6<body>
7    <header>
8        <h1>タイトル</h1>
9    </header>
10    <div class="main">
11        <div id="img-box"></div>
12        <br>
13        <button id="startbutton">ボタン</button>
14
15        <article>
16            <p>テキスト</p>
17        </article>
18    </div>
19    <script src="script.js"></script>
20</body>
21</html>

css
1body {
2    background-image: url("単色じゃなくてなにかしらあると分かりやすい");
3    background-position: 50%;
4    margin: 0;
5    min-width: 700px;
6}
7
8header {
9    padding: 0;
10    background-color: #1eff005e;
11    text-align: center;
12    width: 100%;
13    position: fixed;
14    top: 0px;
15}
16
17header h1 {
18    margin: 0em;
19    font-size: 45px;
20}
21
22.main {
23    text-align: center;
24}
25
26#img-box {
27    margin: 90px auto 10px;
28    /*display: inline-block;*/
29    height: 500px;
30    width: 700px;
31    background-color: #ffffff;
32}
33
34#img-box p {
35    margin: 0;
36    font-size: 200px;
37}

javascript
1var isStarted = false;
2function main() {
3    if (isStarted) {
4        return;
5    }
6
7    var counter = document.getElementById("img-box").appendChild(document.createElement("p"));
8    
9    isStarted = true;
10    counter.textContent = "hoge";
11}
12
13document.getElementById("startbutton").onclick = main;