記事一覧

WEBエンジニアになろう!- 第3回「一つのブロックと2列の組み方」

「WEBエンジニアになろう!」シリーズの目次

  1. 作りたいもの、必要なソフトウェア
  2. はじめは何すればいいの?作業環境と簡単なコーディング
  3. 一つのブロックと2列の組み方
  4. マークアップとスタイル 2
  5. マークアップとスタイル 3
  6. マークアップとスタイル 4…いつまで続く
  7. プロならここまでやります見せます

動画

こちらでYoutube配信もしてます!是非イイねとチャンネル登録お願いします

Youtube動画はこちら

一つのブロックを作ってみよう

今回使用する部分はこの部分!

前回とほぼ同じですが、2行2列のなんだかわからないものがありますね。

頑張りましょう

デザインデータはこちら

HTML(PUG)を組む

前回のソースコード少し変更します

h1.section_title Solutions
.solutions
    .solution
        h2.ttl 猫を吸う力を鍛える
        p.text.
            親譲りの無鉄砲で小供の時...

    .solution
        h2.ttl 猫を吸う力を鍛える
        p.text.
            親譲りの無鉄砲で小供の...

マップを確認しましょう

Chromeのアドオンに便利な機能があります。

headingsMap

https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi

SCSS(CSS)を組む

HTMLが正しくマークアップされていたら続いてはCSSです。

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    color: #343434;
}
.section_title {
    font-size: 70px;
    color: #AC2727;
    font-weight: 300;
    letter-spacing: 0.2em;
}
.solutions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    .solution {
        width: calc(50% - 8px);
    }
}
.solution {
    .ttl {
        font-size: 32px;
        font-weight: 600;
        letter-spacing: 0.15em;
    }
    .text {
        line-height: 2;
    }
}

コーディング代行

高品質なソースコードをお約束

詳しくはこちら
背景イメージ
背景はFreepikによるデザイン

information

お問い合わせ