質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%

解決済

配列の中にある要素で改行がしたい。またCSSの中でpaddingやmarginが効かない。

Andorfnous
Andorfnous

総合スコア14

1回答

0評価

0クリップ

174閲覧

投稿2022/01/20 14:02

JavaScriptの勉強を今年に入ってから始め(プログラミング自体初めてです)、練習として犬の犬種をプルダウンメニューで選択すると、検索結果という文字、その犬種の名前、その犬種の写真、その犬種の説明が表示されるWEBアプリを作ろうとしています。

以下が私が書いているコードです。

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ワンダフル 犬検索</title> <link rel="stylesheet" href="dog.css"> <link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet"> </head> <body> <div class="header">ワンダフルいぬけんさく</div> <h1>気になっている犬を選んでね</h1> <select id="dogWant"> <option value="0">シェパード</option> <option value="1">ラブラドール・レトリーバー</option> <option value="2">ポメラニアン</option> </select> <div class = "result-area"> <p id="result"></p> <p id="kindOfDog"></p> <p id="picture"></p> <p id="description"></p> </div> <script src="dog.js"></script> </body> </html>

CSS

body { margin: 0; background-color: lightgreen; color: rgb(65, 60, 60); text-align: center; } .header { background-color: rgb(240, 235, 235); text-align: center; font-family: "Hannari"; font-size: 60px; margin: 0; padding: 0; } #want-dog { font-size: 30px; padding: 5px; color: rgb(65, 60, 60); background-color: rgb(229, 230, 221); border-style: dashed; } #description { margin: 0 100 0 100; padding: 100 100 100 100; font-size: 20px; }

JS

//HTMLの方に犬の名前や写真などを表示するために準備した場所を取得し、変数に代入。// const eranda = document.getElementById("dogWant"); const searchResult = document.getElementById("result"); const DogName = document.getElementById("kindOfDog"); const pictureDivided = document.getElementById("picture"); const descriptionDivided = document.getElementById("description"); //犬の名前を配列dogarrayに入れる// const dogarray = [ "シェパード", "ラブラドール・レトリバー", "ポメラニアン" ]; //犬の画像を犬の名前と同じ順番で配列dogPictureArrayに入れる// const dogPictureArray = [ "img/シェパード.png", "img/ラブラドール・レトリーバー.jpg", "img/ポメラニアン.png" ]; //犬の説明を犬の名前と同じ順番で配列dogDescriptionに入れる// const dogDescription = [ "シェパードはドイツ原産の犬だよ。「牧羊犬」という意味だけど、牧羊犬として使役されたことはないんだって。びっくりだね。知的で忠誠心と服従心に富み、訓練を好む性格から種々な作業犬として訓練され、災害救助犬・軍用犬・警察犬・麻薬探知犬など特殊訓練を必要とする作業犬として活用されているよ", "ラブラドール・レトリーバーです。", "ポメラニアンです。" ]; //プルダウンメニューで犬の名前が押されたときに実行する関数// eranda.onchange = event => { searchResult.innerText = ""; DogName.innerText = ""; pictureDivided.innerText = ""; descriptionDivided.innerText = ""; //HTMLのセレクトタグの中のoptionが持つvalueの値を配列を取り出すときに使う番号として変数dogTypeに代入// const dogType = eranda.value; //うまく行っているかconsole.logでも確認// console.log(dogarray[dogType]); const kensakukekka = document.createElement("h2"); kensakukekka.innerText = "🐶犬索結果🐶"; searchResult.appendChild(kensakukekka); const inunosyurui = document.createElement("h1"); inunosyurui.innerText = dogarray[dogType]; DogName.appendChild(inunosyurui); const gazou = document.createElement("img"); gazou.src = dogPictureArray[dogType]; gazou.alt = "犬の画像"; gazou.width = 500; gazou.height = 500; pictureDivided.appendChild(gazou); const setsumei = document.createElement("p") setsumei.innerText = dogDescription[dogType]; descriptionDivided.appendChild(setsumei); }

困っていること
①CSSの中の要素でpaddingやmarginが効いていない(と思う)。たとえば#descriptionの中にあるpaddingやmarginが効いていない。
②dogDescriptionという配列の中に犬の説明を格納しています。このまま表示すると改行されず一気に表示されて見づらいので改行したいのですが、配列の中でどのように改行を設定してよいのかが分かりませんでした。(<br>も試しましたが、やはりそのまま表示されるだけでした。)

よろしくお願いします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る