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

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

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

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

全ての要素の文字色

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

3〜6行目のcolorについてです。

全体の文字の色は実は#000ではなく、少し色の薄い#333となっています。

前回まではfont-familyを全体の要素に適用させるために、親→子から継承されることを利用して、全ての親であるbodyをセレクタにしていましたよね。

同じ理屈でcolorもbodyをセレクタに適用しています。

メインビジュアル

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

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

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

82行目を見ると、.mainvisual__innerに対して、text-align: centerを指定しています。

text-align: centerは中のテキスト・インラインの子要素を中央寄せにするプロパティなので、まとめて中央寄せにすることができます。

自己紹介

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

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

.about__img{
  flex-basis: 35%;
}

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

162行目〜169行目にそれぞれの割合が書かれています。

そのうち、.about-contentは余白も含んでいるためmargin-left: 40pxで余白をとっています。

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

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

なお、calc関数を使って計算を行うことも可能です。

こちらの方がコードを書いた意図が伝わりやすいので良いかもしれませんね。

使用ソフト・言語

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

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

関連記事出力する画像素材の拡張子の選定方法

実績のご紹介

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

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

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

462行目を見るとfilterによって影が付けられています。

今回のケースはbox-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;
}

744行目〜754行目を見ると、「,（カンマ）」で区切り、共通のCSSをまとめて複数のセレクタに適用していますよね。

そして、dtだけ下に余白をつける必要があるため、独立したセレクタでmargin-bottom: 20pxだけを記述しています。

このように共通部分が多い時はセレクタをまとめることが多いです。

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

web兄さん

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

Category

Pickup

Contact

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