LoginSignup
izumikota2014
@izumikota2014

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

cssのclassでkoroとfukusakiで違う値を設定したいです。

Q&A

HTML5CSS3

解決したいこと

cssのclassについて、
#stationNameHiraganaDisplaykoro {と
#stationNameHiraganaDisplayFukusaki {、
#stationNameRomanDisplaykoro {と
#stationNameRomanDisplayfukusaki {
で、それぞれ違う値を設定したいですが、
一部上書きされてしまいます。
ちなみに、最終形態は、文字を入力してボタンをクリックして、ラインカラーを選択したら駅名表が出来上がるという仕組みで、jsも用いておりますが、今回はcssのみで完結する話題ですので、議題にあげておりません。
逆に言うと、cssの#や、jsの文章を削除するのは誠に勝手ながらご遠慮いただきたいです。

発生している問題・エラー

または、問題・エラーが起きている画像をここにドラッグアンドドロップ
赤色と緑色で囲ったところのtransformscaleがどうしてもkoroとfukusakiで別々にならず、上書きされてしまいます。
ちなみに、表示上は甘地となっておりますが、甘地の値は、koroの設定にしております。
駅名表質問 20241226 Thu.png

該当するソースコード

ソースコードを入力

例）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Station Board</title>
    <style>
        .stationBoard {
            display: grid;
            grid-template-columns: auto 1fr auto; /* autoに変更して矢印の位置を固定 */
            grid-template-rows: auto auto auto auto auto;
            text-align: center;
            margin: 15pt;
            border: none;
            font-family: "Frutiger LT Pro","Lineseed", sans-serif;
        }
        .stationBoard > div {
            padding: 7.5pt;
        }
        .lineColor {
            grid-column: 1 / span 3;
            height: 15pt;
        }
        #stationNameDisplay {
            grid-column: 1 / span 3;
            font-size: 80pt;
            font-weight: bold;
transform:scale(1.1,1);
letter-spacing:1em;
text-indent:1em;
        }
        #stationNameHiraganaRoman {
            grid-column: 1 / span 3;
            display: flex;
            justify-content: center;
            align-items: center; /* 縦方向の中央揃え */
            font-weight: bold;
transform:scale(1.12,1);
text-indent:0.8em;
        }

        #stationNameHiraganaDisplay{
            font-size: 25pt;
            letter-spacing:0em;
        }
        #stationNameRomanDisplay {
            font-size: 30pt;
            letter-spacing:0em;
text-indent:0.5em;
        }
        #previousStationDisplay {
            grid-column: 1 / span 3;
            grid-row: 3;
            font-size: 15.5pt;
            text-align: left;
            padding-left: 15pt;
        }
        #nextStationDisplay {
            grid-column: 1 / span 3;
            grid-row: 3;
            font-size: 15.5pt;
            text-align: left;
        }
        #previousStationRomanDisplay {
            grid-column: 1 / span 3;
            grid-row: 5;
            font-size: 12pt;
            color: #777;
            text-align: left;
            padding-left: 15pt;
        }
        #nextStationRomanDisplay {
            grid-column: 1 / span 3;
            grid-row: 5;
            font-size: 12pt;
            color: #777;
            margin-left: auto;
            text-align: left;
        }
        #arrowDisplay {
            grid-column: 1 / span 3; /* 中央に固定 */
            grid-row: 4;
            font-size: 30px;
            margin-top: -50pt;
            display: flex;
            justify-content: space-between; /* 矢印を左右に配置 */
        }
        .arrow {
            font-size: 18pt;
            position:relative;top:57.5pt;
        }
        .container {
            display: flex;
            justify-content: space-between;
            padding: 0 15pt;
            grid-column: 1 / span 3; /* ⇐これを追加 */
        }
        .container > div {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* テキストを左寄せに配置 */
            display: inline-block;
        }
        .controls {
            text-align: center;
            margin-top: 15pt;
        }
    </style>
