現在ドットインストールを見ながらグリッドレイアウトについて学んでいます justify-itemsと入力すると文字が灰色になってしまい適用されません ![イメージ説明](25954e56d82264f7b766ad6e8a65b61f.png) このような感じになります。 justify-content以外の候補が出てきません。 コメントアウトしているわけではないし、もしかしたら文字自体を間違えているかと思いコピペもしてみましたがダメです。 再インストールもしてみましたが効果がありません。 この問題の解決方法をご存知の方がおられましたらお教えください。 ```html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid Layout</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="container"> <div class="item-1">1</div> <div class="item-2">2</div> <div class="item-3">3</div> <div class="item-4">4</div> <div class="item-5">5</div> <div class="item-6">6</div> <div class="item-7">7</div> <div class="item-8">8</div> <div class="item-9">9</div> </div> </body> </html>
css
1body{ 2 padding: 0; 3 margin: 0; 4} 5 6.container{ 7 background: #eee; 8 width:300px; 9 height:300px; 10 display: grid; 11 grid-template-rows:80px 80px 80px; 12 grid-template-columns:80px 80px 80px; 13 /* justify-content:end; 14 align-content: center; */ 15 justify-items:end; 16 align-items: center; 17} 18 19.item-1{ 20 background: hsl(300, 80%, 30%); 21 justify-self:center; 22 align-items: center; 23} 24.item-2{ 25 background: hsl(300, 80%, 40%); 26 27} 28.item-3{ 29 background: hsl(300, 80%, 50%); 30 31} 32.item-4{ 33 background: hsl(200, 80%, 30%); 34 35} 36.item-5{ 37 background: hsl(200, 80%, 40%); 38 39} 40.item-6{ 41 background: hsl(200, 80%, 50%); 42 43} 44.item-7{ 45 background: hsl(100, 80%, 30%); 46 47} 48.item-8{ 49 background: hsl(100, 80%, 40%); 50 51} 52.item-9{ 53 background: hsl(100, 80%, 50%); 54 55} 56
コードは画像ではなくテキストベースで、マークダウンのcodeを利用してご提示ください。でないと正しく再現確認できません
ちなみに、実際動作させたときにきちんとそのstyleは適用されてますか?
デベロッパーツールでみた場合どうなってますか?
それかAtomが原因ではなくコード側に何か不備があるかもしれないので問題なければコード全体をご提示頂ければと思います。
ご指示いただいた通りコードを載せました。
また何度か動作確認をしてみましたところ、何故か問題なく適用されて現在は例題通りの画面になりました。
ですので機能自体はちゃんとしているようなので、適用されていないというのは私の早とちりであったようです。申し訳ありません。
解決されたなら良かったです。
多分ですがキャッシュが残ってたんですかね。
自己解決にしてもらえると幸いです。
リアルタイムプレビューが出てるはずなので投稿前にできちんと反映されてるか確認されてから投稿してください。
もしマークダウンが分からないのでしたら使い方も読んでください。
https://teratail.com/help#about-markdown
回答1件
あなたの回答
tips
プレビュー