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

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

左側が3つ目の画面、右側が4つ目の画面になりますね。
3つ目の画面をmain-3、4つ目の画面をmain-4と名付けました。

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

目次

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

① 「」をつける

文字の左右に「」が設置されていますね。
一見難しそうに見えますが、beforeafterを理解していれば簡単でした!

② ABOUTマーク

こちらはcssでpositionを指定すれば、作成することができます。
positionはマイナスの値も指定できるので親要素を飛び出すこともできます。

③ 画像の配列

main-4では5つの画像が配置されています。
これらの画像をflexを使って並べ、画面の幅に応じて2列にしなければなりません!

そんな時に有効なのはflex-wrapです!

④ marginが親要素に適用される!?

cssでは頻出のmarginですが、一番最初の子要素にmarginを適用すると親要素にmarginが適用されてしまいます…。

ぶーた

ここで詰まってしまったのだ…。

しかし、ある1文を付け加えるだけで解決できました!

実際に挑戦してみる!

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

ぶーた作

ここで特徴的なのは「」ですね。
この部分はbeforeaftercontentを使用することで解決できます!

h2::before →h2の直前
h2::after →h2の直後
content →テキストを挿入する

contentはテキストを挿入しなくても利用できます。
そうするとただのブロックを生成できますね!

そのブロックの上と左側⁽または下と右側⁾にボーダーを設定すれば「」の完成です!

<div class="main-3">
        <h2>エンジニアとして本当の自由を手に入れるためには?</h2>
        <P>エンジニア需要の高まりに伴い、プログラミングスクールが増えています。</P>
        <p>しかしそこでの学習の先は、 提携して決められた就職先に就職すること。</p>
        <br>
        <p>これで本当にいいのですか?</p>
        <p>日本人エンジニアはアメリカと較べて給料が格段に低い。</p>
        <p>その理由がここにあり、 エンジニアは自分の給料をコントロールすべきなのです。</p>
        <br>
        <p>スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。</p>
        <p>そこで必要なのが<span>「稼ぐ力」</span>です。</p>
		  <h3 class="about">ABOUT</h3>
</div>
.main-3 {
    height: 585px;
    background-image: url("../img/introbottom.jpg");
    background-repeat: no-repeat;
    background-size: cover;
	 position: relative;
  background-position: bottom;
}
.main-3 h2 {
    font-weight: bold;
    font-size: 1.8rem;
	 padding: 30px 0;
    margin: 40px 0;
  position: relative;
	 display: block;
	  width: 70%;
}
.main-3 h2::before,
.main-3 h2::after {
	position: absolute;
	content: "";
	height: 50px;
	width: 50px;
}
.main-3 h2::before {
	top: 0;
	left: 0;
	border-top: 4px rgb(235,185,77) solid;
	border-left: 4px rgb(235,185,77) solid;
}
.main-3 h2::after {
	bottom: 0;
	right: 0;
	border-bottom: 4px rgb(235,185,77) solid;
	border-right: 4px rgb(235,185,77) solid;
}
.main-3 p {
    font-size: 1.2rem;
}
.main-3 p span {
    font-weight: bold;
    border-bottom: 3px rgb(235,185,77) solid;
}
.main-3 .about {
    color: white;
    background-color: rgb(235,185,77);
    border-radius: 50%;
    width: 80px;
    display: inline-block;
    text-align: center;
    line-height: 80px;
    position: absolute;
	 bottom: -40px;
	 left: 50%;
}

「」とABOUTマークはposition: absolute; 利用して設置することができました。
また、背景画像は下側を基準に配置しなければならないため、background-position: bottom; を指定する必要がありますね。

他にもABOUTマークの文字を中央寄せにするためにheight: 80px; ではなく、line-height: 80px; にする必要があります。

難しい点がいくつかあって、なかなか難易度が高いですね…。

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

ぶーた作

画面幅が小さくなると、改行が増えたり、「」の位置が変更されたりします。
改行の増やし方は前回の記事で紹介した技を使えば簡単ですね。

改行の増やし方は前回と同じなのでHTMLのコードは省略しますね。

ぶーた

微妙に違うのは許してほしいのだ…。

@media screen and (max-width:800px) {
	.main-3 {
		height: 635px;
	}
	.main-3 h2 {
		font-size: 0.9rem;
		margin: 30px 0;
		width: 90%;
	}
	.main-3 h2::before,
	.main-3 h2::after {
		height: 30px;
		width: 30px;
	}
	.main-3 p {
		font-size: 0.9rem;
	}
	.main-3 .res {
		display: block;
	}
}

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

