Q&A
「CSS」もタグに追加願います。
また「//ここで横並びを指定している」のように実際にコードにない文言が入っているとコピペそのままでは動作確認できませんので、コードブロックからは出してください（つまりコードブロック内は現在のコードをそのまま貼り付けてください）
前提・実現したいこと
現在、ドットインストールのJavascript入門を学習しています。
bodyタグに書いた要素を横並びにするために、
styleタグに「display: flex; flex-wrap: wrap;」
を設定したのですが、うまく横並びに表示されません。
該当のソースコード
HTML
1<!DOCTYPE html> 2<htnl lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>JavaScript Practice</title> 6 <style> 7 body{ 8 display: flex; 9 flex-wrap: wrap; 10 } 11 .box{ 12 width: 100px; 13 height: 100px; 14 background: skyblue; 15 cursor: pointer; 16 transition: 0.8s; 17 margin: 0px 8px 8px 0px; 18 } 19 .circle{ 20 background: pink; 21 border-radius: 50%; 22 transform: rotate(360deg); 23 } 24 </style> 25 </head> 26 <body> 27 <div id="target1" class="box"></div> 28 <div id="target2" class="box"></div> 29 <div id="target3" class="box"></div> 30 31 <script> 32 'use strict'; 33 34 const target1 = document.getElementById('target1'); 35 const target2 = document.getElementById('target2'); 36 const target3 = document.getElementById('target3'); 37 38 target1.addEventListener('click', function(){ 39 target1.classList.toggle('circle') 40 }); 41 target2.addEventListener('click', function(){ 42 target2.classList.toggle('circle') 43 }); 44 target3.addEventListener('click', function(){ 45 target3.classList.toggle('circle') 46 }); 47 48 </script> 49 </body> 50</htnl>
試したこと
Chormeのデベロッパーツールで確認しましたが、特にエラーは出ていませんでした。
補足情報
実行環境：Chrome 74.0.3729.157
テキストエディタ：VSCode 1.33.1
bodyにflexを指定するというのは何か参考にした先があるのでしょうか？
細かいですが
Chormen → Chrome
いろいろすみませんでした。修正いたします。
また、bodyにflexを指定したのは学習サイトの通りにしました。
回答3件
0
ベストアンサー
これ直してもダメですかね。
html
1<htnl lang="ja"> <!--誤--> 2<html lang="ja"> <!--正-->
html
1</htnl> <!--誤--> 2</html> <!--正-->
あと、コメントはHTMLの場合<!-- -->、CSSは/* */です
投稿2019/05/16 05:49
総合スコア3235
ありがとうございます。
解決できました。初歩的すぎるミスですみませんでした。。。
また、ソースコード内のコメントは後からとっさに付け加えたもので、
他の言語の仕様と混合してしましました。気をつけます。
0
以下を修正してみてHTMLファイルに保存して、閲覧してみてください。
なお、CSSのコメントは/ここにコメント/で入力で、HTMLのコメントは<!--ここにコメント-->です。
1．htnlをhtmlへ
HTML
1<htnl lang="ja"> 2↓ 3<html lang="ja"> 4 5</htnl> 6↓ 7</html>
2．コメントを削除
CSS
1body{ 2 //ここで横並びを指定している 3 display: flex; 4 flex-wrap: wrap; 5} 6↓ 7body{ 8 display: flex; 9 flex-wrap: wrap; 10}
投稿2019/05/16 05:46
総合スコア1013
ありがとうございます。
解決できました。初歩的すぎるミスですみませんでした。。。
別の回答者様と同じ内容で申し訳ございませんが、
ソースコード内のコメントは後からとっさに付け加えたもので、
他の言語の仕様と混合してしましました。気をつけます。
0
bodyへの指定ではなく別途ラッパーを用意する必要があるように思います。
html
1 <div id="target_wrapper"> 2 <div id="target1" class="box"></div> 3 <div id="target2" class="box"></div> 4 <div id="target3" class="box"></div> 5 </div>
css
1 2 #target_wrapper{ 3 display: flex; 4 flex-wrap: wrap; 5 }
投稿2019/05/16 05:50
総合スコア80890
ご回答ありがとうございます。
最初のhtmlタグがhtnlになっていたのが原因でした。
bodyに指定すると言う風に覚えてしまうと他への影響が大きく処理も複雑になってしまうので、やはり別途ラッパーは必要に思いました
学習サイトの通りに書いていただけでした。
idを追加した形式にもチャレンジしてみます。
ありがとうがざいます。
idである必要はなく、あくまで「flexを適用したい要素の親をbodyじゃなく個別に設置したほうが全体レイアウトを考えたときに不都合がでないんじゃないか」というアドバイスです。
知識足らずですみません。。。
とても参考になります。ありがとうございます。
いえ、謝る必要はないと思います。
今はいっぱい部品を作っている状況だと思うので、
それらを組み合わせて1つのものを作ろうとなったときの影響度合いとか、
そのあたりはそのときにしっかり解決できればいいかなと思ってます。
あなたの回答
tips
プレビュー
