Web プログラミング

【もりけん塾64日目】grid-template-areaを使ってレスポンシブデザイン化

フロントエンドエンジニアを目指している、まゆ(@Ymayu_it)です。

 

今日は昨日のLPをgrid-template-areaを使ってレスポンシブ対応にしました。

 

この記事では、

  • 昨日作成したhtmlをまるっと変更
  • grid-template-areaを使ってレスポンシブ対応

この順番にまとめていきます。

作成したhtmlをまるっと変えた3つの理由

昨日作成したhtmlのままだとgridに適してい無いと思ったので本日書き換えました。

 

書き換えた理由について順をおって記載していきます。

理由①sectionやdivの無駄遣い

gridはsectionやdivを無駄に使わなくてよいことが特徴にも関わらず、sectionやdivを乱用していました。

 

gridの特徴を理解していなかったことが原因…!

 

以下のサイトでgridの勉強をし直しました。


個人的に欲しかった情報が詰まっていたのは★Responsive CSS Grid Tutorialの動画。

 

理由は、

親要素と子要素のレイアウト構成ではなく孫要素も可能かどうか知りたくて調べていたからです。

 

結局、孫要素が可能かどうかはわかりませんでしたが、この動画で不要なsectionとdivを削除できました!

理由②親要素と子要素が曖昧

親要素と子要素がごちゃごちゃになっていたので、

 

  • 親要素:container
  • 子要素

でまとめていきました!

 

sectionでくくるよりもみやすくて何よりhtmlの記述量がぐんっと減りました。

理由③cssがうまくいかなかった

親要素にdisplay:grid;とgrid-templateを指定するのですが、divが多く思うようにいきませんでした。

 

htmlとcss両面からうまくいかなかったので新たに作成したhtmlは以下で記述していきます。

結論:htmlを変更したのでcssも変更しました

htmlです。

 

 html
<body>
<div class="container">
<header class="h2">
<a href="#">
山田 麻由
</a>
</header>
<header class="nav1">
<ul>
<li><a href="#"><i class="fas fa-user-alt fa-2x"></i><a></li>
<li><a href="#"><i class="fas fa-yen-sign fa-2x"></i><a></li>
<li><a href="#"><i class="fas fa-blog fa-2x"></i><a></li>
<li><a href="#"><i class="fas fa-envelope fa-2x"></i></a></li>
<li><a href="#"><i class="fab fa-github fa-2x"></i></a></li>
<li><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
<li><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
<li><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
</ul>
</header>
<main class="img">
<amp-img
src="img/mayu.png"
width="300"
height="300"
hspace="5"
alt="山田麻由">
</amp-img>
</main>
<main style="line-height: 5;" class="text">
<p>
人とのつながりから生まれた
<br>
温かな想いを形にして発信できる
<br>
お手伝いができればと考えています。
</p>
</main>
<div id="service">* service *</div>
<div id="heart">
<div class="icon">
<i class="fas fa-heart fa-8x"></i>
</div>
<br>
<div class="text1">
<p>
病院管理栄養士として約2年勤務し、マクロビオティックカフェで1年勤務(アレルギー代替食対応)した経験を生かし、食事のアドバイスをさせていただいております。
</p>
<br>
<p class="small" style="font-size: 12px;">
※離乳食教室やアレルギー食などの経験がありますのでお気軽にご連絡ください。。
</p>
</div>
</div>
<div id="web">
<div class="icon">
<i class="fas fa-desktop fa-8x"></i>
</div>
<br>
<div class="text1">
<p>
コーディングを使ったサイトをメインにクライアント様の目線で制作することを心がけています。ユーザーが見やすいようなスマートフォン・タブレット対応もしております。
</p>
<br>
<p class="small" style="font-size: 12px;">
※SEOなどWebマーケティングは対応しておりません。
</p>
</div>
</div>
<div id="star">
<div class="icon">
<i class="fas fa-star fa-8x"></i>
</div>
<br>
<div class="text1">
<p>
性格やライフスタイルから西洋占星術や人相などから導き出し、もともとの弱い部分や今の体調にあった食事のアドバイスを占い視点でさせていただいております。
</p>
<br>
<p class="small" style="font-size: 12px;">
※科学的根拠は無く占いであることを
ご理解いただける方のみ鑑定させていただいております。
</p>
</div>
</div>
<footer class="nav2">
<ul>
<li><a href="#">Profile<a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</footer>
<footer class="copyright">
<p>© Mayu Yamada All rights reserved.</p>
</footer>
</div>
</body>

 

