自己紹介のセクション【ポートフォリオ作成】

バナー

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

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

更新日

#23  自己紹介のセクション【ポートフォリオ作成】

web兄さん

＼SHARE／

ここからは別のFigmaを開いてコーディングをしていきます

Figmaを開く

以下のボタンからFigmaを開いて

Figmaでデザインデータを開く

パスワード「webliker_portfolio」を入力します。

デザインデータを開く

パスワードが正しければ、左の画面になります。

ログインしていない方はログインして確認しましょう。

１｜HTMLのコーディングをしよう

動画解説のポイントまとめ

見出しのつけ方

  • h1はそのページのタイトルとなる部分につける
  • h2はページの情報をセクションに区切った時の見出しにつける
  • h3はh2の情報をさらに分類した場合の見出しについける（h4〜h6は同じ要領）

class名のつけ方

class名を<タグ名 class="〇〇__〇〇">からさらに細かく命名したいときは<タグ名 class="〇〇__〇〇-〇〇">とすると良い（例：span class="about__headline-en"）

動画内で書いたコード

<!-- 自己紹介 -->
<div class="about">
    <div class="about__inner">
        <div class="about__img">
            <img src="img/about__img.png" alt="プロフィール写真">
        </div>
        <div class="about__content">
            <h2 class="about__headline">
                <span class="about__headline-en">About</span>
                <span class="about__headline-jp">自己紹介</span>
            </h2>
            <p>学生時代に「WEBサイトを自分で作りたい！」と思ったことがきっかけでコツコツと独学開始しました。</p>
            <p>大学卒業後はWEB制作会社に就職し、5年間「WEBデザイナー」として、3年間「WEBディレクター」として働き、現在はフリーランスとして活動しています。</p>
            <p>ぜひ、あなたのWEBサイト作りをお任せください。</p>
        </div>
    </div>
</div>
<!-- /自己紹介 -->

２｜CSSのコーディングをしよう

動画解説のポイントまとめ

marginの相殺（解説記事）

上下に並んだ要素（兄弟要素）にそれぞれmargin-topとmargin-bottomがある場合は「数字の大きなmarginだけ適用」されます。

例では要素02のmargin-bottom:10pxは無効化され、要素01のmargin-top:30pxのみ適用されます。

連続した要素をセレクタにする（解説記事）

一つ目の要素以外をセレクタにしたい場合、〇〇+〇〇をセレクタにすることで隣同士になっている後ろ側の要素をセレクタにすることができます。

p+p{
  color: red; /*pと隣のpだけ赤色にする*/
}

例ではp+pとしていますが、もちろんdiv+h2（divの次のh2をセレクタ）という別々の要素が並んでいる場合もセレクタにすることが可能です。

line-heightは単位なしの指定も可能

今回の講座では初学者向けの解説の便宜上、line-heightはfigmaの指定に沿って、「%」の単位で解説しています。しかし、line-heightは一般的に単位なしで指定することが多いです。

p{
  font-size: 16px;
  line-height: 200%;  /*2文字分*/
}

p{
  font-size: 16px;
  line-height: 2;  /*2文字分*/
}

例えば、左の例のように、書いた場合どちらも「32px」分の行間が開きます。

具体的な違いは改めて別の記事で解説しますが、間違って覚えているというレベルではないので一旦ポートフォリオサイトの作成は「%」の単位で進めてください。

動画内で書いたコード

/* ===========================

自己紹介

=========================== */

.about {
    padding: 130px 0;
}

.about__inner {
    display: flex;
    max-width: 1140px;
    margin: 0 auto;
}

.about__img {
    flex-basis: 50%;
}

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

.about__headline {
    margin-bottom: 30px;
}

.about__headline-en {
    display: block;
    margin-bottom: 10px;
    color: #7768ed;
    font-weight: 700;
    font-size: 20px;
    font-family: "Montserrat";
}

.about__headline-jp {
    font-weight: 700;
    font-size: 32px;
}

.about__content p {
    font-size: 16px;
    line-height: 200%;
}

.about__content p + p {
    margin-top: 25px;
}