Q&A
前提・実現したいこと
ドットインストールでJavaScript勉強中です。
。
発生している問題・エラーメッセージ
bodyタグに書いた要素を横並びにするために、
styleタグに「display: flex; flex-wrap: wrap;」
を設定したのですが、うまく横並びに表示されません。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <mata charset="utf-8"> <title>JavaScript Practice</title> <style> body { display: flex; flex-wrap: wrap; }</head> <body> <div class="box" id="target1"></div> <div class="box" id="target2"></div> <div class="box" id="target3"></div> <script> 'use strict'; const target1 = document.getElementById('target1'); const target2 = document.getElementById('target2'); const target3 = document.getElementById('target3');.box { width: 100px; height: 100px; background: skyblue; cursor: pointer; transition:0.8s; margin: 0 8px 8px 0; } .circle { background: pink; border-radius: 50%; transform: rotate(360deg); } </style>
</body> </html>target1.addEventListener('click',() => { target1.classList.toggle('circle'); }); target2.addEventListener('click',() => { target2.classList.toggle('circle'); }); target3.addEventListener('click',() => { target3.classList.toggle('circle'); }); </script>
試したこと
Chormeのデベロッパーツールで確認しましたが、特にエラーは出ていませんでした。
補足情報（FW/ツールのバージョンなど）
回答1件
0
ベストアンサー
呈示のコードで横並びになりました。(Codepenで確認したときはうまくいったのですが、実際のHTMLファイルではだめでした。）
JSも正常に動作しています。
ただ、body に flex を設定するのはちょっと良くないと思いますので、
divタグで囲んで、それにflex を設定したほうがいいと思います。
html
1<div class="flexbox"> 2 <div class="box" id="target1"></div> 3 <div class="box" id="target2"></div> 4 <div class="box" id="target3"></div> 5</div>
css
1.flexbox { 2display: flex; 3flex-wrap: wrap; 4}
投稿2020/04/08 09:46
編集2020/04/09 00:50
総合スコア34075
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/09 00:46
2020/04/09 00:48
2020/04/09 01:14