デイトラweb制作中級編 DAY13
nakano
横並びカードのコーディング
①HTML
section 「.card」
<section class="card">
<div class="card__inner inner">
<div class="card__head">Card</div>
<div class="card__items">
<div class="card__item">
<div class="card__img"><img src="./img/card-img.png" alt=""></div>
<div class="card__title">タイトルタイトル</div>
<div class="card__text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
<div class="card__item">
<div class="card__img"><img src="./img/card-img.png" alt=""></div>
<div class="card__title">タイトルタイトル</div>
<div class="card__text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
<div class="card__item">
<div class="card__img"><img src="./img/card-img.png" alt=""></div>
<div class="card__title">タイトルタイトル</div>
<div class="card__text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
<div class="card__item">
<div class="card__img"><img src="./img/card-img.png" alt=""></div>
<div class="card__title">タイトルタイトル</div>
<div class="card__text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
<div class="card__item">
<div class="card__img"><img src="./img/card-img.png" alt=""></div>
<div class="card__title">タイトルタイトル</div>
<div class="card__text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
<div class="card__item">
<div class="card__img"><img src="./img/card-img.png" alt=""></div>
<div class="card__title">タイトルタイトル</div>
<div class="card__text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
</div>
</div>
</section>②SCSS「.card」~ 「.card__head」
.card {
background: #efefef;
// 上 左右 下
padding: 100px 0 120px;
@include mq('sp') {
padding-top: 50px;
padding-bottom: 60px;
}
}
.card__inner {
}
.card__head {
font-size: 48px;
font-weight: 700;
text-align: center;
// 24px + 4px (bar込み)
padding-bottom: 28px;
position: relative;
&::after {
content: "";
position: absolute;
// 左右中央
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 60px;
height: 4px;
background: $color-main;
@include mq('sp') {
width: 42px;
height: 3px;
}
}
@include mq('sp') {
font-size: 26px;
padding-bottom: 18px;
}
}・左右中央に配置
セレクタ {
left: 50%;
transform: translateX(-50%);
}
・上下左右中央に配置 → 中級編 DAY12 の「.main-visual__content」で使用
セレクタ {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
③SCSS「.card__items」~「.card__item」
.card__items {
margin-top: 80px;
display: flex;
// 子要素の折り返し
flex-wrap: wrap;
@include mq('sp') {
margin-top: 42px;
}
}
.card__item {
// 横幅をぴったりさせる
width: calc(33.3% - 24px * 2 / 3);
background: #fff;
padding: 16px;
@include mq('pc') {
// (3n + 1)番目の要素を指定
&:not(:nth-child(3n + 1)) {
margin-left: 24px;
}
&:nth-child(n + 4) {
margin-top: 24px;
}
}
@include mq('tab') {
width: calc(50% - 24px * 1 / 2);
&:not(:nth-child(2n + 1)) {
margin-left: 24px;
}
&:nth-child(n + 3) {
margin-top: 24px;
}
}
@include mq('sp') {
width: 100%;
margin-left: 0;
&:nth-child(n + 2) {
margin-top: 24px;
}
}
}・子要素の折り返し
セレクタ {
display: flex;
flex-wrap: wrap;
}
「flex-wrap」プロパティ
nowrap（初期値）・・・ 子要素を折り返さない
wrap ・・・ 子要素を折り返し、上から下に並べる
wrap-reverse ・・・ 子要素を折り返し、下から上に並べる
・余白を意識した横並び
セレクタ {
width: calc(100% / カード枚数 - 余白の幅 * 余白の数 / カード枚数);
}
・「:not」+「:nth-child」
:not (:nth-child(n)) {
n番目以外に適用したいCSS
}
④SCSS「.card__img」~「.card__text」
.card__img {
img {
}
}
.card__title {
font-size: 20px;
font-weight: 700;
color: #6F7579;
margin-top: 14px;
}
.card__text {
color: #6F7579;
font-weight: 700;
// 行送り ÷ 文字サイズ
line-height: (24 / 16);
margin-top: 14px;
}まとめ
今回は横並びカードのコーディングをしました！
動画に頼らずにできるところまで一人でコーディングするのですが、やはりすぐに躓いてなかなか思うようにいきませんね。
特にレスポンシブ対応がうまくいかず、動画内のコーディングを見て、速いなぁ正確だなぁと思いながら自分がコーディングしたものを直しました。