次はcss。

 css
tml {
height: 0;
margin: 0;
padding: 0;
border: 0;
}
body {
color: #333333;
line-height: 1.2;
font-family: "M PLUS 1p", sans-serif;
margin: 0 auto;
min-height: 100vh;
text-align: center;
}
.container {
justify-content: center;
display: grid;
grid-template:
"... ....... ....... ....... ....... ....... ....... ....... ....... ..." 50px
"... h2 h2 ....... ....... nav1 nav1 nav1 nav1 ..." 50px
"... ....... ....... ....... ....... ....... ....... ....... ....... ..." 50px
"... ....... img img img text text ....... ....... ..." 370px
"... ....... ....... ....... ....... ....... ....... ....... ....... ..." 100px
"... ....... ....... ....... service service ....... ....... ....... ..." 50px
"... ....... ....... ....... ....... ....... ....... ....... ....... ..." 50px
"... ....... heart heart web web star star ....... ..." 300px
"... ....... ....... ....... ....... ....... ....... ....... ....... ..." 200px
"... nav2 nav2 nav2 ....... ....... copy copy copy ..." 50px
"... ....... ....... ....... ....... ....... ....... ....... ....... ..." 50px
/ 6.25% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 6.25%;
}
.h2 {
grid-area: h2;
font-size: 2.5rem;
}
.nav1 {
grid-area: nav1;
}
.nav1 ul li {
list-style: none;
display: inline;
padding: 10px;
}
.img {
grid-area: img;
}
.img amp-img {
border-radius: 50%;
}
.text {
grid-area: text;
line-height: 5;
background: url(img/back.png) no-repeat;
background-size: 100%;
}
#service {
grid-area: service;
font-size: 2rem;
}
#heart {
grid-area: heart;
margin: 0 15px;
}
#web {
grid-area: web;
margin: 0 15px;
}
#star {
grid-area: star;
margin: 0 15px;
}
.text1 {
text-align: left;
line-height: 1.5;
}
.nav2 {
grid-area: nav2;
}
.nav2 ul li {
list-style: none;
display: inline;
padding: 10px;
}
.copyright {
grid-area: copy;
}
a {
text-decoration: none;
}
a:link{
color: #333333;
}
a:active{
color: #333333;
}
a:hover{
color: palevioletred;
}
a:visited{
color: #333333;
}
footer ul,
header ul {
padding: 0;
}

 

これを使ってレスポンシブ対応をしていきました。

レスポンシブ対応

またデザイン変えてしまいましたが…

(写真が苦手だから良い写真が無い…)

 

以下のレスポンシブ対応をしていきました。

 css
@media screen and (max-width: 1090px) {
.container {
justify-items: center;
display: grid;
grid-template:
"... ....... ..." 50px
"... h2 ..." 50px
"... ....... ..." 50px
"... nav1 ..." 50px
"... ....... ..." 50px
"... img ..." 300px
"... ....... ..." 10px
"... text ..." 370px
"... ....... ..." 50px
"... service ..." 50px
"... ....... ..." 50px
"... heart ..." 400px
"... ....... ..." 50px
"... web ..." 400px
"... ....... ..." 50px
"... star ..." 400px
"... ....... ..." 50px
"... nav2 ..." 50px
"... ....... ..." 50px
"... copy ..." 50px
"... ....... ..." 50px
/ 50px 1fr 50px;
}
}

 

ただgrid-templateで対応できたので本当に簡単でした!

 

もりけん先生の手直し

簡単といってもできていない部分があったので先生に質問しました。

 

 

一連の流れはこれ。

 

liが右寄りでgridの幅を変えても、他の部分をpadding0にしてもだめでした…

 

でもliが右寄りだとここまで分かっているにも関わらず、li{padding:0;}にたどり着かなかった自分が本気で悔しい><

おわりに

マークアップ言語はやりすぎると沼なので、JSをしっかりやっていこう!

 

そのときどきでマークアップを学んでいこう。

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada