使用ソフト・言語のセクション【ポートフォリオ作成】

バナー

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

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

更新日

#24  使用ソフト・言語のセクション【ポートフォリオ作成】

web兄さん

＼SHARE／

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

画像の名前のつけ方について

  • 基本的にクラス名と同じ名前（何に使用している画像かわかりやすくなる）
  • 同じような画像が複数ある場合は「〇〇__〇〇-〇〇.png」という形で共通部分+差分という形で名前をつける。例）「skill__icon-ai.png」「skill__icon-ps.png」など

動画内で書いたコード

<!-- 使用ソフト・言語 -->
<div class="skill">
    <h3 class="skill__headline">使用ソフト・言語</h3>
    <ul class="skill__list">
        <li><img class="skill__icon" src="img/skill__icon-ai.png" alt="Illustratorのアイコン">Illustrator</li>
        <li><img class="skill__icon" src="img/skill__icon-ps.png" alt="Photoshopのアイコン">Photoshop</li>
        <li><img class="skill__icon" src="img/skill__icon-xd.png" alt="Adobe XDのアイコン">Adobe XD</li>
        <li><img class="skill__icon" src="img/skill__icon-html.png" alt="HTML5のアイコン">HTML5</li>
        <li><img class="skill__icon" src="img/skill__icon-css.png" alt="CSS3のアイコン">CSS3</li>
    </ul>
</div>
<!-- /使用ソフト・言語 -->

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

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

flexで横並びの要素の配置のコントロールについて

justify-contentの値の種類

justify-contentを使用することでflexアイテム（子要素）の縦軸の配置をコントロールできます。

ヘッダーのセクションでは両端に配置するspace-betweenを使用しましが、今回は真ん中に揃えたかったのでcenterを使用しています。

flexで横並びの要素の横軸を中央で揃える方法

justify-contentの値の種類

align-itemsを使用することでflexアイテム（子要素）の横軸の配置をコントロールできます。

このセクションでは「アイコンとテキスト」の水平方向を真ん中に揃えるためにcenterを使用しています。

もちろん画像+テキスト以外にも、高さの違う画像同士やテキスト同士の水平方向を指定することもできます。

動画内で書いたコード

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

使用ソフト・言語

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

.skill {
  padding: 50px 0;
  background-color: #000000;
}

.skill__headline {
  margin-bottom: 40px;
  color: #ffffff;
  font-weight: 700;
  font-size: 24px;
  text-align: center;
}

.skill__list {
  display: flex;
  justify-content: center;
}

.skill__list li {
  display: flex;
  align-items: center;
  margin: 0 30px;
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  font-family: "Montserrat";
}

.skill__icon {
  margin-right: 20px;
}