Q&A
https://jsfiddle.net/h7s5jao9/ 問題が再現しません。「効いてない」をどうやって判断したかを（スクリーンショットなどを使って）質問文に追記することをお勧めします。
前提・実現したいこと
ドットインストールで学習中です。
div要素を横並びにしようとしました。
発生している問題・エラーメッセージ
親要素のbodyに display: flex; を記述したのですが効いてないようです。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <charset="utf-8"> <title>JavaScript Practice</title> <style> body { display: flex; flex-wrap: wrap; } .box { width: 100px; height: 100px; background-color: skyblue; cursor: pointer; transition: 0.8s; margin: 0 8px 8px 0; } .circle { background: pink; border-radius: 50%; transform: rotate(360deg); } </style> </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'); target1.addEventListener('click', () => { target1.classList.toggle('circle'); }); target2.addEventListener('click', () => { target2.classList.toggle('circle'); }); target3.addEventListener('click', () => { target3.classList.toggle('circle'); }); </script> </body> </html>
試したこと
display: none;
にしたらdiv要素が消失しました。
flexだけが効いてないようです。
補足情報（FW/ツールのバージョンなど）
VScode1.43.2を使用しています。
回答2件
0
ベストアンサー
html
1<!-- 2 <charset="utf-8"> 3 ↑meta が必要 4--!> 5 <meta charset="utf-8">
投稿2020/03/28 02:34
編集2020/03/28 02:36
総合スコア34075
0
metaタグの指定がおかしいだけっすね…。
HTML
1 <head> 2 3 <!--<charset="utf-8">--> 4 <meta charset="utf-8"> 5 6 </head>
投稿2020/03/28 02:28
総合スコア354
あなたの回答
tips
プレビュー
