参考になったもの
CSS編
display:flex
style.css
.container {
display: flex;
}
こちらのサイトが凄く参考になりました。
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
親要素にdisplay: flex;を適用すると子要素が横並びになります。
em もしくは rem
大きさを指定するときにpxなどの絶対単位ではなくem(親要素のフォントサイズを1emとする)や、rem(親要素の大きさを1remとする)などを使用すると、拡大した場合などにレイアウトが崩れたり
しなくなる。
JavaScript編
forEach
const arr = ["apple","orange"];
arr.foreach(element => {
console.log(element);
/*
console
apple
orange
*/
});
配列内の要素に対して、一つづつ処理を行うことができる。
indexがいらない場合や、配列内の要素すべてに処理を行う場合に有効である。
document.querySelectorAll()
index.html
<!DOCTYPE html>
<html>
<head>
<title>qiita</title>
</head>
<body>
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<script src="src/main.js"></script>
</body>
</html>
src/main.js
const domList = document.querySelectorAll('.container');
domList.forEach(element => {
console.log(element.textContent);
/*
console
1
2
3
*/
});
指定されたクラス名、IDなどの条件に合致した要素をNodeListで返す。
forEachと合わせて使用することで、html側のcontainerが増えても不具合が起きないようにできる。