</head>
<body>
    <div>
        <label for="stationName">駅名 (漢字):</label>
        <input type="text" id="stationName">
    </div>
    <div>
        <label for="stationNameHiragana">駅名 (ひらがな):</label>
        <input type="text" id="stationNameHiragana">
    </div>
    <div>
        <label for="stationNameRoman">駅名 (ローマ字):</label>
        <input type="text" id="stationNameRoman">
    </div>
    <div>
        <label for="previousStation">前の駅 (ひらがな):</label>
        <input type="text" id="previousStation">
    </div>
    <div>
        <label for="previousStationRoman">前の駅 (ローマ字):</label>
        <input type="text" id="previousStationRoman">
    </div>
    <div>
        <label for="nextStation">次の駅 (ひらがな):</label>
        <input type="text" id="nextStation">
    </div>
    <div>
        <label for="nextStationRoman">次の駅 (ローマ字):</label>
        <input type="text" id="nextStationRoman">
    </div>
<div>
    <label for="lineSelect">ラインカラー:</label>
    <select id="lineSelect">
        <option value="#ff0000">環状線</option>
        <option value="#00ff00">山手線</option>
        <option value="#0000ff">中央線</option>
        <!-- 他の路線を追加 -->
    </select>
</div>
    <div>
        <button id="leftButton">左</button>
        <button id="rightButton">右</button>
        <button id="bothButton">両方</button> <!-- 新しいボタンを追加 -->
    </div>
    <div id="stationBoard" class="stationBoard">
        <div id="stationNameDisplay"></div>
        <div id="stationNameHiraganaRoman">
            <span id="stationNameHiraganaDisplay"></span>
            <span id="stationNameRomanDisplay"></span>
        </div>
        <div id="lineColorDisplay" class="lineColor"></div>
        <div id="arrowDisplay">
            <div id="leftArrow" class="arrow"></div>
            <div id="rightArrow" class="arrow"></div>
        </div>
        <div class="container">
            <div class="station">
                <div id="previousStationDisplay"></div>
                <div id="previousStationRomanDisplay"></div>
            </div>
            <div class="station">
                <div id="nextStationDisplay"></div>
                <div id="nextStationRomanDisplay"></div>
            </div>
        </div>
    </div>

    <script>
function updateLineColor() {
    const lineSelect = document.getElementById('lineSelect');
    const selectedColor = lineSelect.value;
    lineColorDisplay.style.backgroundColor = selectedColor;
}
// Listen for change in the dropdown menu
lineSelect.addEventListener('change', updateLineColor);

