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

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

お手本

背景が黄色いタイトル部分をmain-10、企業の紹介部分をmain-11と名付けました。

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

目次

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

① 飛び出るmain-10

main-10の中央下が三角に飛び出しています。

ぶーた

こりゃどうやってやるんだ…。

私は、HTMLで中身のないdivを作成し、heightとwidthで四角を作成し、transform: rotate(); で回転させることにより、完成させました!

② 画面幅が小さくなると文字も小さくなる

今まで私は文字を指定する際、pxやremを使用していましたが、ここではvwが使われてるっぽいですね。

em親要素に対してのサイズ 1emなら親要素の文字と同じ、0.5emなら親要素の文字の半分
remhtmlに対してのサイズ htmlのデフォルト値は16pxなので、1rem=16pxである
vh画面の高さに対するサイズ 1vhなら画面の高さの1%
vw 画面の幅に対するサイズ 1vwなら画面の幅の1%

vhやvwはレスポンシブ対応に使えそうですね!

ぶーた

これでスキルアップなのだ!

実際に挑戦してみよう!

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

ぶーた作

「」や丸の中に文字は以前にも出てきたので、慣れたもんです。
ここの問題点は下の飛び出た三角ですね!

この三角の作り方は「」と似てますね。
「」と違う点はbackground-colortransform: rotate(); を指定する点ですね。

以下に参考としてコードを載せておきます。

<div class="main-10">
        <p>Q&A</p>
        <h2>ノマドエンジニアとして自由にに稼ぐことは<br>本当に」可能なのか?</h2>
        <div class="triangle"></div>
</div>
.main-10 {
    background-color: rgb(235,185,77);
    height: 290px;
    position: relative;
}
.main-10 p {
    display: inline-block;
    width: 80px;
    border-radius: 50%;
    background-color: white;
    color: rgb(235,185,77);
    margin: 40px 0 15px 0;
    line-height: 80px;
    text-align: center;
}
.main-10 h2 {
    color: white;
    font-size: 2vw;
    width: 65%;
    position: relative;
    height: 100px;
    margin: 10px 0;
    vertical-align: middle;
    display: table-cell;
}
.main-10 h2::before,
.main-10 h2::after {
	position: absolute;
	content: "";
	height: 50px;
	width: 50px;
}
.main-10 h2::before {
	top: 0;
	left: 0;
	border-top: 4px white solid;
	border-left: 4px white solid;
}
.main-10 h2::after {
	bottom: 0;
	right: 0;
	border-bottom: 4px white solid;
	border-right: 4px white solid;
}
.triangle {
    background-color: rgb(235,185,77);
    position: absolute;
    height: 35px;
    width: 35px;
    transform: rotate(45deg);
    bottom: -18px;
    left: 48%;
}

transform: rotate(45deg); 45degは45度回転するという意味です。
45度回転するとひし形になりますね!

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

ぶーた作

ここは結構簡単でしたね!
flexを2つ使って画像やテキストを配置しました。

こんな感じですね。

<div class="main-11">
        <h2>実現可能です</h2>
        <h3>その証拠に第三者の声を聞いてみました。</h3>
        <p class="alart">*実際にフリーランスエンジニアを採用する企業様から、メッセージをいただきました。</p>
        <div class="corps">
          <div class="corp">
            <img src="img/take.jpg">
            <div class="coments">
              <p class="coment">リモートワークという言葉がありますが、弊社では何も気にしません。エンジニアに求めるのは、快適なコミュニケーションと信頼と成果物のみ。</p>
              <p class="name"><i>Kredo IT Abroad . Inc</i> 代表取締役 横田 猛夫</p>
            </div>
          </div>
          <div class="corp">
            <img src="img/minami_sato.jpg">
            <div class="coments">
              <p class="coment">社内でスキルのある人材を採用するのは難しい。外部パートナーとして継続的に依頼できるフリーランスには助かっています。</p>
              <p class="name"><i>SAPEUR . Inc</i> 代表取締役 佐藤 陽</p>
            </div>
          </div>
          <div class="corp">
            <img src="img/asada.jpg">
            <div class="coments">
              <p class="coment">プログラマーが足りていないときに外部リソースとして、フリーランスに発注しています。今はどこの会社でもエンジニアが不足していますね</p>
              <p class="name">株式会社<i>BeautifulWorks</i> 代表取締役 淺田 百合</p>
            </div>
          </div>
        </div>
</div>  
.main-11 {
    height: 1080px;
}
.main-11 h2 {
    font-size: 2rem;
    padding-top: 45px;
}
.main-11 h3 {
    font-size: 1rem;
    padding: 20px 0;
}
.main-11 .alart {
    font-size: 1rem;
    padding: 10px 0 30px 0;
}
.corps {
    display: flex;
    flex-direction: column;
    gap: 38px;
}
.corp {
    display: flex;
    gap: 30px;
    margin: 0 auto;
}
.corp img {
    height: 245px;
    width: 240px;
    border: 2px rgb(235,185,77) solid;
}
.corp .coments {
    color: gray;
    width: 490px;
    text-align: left;
}
.corp .coment {
    font-size: 1.2rem;
}
.corp .name {
    font-size: 1.1rem;
    text-decoration: underline;
}

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

ぶーた作

「」の幅が長くなったり、下の三角が小さくなったりと細かな変更点がいくつかありました。
難しいところはなさそうですね。

@media screen and (max-width: 800px) {
    .main-10 {
        height: 215px;
    }
    .main-10 p {
        line-height: 60px;
        width: 60px;
        margin-top: 20px;
    }
    .main-10 h2 {
        font-size: 0.8rem;
        width: 95vw;
        height: 80px;
        padding: 5px;
    }
    .main-10 h2:before,
    .main-10 h2:after {
        height: 30px;
        width: 30px;
    }
    .main-10 .triangle {
        height: 23px;
        width: 23px;
        bottom: -12px;
    }
}

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

ぶーた作

ここも細かい作業をするだけで、特に難しいところはありませんね!

@media screen and (max-width: 800px) {
    .main-11 {
        height: 900px;
    }
    .main-11 h2 {
        font-size: 1.2rem;
    }
    .main-11 .alart {
        font-size: 0.8rem;
    }
    .corp img {
        height: 170px;
        width: 170px;
        margin-left: 10px;
    }
    .corp .coment,
    .corp .name {
        font-size: 1rem;
    }
    .corp .name {
        margin-top: 15px;
    }
    .main-11 .res {
        display: block;
    }
}

以上でmain-10main-11は終了です!

今回はvhvwtransform: rotate(); を知ることができました!
少し成長ですね。

それにしても変なクラス名をどうにかしたいです…。

↓次へ続く

広告

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

コメント

コメントする

目次
閉じる