自分は、矢印を左側にすると、その左側の駅名の文字、ひらがなとローマ字が、矢印のサイズ分（それが難しければ具体的に30px)、右側にずれ、逆に右側だと、右側の駅名の文字が左にずれるというものです。 例えば、前の駅が御徒町で、次の駅が有楽町だとすると、有楽町の側に矢印が来て、有楽町の文字が矢印とは逆方向にずれ、御徒町も然りといったプログラムを作りたいです。

自分は、矢印を左側にすると、その左側の駅名の文字、ひらがなとローマ字が、矢印のサイズ分（それが難しければ具体的に30px)、右側にずれ、逆に右側だと、右側の駅名の文字が左にずれるというものです。
例えば、前の駅が御徒町で、次の駅が有楽町だとすると、有楽町の側に矢印が来て、有楽町の文字が矢印とは逆方向にずれ、御徒町も然りといったプログラムを作りたいです。
```
<!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: 1fr 1fr 1fr;
            grid-template-rows: auto auto auto auto auto;
            text-align: center;
            margin: 20px;
            border: none;
        }
        .stationBoard > div {
            padding: 10px;
        }
        .lineColor {
            grid-column: 1 / span 3;
            height: 20px;
        }
        #stationNameDisplay {
            grid-column: 1 / span 3;
            font-size: 24px;
            font-weight: bold;
        }
        #stationNameHiraganaRoman {
            grid-column: 1 / span 3;
            display: flex;
            justify-content: center;
            font-size: 20px;
        }
        #stationNameHiraganaDisplay, #stationNameRomanDisplay {
            font-size: 20px;
            margin-right: 10px;
        }
        #previousStationDisplay {
            grid-column: 1 / span 3;
            grid-row: 3;
            font-size: 20px;
            text-align: left;
        }
        #nextStationDisplay {
            grid-column: 1 / span 3;
            grid-row: 3;
            font-size: 20px;
            text-align: right;
        }
        #previousStationRomanDisplay {
            grid-column: 1 / span 3;
            grid-row: 5;
            font-size: 16px;
            color: #777;
            text-align: left;
        }
        #nextStationRomanDisplay {
            grid-column: 1 / span 3;
            grid-row: 5;
            font-size: 16px;
            color: #777;
            text-align: right;
        }
        #arrowDisplay {
            grid-column: 1 / span 3; /* 中央に固定 */
            grid-row: 4;
            font-size: 30px;
            margin-top: 10px;
            justify-self: center; /* 中央揃え */
        }
        .arrow {
            font-size: 24px;
        }
    </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>
<div>
    <label for="lineSelect">ラインカラー:</label>
    <select id="lineSelect">
        <option value="#ff0000">環状線</option>
        <option value="#00ff00">山手線</option>
        <option value="#0000ff">中央線</option>
        <!-- 他の路線を追加 -->
    </select>
</div>
    </div>
    <div>
        <button id="leftButton">左</button>
        <button id="rightButton">右</button>
    </div>
    <div id="stationBoard" class="stationBoard">
        <div id="stationNameDisplay"></div>
        <div><span id="stationNameHiraganaDisplay"></span> <span id="stationNameRomanDisplay"></span></div>
        <div id="lineColorDisplay" class="lineColor"></div>
        <div id="previousStationDisplay"></div>
        <div class="arrow" id="arrowDisplay"></div>
        <div id="nextStationDisplay"></div>
        <div id="previousStationRomanDisplay"></div>
        <div id="nextStationRomanDisplay"></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 lineSelect = document.getElementById('lineSelect');
            const leftButton = document.getElementById('leftButton');
            const rightButton = document.getElementById('rightButton');

            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 arrowDisplay = document.getElementById('arrowDisplay');
            const lineColorDisplay = document.getElementById('lineColorDisplay');

            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 (previousStation && nextStation) {
                    arrowDisplay.textContent = "←";
                }
                else if (previousStation) {
                    arrowDisplay.textContent = "←";
                } else if (nextStation) {
                    arrowDisplay.textContent = "→";
                } else {
                    arrowDisplay.textContent = "";
                }
            }

            function moveArrowRight() {
                arrowDisplay.style.gridColumn = "3";
                arrowDisplay.style.justifySelf = "right";
            }

            function moveArrowLeft() {
                arrowDisplay.style.gridColumn = "1";
                arrowDisplay.style.justifySelf = "left";
            }

            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);

            // Initialize
            updateStationBoard();
        });
    </script>
</body>
</html>
```
分かっていること。html分。
```
    <select id="lineSelect">
        <option value="#ff0000">環状線</option>
        <option value="#00ff00">山手線</option>
        <option value="#0000ff">中央線</option>
        <!-- 他の路線を追加 -->
    </select>
```
javascript文。
```
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();
```