初めまして。
Javascriptの基本の練習をしており、昨夜から解決できずにいます。
どうぞよろしくお願いいたします。

前提・実現したいこと

ページを開いた時は画像1枚目のようにCSS通りに表示され、ボディ内のどこかをクリック後に画像2枚目のように内容が右側に移動するようにしたいです。

発生している問題

画像3枚目(自分で作成したもの)
1．ページを開くと最初から右側で表示されてしまっている。
(クリックすると画像1枚目と同じ表示にはなりますが、ページを最初に開いたときは画像1の表示で、クリックすると画像2枚目のように右側に移動させたいです。)
2．リストの点が移動せずに左側のままになる。(3つの点もリストと同じように右側に表示させたいです)

該当のソースコード

<!DOCTYPE html>
<html>
<head>
<title>A Basic HTML Page</title>
<meta charset="utf-8">
<style>
    body {
            background: beige;
            font-family: Tahoma;
            color: black;
            width: 70%;
            margin: 0px auto;
            border: 2px solid black;
            padding: 10px;
            margin-top: 20px;
    }
    .example {
            text-align: right;
            color: blue;
            font-size: 1.2em;
            font-style: oblique;
    }
    html {
            background: gray;
    }
</style>
    <script type="text/javascript">
        //javascript gose here
        function preparePage() {
            document.getElementById("mainBody").onclick = function() {
            if (document.getElementById("mainBody").className == "example") {
                document.getElementById("mainBody").className = "";
            } else {
                document.getElementById("mainBody").className = "example";
            }
            };
        }

        window.onload = function() {
            preparePage();
        };

        var doc = document.getElementById("mainBody");
        doc.style.fontFamily = "Times New Roman";

    </script>
</head>

<body id="mainBody" class="example">
    <h1>This is a basic HTML page</h1>
    <p>It really doesn't get more basic than this. HTML is a language that will control the structure and content of the information on your web page. Other technologies will control style, like CSS, and interactivity, like Javascript. HTML is the most important of all becasue without HTML you would have nothing....</p>
   
    <div class="listContainer">
        <h2>Things you need for a web page</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
        </ul>
    </div>
    </body>
</html>

試したこと

var doc = document.getElementById("mainBody");　がid="mainBody"よりも前にきてしまっていることが原因だと考え、位置をかえてみるもののどこに入力しても上手くいきません。

int32_t

2021/02/16 14:43

全体が右寄りのとき、3つのリストの点はどう表示されて欲しいのでしょうか?

Miholita

2021/02/16 14:47

説明が不足しており失礼いたしました。 3つのリストの点もリストと同じように右側に表示させたいです。よろしくお願い致します。

int32_t

2021/02/16 15:08 編集

HTML, CSS, Javascript の右寄り位置はこれで正しくて、点はそれぞれのすぐ左に付いて縦位置は揃ってはいけない、ということでしょうか。

Miholita

2021/02/16 15:20

画像と説明を追加いたしましたのでご確認いただけますでしょうか。宜しくお願い致します。

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

回答1件

ベストアンサー

1．ページを開くと最初から右側で表示されてしまっている。

bodyタグにexampleクラスを最初から当ててしまってるからですね。
単純に外せば良いでしょう。

2．リストの点が移動せずに左側のままになる。

cssのlist-style-positionが要件に近いでしょうか。
list-style-position: inside;とするとliタグのテキストにくっつきます。（liの内側だからliのテキスト準拠）
list-style-position: outside;とすると元の表示に戻ります。（liの外だからul準拠）

コード

結構派手に変えたのでポイントだけ。

htmlのulタグにidを付与して、exampleクラスを適用する時に一緒にlist-style-positionを変更する

html
1<ul id="langList">
2    <li>HTML</li>
3    <li>CSS</li>
4    <li>Javascript</li>
5</ul>

js
1doc.onclick = function() {
2    if (doc.className === "example") {
3        doc.className = "";
4        langList.style.listStylePosition = "outside";
5    } else {
6        doc.className = "example";
7        langList.style.listStylePosition = "inside";
8    }
9};

JavaScriptからcssのプロパティを変える場合は、styleプロパティ経由で指定します。
css名はケバブケース（ハイフンつなぎ）ですが、JavaScriptで指定する場合は、キャメルケースに直して指定します。
今回だとlist-style-positionですからlistStylePositionですね。