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

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

お手本

受講の流れの部分をmain-14、空の背景の部分をmain-15と名付けました。

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

目次

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

私はmain-14のレスポンシブ対応でいくつかつまずいた点がありました。

左側の画像が中央ではなく、少し上の方にありますよね。
このずれを生み出すために少し苦労しました。

レスポンシブ対応させている途中で文字が勝手に改行する現象がありました。

widthを指定しても直らないので、調べたところwhite-spase: nowrap; という強制的に改行させない方法を発見しました!

実際に挑戦してみよう!

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

ぶーた作

ピンクの枠に囲まれた部分と線の画像をdisplay: flex; で縦に並べました!
つまずいたところは特になかったです。

一応、参考としてコードを載せておきます。

<div class="main-14">
        <h2>受講の流れ</h2>
        <img src="img/flow (1).jpg" class="flow-5">
        <div class="flows">
          <div class="flow">
            <div class="left">
              <img src="img/skypeconsulting.png">
              <h3>Skypeで<br>事前コンサル</h3>
            </div>
            <div class="right">
              <div>
                <h4>現在のスキルの状況、パソコンの環境説明、渡航での注意点を話します。</h4>
                <h4>簡単なテストあり</h4>
                <p>iSaraでは受講料を稼げることを保障しています。従って、事前コンサル時点で簡単なテストを実施し、場合によってはお断りをしております。(テストの内容はPCの基礎知識に関するテストですので、普段からパソコンを利用する方でしたら問題ありません。テストはもちろん無料ですので、まずはお問い合わせください。)</p>
              </div>
            </div>
          </div>
          <div class="flow-img">
            <img src="img/flowline1.png">
          </div>
          <div class="flow">
            <div class="left">
              <img src="img/preworks.png">
              <h3>事前課題の提出</h3>              
            </div>
            <div class="right">
              <div>
                <h4>出発前の1ヶ月前に事前課題を送ります。</h4>              
                <p>0から始めるプログラミング事前学習講座、環境構築の事前学習、jQueryの事前学習講座、Bootstrapの事前学習講座、PHP / Mysqlの事前講座</p>
                <h4>課題は多いですが、ここで努力が必須です。プログラミングは高付加価値なスキルです。そのためには学習が必須です。回数無制限のチャットサポート付きですので、最初は努力してください。また、参加者グループコミュニティも作成するので、横の繋がりでモチベーションを高めることもできます。</h4>
              </div>
            </div>
          </div>
          <div class="flow-img">
            <img src="img/flowline2.png">
          </div>
          <div class="flow">
            <div class="left">
              <img src="img/flight.png">
              <h3>現地に渡航</h3>              
            </div>
            <div class="right">
              <div>
                <h4>到着日には空港でお出迎えし、初日のオリエンテーションを行います。滞在先は空港からすぐの出来たてシェアハウス。美味しいタイ料理などもご紹介します。</h4>
                <h4>iSaraは『ノマド』フリーランス養成講座です。楽しいノマド体験ができるよう、バンコクでの生活はこちらでサポートします。</h4>
              </div>
            </div>
          </div>
          <div class="flow-img">
            <img src="img/flowline1.png">
          </div>
          <div class="flow">
            <div class="left">
              <img src="img/personwithlight.png">
              <h3>実案件を<br>通して学ぶ</h3>
            </div>
            <div class="right">
              <div>
                <h4>現役フリーランスが抱える案件に加え、クラウドソーシングを使って実案件をこなします。</h4>
                <h4>案件獲得のためのメールの書き方や見積りの仕方など、
                  <br>他のプログラミングスクールでは教えてくれない実務スキルを学ぶことができます。</h4>
                <p>*現役フリーランスがサポートします。</p>
              </div>
            </div>
          </div>
          <div class="flow-img">
            <img src="img/flowline2.png">
          </div>
          <div class="flow">
            <div class="left">
              <img src="img/jobsupport.png">
              <h3>帰国後の仕事獲得
                <br>サポート付き</h3>
            </div>
            <div class="right">
              <div>
                <h4>経験年数の少ないフリーランスが高単価で継続的に仕事受注するコツ、それがチームを組むことです。</h4>
                <h4>iSaraではフリーランスコミュニティを形成し、帰国後のエンジニアでも継続的に稼げる仕組みを提供します。</h4>
                <h4>もちろん、個人で十分に稼げるようになった場合はいつでも脱退できますし、制限などは何もありません。</h4>
              </div>
            </div>
          </div>
        </div>
