#35  【チャレンジ課題】アレンジ版ポートフォリオの答え合わせをしよう

以下のZipファイルをダウンロードして自身のコードと比較をしていきましょう。

パスワードが必要です

これより先は有料コンテンツです。「ギャクサン」の購入ページから契約をしてください。
すでに契約済みの方でパスワードの入力が上手くいかない場合はサポートへ連絡してください。

送信する

ここからは正解コードの中でも特に説明が必要な箇所をピックアップして解説してきます。

全ての要素の文字色

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333333;
}

メインビジュアル

今回はメインビジュアルの中身が全て中央寄せになっていましたね。

メインビジュアルの中身は全てinlineまたはinline-blockなので、text-align: centerで中央寄せにすることが可能です。

.mainvisual__inner {
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
}

自己紹介

今回は前回と異なり、半分の2カラムではないため、それぞれの比率を求める必要があります。

計算式は、要素の幅 ÷ 全体の幅 × 100% = 要素の%です。

.about__img{
  flex-basis: 35%;
}

.about__content {
  flex-basis: 65%;
  margin-left: 40px;
}

.about__img{
  flex-basis: calc( 400 / 1140 * 100%);
}

.about__content {
  flex-basis: calc( 740 / 1140 * 100%);
  margin-left: 40px;
}

使用ソフト・言語

これらのアイコンはSVGでも書き出しが可能です。

画像の書き出し形式の判断については以下の記事を参考にしてください。

実績のご紹介

ふわっとした影でなく、塗りがはっきりとしている影がついています。

これは影のぼかし度合いを0pxにすることで実装することができます。

.works__img img {
  border-radius: 20px;
  filter: drop-shadow(10px 10px 0 #F9957F);
}

お客様の声

ここはいくつか解説項目があるので分けて解説をします。

１｜背景のグラデーション

背景色が単色からグラデーションになりました。

実はグラデーションはbackground-colorではなく、background-imageで使う値の1つです。

主に３つの値をカンマで区切って記述をします。

linear-gradient(方向や角度, 1つ目のカラーコード, 2つ目のカラーコード)

web兄さん

色が増えればその分だけカンマで繋ぐことで複雑なグラデーションを実装できます。
詳しくはこちらの記事を見てください。

ちなみに、Figmaの場合、要素を選択した時にグラデーションのCSSコードが出力されるのでそちらをコピペした方がより正確です。

というのもグラデーションの角度が絶妙な数値になっていることが多く、デザインの再現度を考慮するとコピペした方が良いからです👍

２｜ボックスの調整

今回はお客様の声は

• ボックスのテキスト量が違宇野に関わらず高さは一緒
• 名前+アイコン画像がボックスの下側に配置されているかつ中央寄せ

という少々複雑な条件になっています。

まず、ボックスの中身である、「テキスト」と「名前+アイコン」を「縦に並べる」という考えでdisplay:flexをかけます。

そして、中央寄せにしますが、縦に並ぶ場合の中央寄せはalign-items: centerでしたね。

というわけで以下のようなコードになります。

.review__each {
  background-color: #FFFFFF;
  flex-basis: calc(50% - 40px);
  padding: 40px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

続けて、「名前+アイコン」の配置箇所をボックスの下に揃えていきます。

この場合はmarginのautoを利用します。autoと聞くと「左右の余白を自動で付与してくれるテクニックだよね！」と思ってしまいがちですが、当然上下の余白を付与することも可能です。

対象の.review__authorの上の余白を自動で目一杯とることで、上のテキスト量に関わらず下に配置することができました。

.review__author {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
}

こちらについては難しいので動画でも解説をしています。

よくある質問

QとAのタグdtとddの見た目はほぼ同じですよね。

.question__list dt,
.question__list dd{
  padding: 25px 40px;
  font-size: 16px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
  line-height: 1.2;
  font-weight: 700;
}

.question__list dt{
  margin-bottom: 20px;
}

この課題に関して解説が必要な場合はslackへ

web兄さん

お疲れ様でした。上記に関して追加で解説が欲しい場合はどの部分の理解が難しいのかslackでご連絡ください！