【iSara模写コーディング】プログラミング歴1ヶ月の初心者が挑戦してみた!➃

今回、模写する部分はこちらになります!
コーディングも掲載しているのでぜひ参考にしてみて下さい。

左側が5つ目の画面、中央が6つ目の画面、右側が7つ目の画面になりますね。
5つ目の画面をmain-5、6つ目の画面をmain-6、7つ目の画面をmain-7と名付けました。

模写コーディングの様子を最初から見たい人はこちらの記事からどうぞ!

目次

この画面のつまずきポイント

ここまでの模写が一通りできていたら、この画面でつまずくことはあまりないかと思われますね。

① 横から縦

横並びだった要素が画面幅が小さくなると、縦並びになり、画面いっぱいに広がります。
flex-direction: column; を利用すれば簡単に攻略できますね!

② 横並びの要素

この横並びの要素も丸くしたり、flexboxを使用して並べるので手間はかかりますが、つまずくことも少ないでしょう。

実際に挑戦してみる!

デスクトップデザイン(main-5)

ぶーた作

特につまずいたところはなかったですね。
要素の角が丸くなっていたのでborder-radius: 5px; を指定しました!

以下にコードを載せておきます。

<div class="main-5">
        <h2>iSaraで「基本的なプログラミングスキル」は教えません</h2>
        <p>基礎的なプログラミングスキルは無料で学べる時代。</p>
        <p class="last">iSaraでは、基礎知識学習は<span>事前課題</span>と<span>チャットサポート</span>のみ。</p>
        <div class="steps">
          <div class="step">
            <p class="top">STEP.1</p>
            <p class="text normal">【バンコク渡航前1ヶ月】</p>
            <p class="text">事前課題で基礎知識を学ぶ</p>
          </div>
          <div class="step">
            <p class="top">STEP.2</p>
            <p class="text normal">【バンコク到着後】</p>
            <p class="text">実践的に稼ぐことに特化した学習</p>
          </div>
          <div class="step">
            <p class="top">STEP.3</p>
            <p class="text normal">【バンコク帰国後】</p>
            <p class="text">講座実施後の案件獲得サポート</p>
          </div>
        </div>
</div>
.main-5 {
    height: 520px;
    background-image: url("../img/aboutsecondbgsp.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.main-5 h2 {
    font-size: 2rem;
    padding-top: 60px;
    padding-bottom: 10px;
    color: white;
    font-weight: bold;
}
.main-5 p {
    font-size: 1.3rem;
    padding: 7px 0;
    color: white;
    font-weight: bold;
}
.main-5 .last {
	 margin-bottom: 50px;
}
.main-5 p span {
    color: rgb(235,185,77);
}
.main-5 .steps {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.step {
    height: 185px;
    width: 360px;
    background-color: white;
    border-radius: 5px;
}
.step .top {
    display: inline-block;
	 line-height: 25px;
    color: white;
    background-color: rgb(235,185,77);
    margin: 25px 0;
    border-radius: 5px;
    width: 90%
}
.step .text {
    padding-bottom: 10px;
    font-size: 0.9rem;
    color: black;
}

デスクトップデザイン(main-6)

ぶーた作

ここは今までで一番簡単ですね!
特に書くこともなし!

一応コードは載せておきます。

<div class="main-6">
        <p>スキルアップしてもフリーランスエンジニアとして食べていくことは難しい。</p>
        <p>フリーランスには <span>プログラミングスキル以外</span>が大切。</p>
</div>
.main-6 {
    height: 180px;
    background-color: rgb(1,110,169);
	 overflow: hidden;
}
.main-6 p {
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}
.main-6 p:first-child {
    margin-top: 45px;
}
.main-6 p span {
    color: rgb(235,185,77);
}
ぶーた

短い!!

デスクトップデザイン(main-7)

ぶーた作

さすがにここまでくると、flexboxの使い方にも慣れてきましたね。
つまずくところもあまりなさそうですね。

<div class="main-7">
        <h2>iSara[イサラ]で学べること</h2>
        <p>iSaraの学習では、エンジニアとして「稼ぐ」ための必要な能力を身につけます。</p>
        <div class="capacitys">
          <div class="capacity">
            <img src="img/salesskill.jpg">
          </div>
          <div class="capacity">
            <img src="img/knowledge.jpg">
          </div>
          <div class="capacity">
            <img src="img/skillup.jpg">
          </div>
          <div class="capacity">
            <img src="img/freelanceconnection.jpg">
          </div>
        </div>
        <p class="last-text">これらを教えるのがiSaraです。</p>
</div>
.main-7 {
    height: 500px;
}
.main-7 h2 {
    font-size: 2rem;
    padding: 50px 0;
}
.main-7 p {
    font-size: 1.3rem;
    padding-bottom: 25px;
}
.capacitys {
    display: flex;
    justify-content: center;
}
.capacity img {
    height: 20vw;
    max-height: 200px;
    width: auto;
    margin: 0 1vw;
}
.capacity p {
    color: white;
    font-weight: bold;
}
.main-7 .last-text {
    font-size: 1.1rem;
    font-weight: bold;
    padding: 46px 0;
}

ここまで来たらあとはレスポンシブ対応させるのみです!

ぶーた

今回はサクサク進むぞ!

レスポンシブデザイン(main-5)

ぶーた作

全然わからないってことはありませんでしたが、marginとpaddingの調節が大変ですね…。
けっこう時間がかかってしまいます。

それ以外は特に困ったことはないですね!
いつものごとく、改行をdisplayで調節しましたが、これセクションごとではなく全体で指定した方が楽ですね…。

@media screen and (max-width:800px) {
	.main-5 {
		height: 770px;
	}
	.main-5 h2 {
		font-size: 1.5rem;
	}
	.main-5 .basic {
		font-size: 0.8rem;
	}
	.main-5 .last {
		font-size: 1rem;
		margin-bottom: 20px;
	}
	.main-5 .steps {
		flex-direction: column;
	}
	.main-5 .step {
		height: 128px;
		width: 80%;
		margin: 0 auto;
	}
	.main-5 .top {
		line-height: 10px;
		font-size: 0.8rem;
		width: 75%;
		margin: 15px;
	}
	.main-5 .text {
		padding: 5px;
	}
	.main-5 .res {
		display: block;
	}
}

レスポンシブデザイン(main-6)

ぶーた作
ぶーた

瞬殺なのだ!

はい!ほぼ改行するだけですね。

@media screen and (max-width:800px) {
	.main-6 {
		height: 120px;
	}
	.main-6 p {
		font-size: 0.8rem;
	}
	.main-6 p:first-child {
		margin-top: 30px;
	}
	.main-6 .res {
		display: block;
	}
}

レスポンシブデザイン(main-7)

ぶーた作

改行を追加して、丸い要素を小さくしたらほぼできあがりです!

@media screen and (max-width:800px) {
	.main-7 {
		height: 370px;
	}
	.main-7 h2 {
		font-size: 1.5rem;
		padding-bottom: 30px;
	}
	.main-7 p {
		font-size: 0.9rem;
	}
  .main-7 .capacity img {
    height: 10vw;
    width: auto;
    }
	.main-7 .last-text {
		font-weight: normal;
	}
	.main-7 .res {
		display: block;
	}
}
うーま

capacitysではなく、capacitiesが正しいつづりなのでは?

ぶーた

ち、小さいことは気にしないのだ!

以上でmain-5~main-7は終了です!
なんか今回はあっさり終わった気がしますね。

↓次へ続く

広告

よかったらシェアしてね!
  • URL Copied!
  • URL Copied!

コメント

コメントする

目次
閉じる