ぶーた作

「」はmain-3の部分をコピペしちゃえば簡単に作れちゃいますね!

5つの画像が並んだ部分はdisplay: flex; で指定してjustify-content: center; で中央寄せにしました。
また、レスポンシブデザインを考慮に入れるとflex-wrap: wrap; を指定する必要がありますね!

flex: wrap → flexで指定したアイテムを折り返すためのプロパティ

<div class="main-4">
		<h2 style="margin-top: 50px">
		    <p>ノマドエンジニア育成講座</p>
			<p>iSara[イサラ]とは</p>
		</h2>
        <p class="forcas">「稼ぐこと」にフォーカスしたWebエンジニア育成講座です。</p>
        <div class="skill-5">
          <h3>稼げるエンジニアに必要な5つのスキルとは?</h3>
          <ul class="skills">
            <li>
              <img src="img/skill.jpg">
              <p>基礎的な</p>
              <p>プログラミングスキル</p>
            </li>
            <li>
              <img src="img/sales.jpg">
              <p>案件獲得に必要な</p>
              <p>営業力</p>
            </li>
            <li>
              <img src="img/document.jpg">
              <p>見積もり作成から</p>
              <p>納品までの知識</p>
            </li>
            <li>
              <img src="img/plusone.jpg">
              <p>自分の付加価値を</p>
              <p>高めるスキル</p>
            </li>
            <li>
              <img src="img/connection.jpg">
              <p>フリーランス同士の</p>
              <P>横のつながり</P>
            </li>
          </ul>
        </div>
      </div>
.main-4 {
  height: 670px;
  background-color: rgb(254,245,224);
	overflow: hidden;
}

.main-4 h2 {
  font-size: 2rem;
  padding: 30px 0;
	margin: 50px 0;
	position: relative;
	width: 70%;
}
.main-4 h2::before,
.main-4 h2::after {
	position: absolute;
	content: "";
	height: 50px;
	width: 50px;
}
.main-4 h2::before {
	top: 0;
	left: 0;
	border-top: 4px rgb(235,185,77) solid;
	border-left: 4px rgb(235,185,77) solid;
}
.main-4 h2::after {
	bottom: 0;
	right: 0;
	border-bottom: 4px rgb(235,185,77) solid;
	border-right: 4px rgb(235,185,77) solid;
}
.main-4 .forcas {
  font-size: 1.3rem;
  padding-bottom: 35px;
	font-weight: bold;
}
.skill-5 {
    height: 250px;
    width: 90%;
    background-color: white;
    border: 2px rgb(235,185,77) solid;
    border-radius: 5px;
}
.skill-5 h3 {
    padding-top: 35px;
    padding-bottom: 20px;
    font-size: 1.3rem;
}
.skills {
  display: flex;
	flex-wrap: wrap;
  justify-content: center;
	list-style: none;
	gap: 20px;
	width: 95%;
}
.skill-5 p {
	font-size: 0.9rem;
}
ぶーた

ふー…cssが長い…。

つまずきポイントでも取り上げたのですが、一番最初の子要素にmarginを適用すると親要素にmarginが適用されてしまい、少し詰まってしまいましたね。

調べてみると親要素にoverflow: hidden; をた追加することによって解決できました!

overflow: hidden; → はみ出た領域を非表示にする

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

ぶーた作

ここのレスポンシブデザインは比較的簡単ですね!

「」はmain-3と同じですし、改行されるのもばっちりできますし、5つの画像配置もflex-wrap: wrap; を指定しているので自動的に列が増えますね。

@media screen and (max-width:800px) {
	.main-4 {
		height: 710px;
	}
	.main-4 h2 {
		width: 90%;
		font-size: 1.2rem;
		margin-bottom: 30px;
	}
	.main-4 h2::before,
	.main-4 h2::after {
		height: 30px;
		width: 30px;
	}
	.main-4 .forcas {
		font-weight: normal;
		font-size: 1rem;
	}
	.skill-5 {
		height: 330px;
	}
	.skills img {
		height: 35px;
	}
	.main-4 .res {
		display: block;
	}
}

以上でmain-3とmain-4の模写コーディングが終わりました!
今回はかなりボリューミーな内容でしたね…。

まだ進行度としては20%くらいなので残り80%頑張りましょう!

↓次へ続く

広告

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

コメント

コメントする

目次
閉じる