</div>
.main-14 h2 {
    font-size: 1.8rem;
    padding-top: 64px;
    padding-bottom: 55px;
}
.main-14 .flow-5 {
    height: auto;
    width: 90%;
	max-width: 1200px;
    margin-bottom: 40px;
}
.main-14 .flows {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main-14 .flow {
    display: flex;
    width: 90%;
	 max-width: 1200px;
    background-color: rgb(254,245,224);
	 border-radius: 10px;
}
.main-14 .flow:last-child {
	 margin-bottom: 3%;
}
.flow .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 235px;
}
.flow .left img {
    height: 100px;
    width: 100px;
}
.flow .left h3 {
    font-size: 1.2rem;
}
.flow .right {
    width: 900px;
    height: 230px;
    padding: 20px 40px 20px 0;
    display: flex;
    align-items: center;
}
.main-14 .flow-img {
    height: 60px;
    width: 65%;
}
.main-14 .flow h4 {
    font-size: 1rem;
    text-align: left;
	 padding: 5px;
}
.main-14 .flow p {
    font-size: 1rem;
    text-align: left;
	  padding: 5px;
}
ぶーた

な…ながい…。

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

ぶーた作

main-15はmain-14より簡単ですね。

背景設定して、文字をcssでいじるだけで完成です!

<div class="main-15">
        <div class="text">
          <h2>なぜバンコクなのか?</h2>
          <p>ここまで見ると、iSaraは日本でも実施可能に見えます。<br>しかし、バンコクを選んだのには理由があります。</p>
          <ul>
            <li>・プログラミングフリーランスの最先端</li>
            <li>・水準は日本と同じなのに、生活費が安い(毎月8万円ほど)</li>
            <li>・昼、夜共に遊びが充実(稼ぐモチベーションアップと息抜きにGOOD)</li>
            <li>・日本人が住みやすい(食事が楽しい / 気候が良い / 親日である)</li>
          </ul>
          <h3>環境が大切。さらにこの価格が実現できるのが、バンコクなのです。</h3>
        </div>
</div>
.main-15  {
    background-image: url(../img/bangkokbgsp.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}
.main-15 .text {
    margin-left: 7%;
}
.main-15 h2 {
    padding-top: 130px;
    font-size: 2rem;
    text-align: left;
    padding-bottom: 20px;
}
.main-15 p {
    font-size: 1.1rem;
    text-align: left;
    padding-bottom: 10px;
}
.main-15 li {
    font-size: 1.3rem;
    text-align: left;
    font-weight: bold;
    list-style: none;
    padding: 8px;
}
.main-15 h3 {
    font-size: 1.4rem;
    text-align: left;
    padding: 20px 0 120px 0;
}

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

左のアイコン画像が少し左上になっているため、align-itemsjustify-contentflex-startを指定して、画像が一番左上に配置されるようにしました。

その後、marginでアイコン画像を調整して完了です!

@media screen and (max-width: 800px) {
    .flow-img,
    .flow .right,
    .flow-5 {
        display: none;
    }
    .main-14 h2 {
        font-size: 1.2rem;
        padding-bottom: 4vh;
    }
    .main-14 .res-2 {
        display: none;
    }
    .flow .left {
        flex-direction: row;
        gap: 1vh;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .flow .left img {
        height: 4.5vh;
        width: auto;
        margin: 2vh 0 0 2vh;
    }
    .flow .left h3 {
        white-space: nowrap;
        padding-top: 10%;
    }
    .flow {
        height: 13vh;
        margin: 1vh 25px;
    }
    .flow:last-child {
        margin-bottom: 20vh;
    }

}

幅を小さくすると文字の改行がなくなるため、<br class=”res-2″>とクラスを付けて、レスポンシブデザインではdisplay: none; を設定して改行をなくしました。

しかし、なぜか改行されるのでwhite-space: nowrap; を指定して強制的に改行をなくさせました!

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

ぶーた作

背景の位置が微妙にずれていたので、backgrround-position: top; と background-position: right; を指定するとうまくいきました!

@media screen and (max-width: 800px) {
    .main-15 {
        background-position: right;
        background-position: top;
    }
    .main-15 h2 {
        text-align: center;
        font-size: 1.4rem;
        padding: 6vh 0 2vh 0;
    }
    .main-15 p,
    .main-15 li {
        font-size: 0.9rem;
    }
    .main-15 h3 {
        font-size: 1.1rem;
        padding-bottom: 5vh;
    }
    .main-15 .res {
        display: block;
    }
} 

以上でmain-14とmain-15は終了です!

今回の部分ではaligin-items: flex-start; white-space: nowrap; など新しい発見がいくつかありました。

完成まであともう少しです!頑張ります。

↓続きはこちらの記事からどうぞ

広告

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

コメント

コメントする

目次
閉じる