// Initialize the line color
updateLineColor();
        document.addEventListener('DOMContentLoaded', function() {
            const stationNameInput = document.getElementById('stationName');
            const stationNameHiraganaInput = document.getElementById('stationNameHiragana');
            const stationNameRomanInput = document.getElementById('stationNameRoman');
            const previousStationInput = document.getElementById('previousStation');
            const previousStationRomanInput = document.getElementById('previousStationRoman');
            const nextStationInput = document.getElementById('nextStation');
            const nextStationRomanInput = document.getElementById('nextStationRoman');
            const leftButton = document.getElementById('leftButton');
            const rightButton = document.getElementById('rightButton');
            const bothButton = document.getElementById('bothButton'); // 新しいボタンを取得

            const stationNameDisplay = document.getElementById('stationNameDisplay');
            const stationNameHiraganaDisplay = document.getElementById('stationNameHiraganaDisplay');
            const stationNameRomanDisplay = document.getElementById('stationNameRomanDisplay');
            const previousStationDisplay = document.getElementById('previousStationDisplay');
            const previousStationRomanDisplay = document.getElementById('previousStationRomanDisplay');
            const nextStationDisplay = document.getElementById('nextStationDisplay');
            const nextStationRomanDisplay = document.getElementById('nextStationRomanDisplay');
            const leftArrow = document.getElementById('leftArrow');
            const rightArrow = document.getElementById('rightArrow');

            let arrowState = 'left';

            function updateStationBoard() {
                const stationName = stationNameInput.value;
                const stationNameHiragana = stationNameHiraganaInput.value;
                const stationNameRoman = stationNameRomanInput.value;
                const previousStation = previousStationInput.value;
                const previousStationRoman = previousStationRomanInput.value;
                const nextStation = nextStationInput.value;
                const nextStationRoman = nextStationRomanInput.value;

                stationNameDisplay.textContent = stationName;
                stationNameHiraganaDisplay.textContent = stationNameHiragana;
                stationNameRomanDisplay.textContent = stationNameRoman;
                previousStationDisplay.textContent = previousStation;
                previousStationRomanDisplay.textContent = previousStationRoman;
                nextStationDisplay.textContent = nextStation;
                nextStationRomanDisplay.textContent = nextStationRoman;

                // Set line color
                lineColorDisplay.style.backgroundColor = lineSelect.value;

                // Display arrow
                if (arrowState === 'left') {
                    leftArrow.textContent = "←";
                    rightArrow.textContent = "";
                    previousStationDisplay.style.paddingLeft = '30pt';
                    previousStationRomanDisplay.style.paddingLeft = '30pt';
                    nextStationDisplay.style.paddingRight = '';
                    nextStationRomanDisplay.style.paddingRight = '';
                } else if (arrowState === 'right') {
                    leftArrow.textContent = "";
                    rightArrow.textContent = "→";
                    previousStationDisplay.style.paddingLeft = '';
                    previousStationRomanDisplay.style.paddingLeft = '';
                    nextStationDisplay.style.paddingRight = '30pt';
                    nextStationRomanDisplay.style.paddingRight = '30pt';
                } else if (arrowState === 'both') {
                    leftArrow.textContent = "←";
                    rightArrow.textContent = "→";
                    previousStationDisplay.style.paddingLeft = '30pt';
                    previousStationRomanDisplay.style.paddingLeft = '30pt';
                    nextStationDisplay.style.paddingRight = '30pt';
                    nextStationRomanDisplay.style.paddingRight = '30pt';
                } else {
                    leftArrow.textContent = "";
                    rightArrow.textContent = "";
                    previousStationDisplay.style.paddingLeft = '';
                    previousStationRomanDisplay.style.paddingLeft = '';
                    nextStationDisplay.style.paddingRight = '';
                    nextStationRomanDisplay.style.paddingRight = '';
                }
            }

            function moveArrowLeft() {
                arrowState = 'left';
                updateStationBoard();
            }

            function moveArrowRight() {
                arrowState = 'right';
                updateStationBoard();
            }

            function displayArrowsBoth() {
                arrowState = 'both';
                updateStationBoard();
            }

            stationNameInput.addEventListener('input', updateStationBoard);
            stationNameHiraganaInput.addEventListener('input', updateStationBoard);
            stationNameRomanInput.addEventListener('input', updateStationBoard);
            previousStationInput.addEventListener('input', updateStationBoard);
            previousStationRomanInput.addEventListener('input', updateStationBoard);
            nextStationInput.addEventListener('input', updateStationBoard);
            nextStationRomanInput.addEventListener('input', updateStationBoard);
            lineSelect.addEventListener('change', updateStationBoard);
            leftButton.addEventListener('click', moveArrowLeft);
            rightButton.addEventListener('click', moveArrowRight);
            bothButton.addEventListener('click', displayArrowsBoth); // 新しいボタンのイベントリスナーを追加

            // Initialize
            updateStationBoard();
        });
    </script>
</body>
</html>
    <style>
        .stationBoardKoro,stationBoardFukusaki {
            display: grid;
            grid-template-columns: auto 1fr auto; /* autoに変更して矢印の位置を固定 */
            grid-template-rows: auto auto auto auto auto;
            text-align: center;
            border: none;
            font-family: "Frutiger LT Pro","源暎モノゴ", sans-serif;
        }
        .lineColor {
            grid-column: 1 / span 3;
            height: 15pt;
        }
        #stationNameDisplayKoro {
            grid-column: 1 / span 3;
            font-size: 80pt;
            font-weight: bold;
scale:(1.1,1);
letter-spacing:1.0em;
text-indent:1.0em;
        }
        #stationNameHiraganaRomanKoro {
            grid-column: 1 / span 3;
            display: flex;
            justify-content: center;
            align-items: center; /* 縦方向の中央揃え */
            font-weight: bold;
display:inline-block;
text-indent:0pt;
        }
        #stationNameHiraganaDisplayKoro {
            font-size: 23pt;
            scale:(1.1,1);
