自分は、矢印を左側にすると、その左側の駅名の文字、ひらがなとローマ字が、矢印のサイズ分（それが難しければ具体的に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();