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

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

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

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

display: grid;でのjustify-selfが効かない

Iori
Iori

総合スコア54

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0グッド

0クリップ

230閲覧

投稿2022/10/31 13:35

前提

YouTubeの
Responsive hero | Build a responsive website from scratch (Part 7)
https://www.youtube.com/watch?v=oR4y973fDQ4&t=777s
34:00あたりにきてます。

実現したいこと

copyrightを右に寄せたいです。
お手本の動画
イメージ説明

発生している問題・エラーメッセージ

現状
イメージ説明

該当のソースコード

該当箇所に🙋🙋マークがあります。

html

1 <div class="footer__cta"> 2 <a href="#" class="button">Request invite<a> 3 4 </div> 5 6 <div class="footer__copyright"> 7 <!-- ⭐特殊記号!! --> 8 &copy; EasyBank. All Rights Reserved.</div> 9

footer.css

1.footer { 2 background-color: #2D314D; 3 color: white; 4 text-align: center; 5 padding: 2.5rem; 6} 7 8.footer a { 9 color: white; 10 11} 12 13 14.footer__logo { 15 /* 7/7 19:10 the margin did 16work for the other elements because those are divs and is by nature they are 17by default display block elements */ 18 display: inline-block; 19 margin-bottom: 1.875rem; 20 21} 22 23 24 25.footer__social { 26 margin-bottom: 1.875rem; 27} 28 29.footer__social a { 30 display: inline-block; 31} 32 33/* 7/7 20:00⭐not last-childがないときれいにセンターにならない */ 34.footer__social a:not(:last-child) { 35 margin-right: 1rem 36} 37 38 39.footer__links { 40 41 display: flex; 42 /* ⭐7/7 21:00 */ 43 flex-direction: column; 44 /* because it's vertical align items should control the width of 45the children */ 46align-items: center; 47 48} 49 50.footer__links a { 51 /* a 自体にline-height */ 52 line-height: 2.5; 53} 54 55.col1 { 56} 57 58.col2 { 59 /* margin-bottom: 1.875rem; */ 60} 61 62.footer__cta { 63 margin: 1.875rem; 64 65} 66 67🙋🙋 68.footer__copyright { 69 font-size: 0.8125rem; 70 color: hsl(233, 8%, 62%); 71 72} 73 74.attribution { 75 margin-top: 1.875rem; 76 77} 78 79

mixin.css

1@media screen and (min-width: 768px) { 2 3 .footer__links { 4 align-items: baseline; 5 } 6 7 8 /* grid */ 9 .grid-container { 10 display: grid; 11 grid-template-columns: 2fr 1fr 1fr 3fr; 12 /* grid-template-rows: repeat(2, 1fr); */ 13 grid-template-rows: 1fr auto; 14 grid-template-areas: 15 /* 複数のrowを同じのがまたぐときは2回言う */ 16 "logo links1 links2 cta" 17 "social links1 links2 copyright"; 18 19 justify-items: start; 20 text-align: left; 21 22 23 } 24 25 .footer__logo { 26 grid-area: logo; 27 } 28 29 .col1 { 30 grid-area: links1; 31 } 32 33 .col2 { 34 grid-area: links2; 35 36 37 } 38 39 .footer__cta { 40 grid-area: cta; 41 42 /* margin: 0 0 1.875rem 0; */ 43 justify-self: end; 44 text-align: right; 45 46 } 47 48 .footer__social { 49 grid-area: social; 50 51 } 52 53🙋🙋 54 .footer__copyright { 55 grid-area: copyright; 56 57 justify-self: end; 58 text-align: right; 59 } 60 61} 62

試したこと

mixin.css内で

mixin.css

1 .footer__copyright { 2 grid-area: copyright; 3 4 display: flex; 5 justify-self: end; 6 }

をしてみましたが、変わりませんでした。。。

以下のような質問にはグッドを送りましょう

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

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

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

hatena19

2022/10/31 23:56

現象を再現できるコードを提示してください。 HTMLに grid-containerクラスがないので、再現できません。 あと、a要素の閉じタグがないのでまずはそれを修正してみてください。
Iori

2022/11/01 00:12

ありがとうございます。</a>に直したら正常に表示されました。

回答1

1

ベストアンサー

a要素の閉じタグがないのを修正して、grid-containerクラスのブロックで囲んだら、justify-self: end; は効きましたよ。

html

1<div class="grid-container"> 2 <div class="footer__cta"> 3 <a href="#" class="button">Request invite</a><!-- 閉じタグに修正!! --> 4 </div> 5 6 <div class="footer__copyright"> 7 <!-- ⭐特殊記号!! --> 8 &copy; EasyBank. All Rights Reserved. 9 </div> 10</div>

投稿2022/11/01 00:19

hatena19

総合スコア32001

Iori😄を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。