letter-spacing:0.1em;
text-indent:0.1em;
//letter-spacing:0.05em;
//margin-left:-1.85pt;
//display:inline-block;
transform-origin: right;
        }
        #stationNameRomanDisplayKoro {
            font-size: 33pt;
            scale:(1.1,1);
//display:inline-block;
transform-origin: left;
        }
.blankKoro{
margin-right:18pt;
}
</style>
    <style>
        .lineColor {
            grid-column: 1 / span 3;
            height: 15pt;
        }
        #stationNameDisplayFukusaki {
            grid-column: 1 / span 3;
            font-size: 80pt;
            font-weight: bold;
scale:(1.1,1);
letter-spacing:1.0em;
text-indent:1.0em;
        }
        #stationNameHiraganaRomanFukusaki {
            grid-column: 1 / span 3;
            display: flex;
            justify-content: center;
            align-items: center; /* 縦方向の中央揃え */
            font-weight: bold;
display:inline-block;
text-indent:0pt;
        }
        #stationNameHiraganaDisplayFukusaki {
            font-size: 23pt;
            scale:(1,1);
letter-spacing:0.1em;
text-indent:0.1em;
//letter-spacing:0.05em;
//margin-left:-1.85pt;
//display:inline-block;
transform-origin: right;
        }
        #stationNameRomanDisplayFukusaki {
            font-size: 33pt;
            scale:(1,1);
display:inline-block;
transform-origin: left;
        }
.blankFukusaki{
margin-right:10pt;
}
</style>

    <div id="stationBoardKoro" class="stationBoardKoro">
        <div id="stationNameDisplayKoro">香呂</div>
        <div id="stationNameHiraganaRomanKoro">
<div id="stationNameHiraganaRomanKoro">
    <span id="stationNameHiraganaDisplayKoro">こうろ</span>
    <span class="blankKoro"></span> <!-- ここに固定の空白 -->
    <span id="stationNameRomanDisplayKoro">Koro</span>
</div>
        </div>
    </div>
    <div id="stationBoardKoro" class="stationBoardKoro">
        <div id="stationNameDisplayKoro">甘地</div>
        <div id="stationNameHiraganaRomanKoro">
<div id="stationNameHiraganaRomanKoro">
    <span id="stationNameHiraganaDisplayKoro">あまじ</span>
    <span class="blankKoro"></span> <!-- ここに固定の空白 -->
    <span id="stationNameRomanDisplayKoro">Amaji</span>
</div>
    <div id="stationBoardFukusaki" class="stationBoardFukusaki">
        <div id="stationNameDisplayFukusaki">福崎</div>
        <div id="stationNameHiraganaRomanFukusaki">
<div id="stationNameHiraganaRomanFukusaki">
    <span id="stationNameHiraganaDisplayFukusaki">ふくさき</span>
    <span class="blankFukusaki"></span> <!-- ここに固定の空白 -->
    <span id="stationNameRomanDisplayFukusaki">Fukusaki</span>
</div>
    <div id="stationBoardKoro" class="stationBoardKoro">
        <div id="stationNameDisplayKoro">谷谷</div>
        <div id="stationNameHiraganaRomanKoro">
<div id="stationNameHiraganaRomanKoro">
    <span id="stationNameHiraganaDisplayKoro">TTTTT</span>
    <span class="blankKoro"></span> <!-- ここに固定の空白 -->
    <span id="stationNameRomanDisplayKoro">TTTTTTTTTT</span>
</div>
    <div id="stationBoardFukusaki" class="stationBoardFukusaki">
        <div id="stationNameDisplayFukusaki">谷谷</div>
        <div id="stationNameHiraganaRomanFukusaki">
<div id="stationNameHiraganaRomanFukusaki">
    <span id="stationNameHiraganaDisplayFukusaki">TTTTT</span>
    <span class="blankFukusaki"></span> <!-- ここに固定の空白 -->
    <span id="stationNameRomanDisplayFukusaki">TTTTTTTTTT</span>
</div>

自分で試したこと

コード生成aiの一種である、geminiやリートンで回答を求めましたが、無駄骨に終わってしまいました。

0

3Answer

uasi
@uasi

id は大文字小文字を区別します。 CSS に書いてある #stationNameRomanDisplaykoro と HTML の id="stationNameRomanDisplayKoro" は Koro の大文字小文字が一致しないので、スタイルが適用されません。統一してください。

2Like
YottyPG
@YottyPG

開発者ツールでどういったスタイルが適用されているか確認されていますでしょうか？

記載のコードを貼り付けてみて1点気づいたことですが、
scaleXは引数を1つしか取らないので、2つ指定していると正しく反映されません。

image.png

1Like

Comments

  1. @izumikota2014

    Questioner

    補足まことにありがたいですが、scalexをしないでおくと、
    text-indentを常々、計算して設置しなければなりませんが、
    その対策はどうなるのでしょうか。

  2. @YottyPG

    scaleXの使用を避けるようにお伝えしたわけではなく、書き方に誤りがあるため正しく反映されていないことをお伝えしたかったです。

    また、scaleXやtext-indentとおっしゃっていますが、そもそものところどの部分をどのようにしたいのでしょうか…？:thinking:

  3. @YottyPG

    すみません、説明が十分でなかったかもしれません。補足させていただきます。

    text-indentというワードも出たので、もしかしたら位置調整のためにscaleを使われているのかと推測しました。
    ただ、scale を使うと文字の形まで変形してしまうため、位置調整の手段としてはあまりおすすめできません。
    位置調整であればより適切な方法があるかもしれないと思い、そもそもどのようなデザインの仕様を想定されているのか確認したかった次第です。

  4. @izumikota2014

    Questioner

    位置情勢のために、scaleを使用しているのではありません。
    文字自体を一部長体にしたいために、行っている次第です。
    ただいかんせん、#stationNameHiraganakoro {と
    #stationNameHiraganaFukusaki {、
    #stationNameHiraganakoro {と
    #stationNameHiraganaFukusaki {が
    どのようにscalex設定しようと、全部同じscalexに設定されてしまうものでして。
    但し、font-sizeや、letterspacing、text-indentなら、変更は可能です。
    scaleタグだけになってしまうと、その都度、text-indentで揃えなければならず、
    letter-spacingならまだしも、
    scaleタグだと、いかんせん、中央ぞろえにはならず、拡大されて、見かけのレイアウトがおかしくなります。

  5. @juner

    どのようにscalex設定しようと、全部同じscalexに設定されてしまうものでして。

    それは @YottyPG さんの 先述の通り sacaleX の引数が誤っているから（利いていない）では……？（F12 の要素ビューで スタイルを見た際、黄色に! のアイコンが付いた上で 取り消し線になっているのは構文等が誤っている為利いていないの意なので
    image.png

    image.png

    F12 の要素ビューの開き方については下記が詳しいです

  6. @YottyPG

    @junerさん、フォローありがとうございます！

    @uasiさんのCSSのidとHTMLのidが不一致の件、私がお伝えしたscaleXは引数1つの件、を修正してまだ改善されていないということでしょうか？

    まだ現象が出るということであれば、質問文のコードを最新の状態に変更してみてもらえますか？

  7. @izumikota2014

    Questioner

    cssとhtmlのidの不一致と、scalexの引数の件は解消しました。
    これで、解決しなければ、出直します（一度閉じて再度出します）。

juner
@juner

とりあえず livecodes に転記したのですが、一つ確認事項として css 上の // はスタイル破壊の意図でしょうか？ その行を無効化させたい意図でしょうか？
（一旦その行を無効化する意図 （/* ～ */ の誤り） として転記しています。

以下に F12の 要素ビューから見た場合の 実態のスタイルをメモします。

ただ、このスタイル、重複しまくっていますが、意図していますでしょうか？

id=stationNameHiraganaDisplaykoro のスタイル

image.png

id=stationNameHiraganaDisplayFukusaki のスタイル

image.png

id=stationNameRomanDisplaykoro のスタイル

image.png

id=stationNameRomanDisplayfukusaki のスタイル

image.png

追伸

ちなみに style要素 は幾つどこに書いても 上から読み込み順に適用され、 詳細度が強いもの順に利くだけなので 必要に応じて 他のセレクタでネストした方がいいかもしれません。

0Like

Your answer might help someone💌

LoginSign Up