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

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

背景が薄いピンク色の部分をmain-8、運営メンバーが紹介されている部分をmain-9と名付けました。

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

目次

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

① heightを指定しない

今までのiSaraの模写では区分ごとにheightを指定してました。

今まではそれで問題は起きなかったのですが、今回は画面幅を小さくすることによって、コンテンツがはみ出してしまう問題が発生しました。

コンテンツがはみ出ている

なのでこれからはheightを指定せずにmarginやpaddingで高さをそろえるように意識して模写していこうと思います。

height指定を外したらはみ出さない

② 運営メンバー紹介が複雑

main-9では運営メンバーの紹介欄があります。
画像が丸くトリミングされており、自己紹介は白い枠で囲われていますね。

さらにメンバー4人の要素をflex-wrapで折り返さなければなりません。
このようにmain-9は少し複雑になっているので、時間がかかりましたね…。

実際に挑戦してみる!

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

「」は3回目の登場なのでもう慣れたもんですね!
画像とテキストはdivでくくって、flexで横並びにすればOKです。

main-8はそこまで難しくない印象を受けました。
以下に参考としてコードを載せておきます。

<div class="main-8">
		  <div class="title">
			 <h3>他のプログラミングスクールとはここが違う!</h3>
			 <h2>iSara[イサラ]の3つのメリット</h2>
		  </div>
        <div class="merits">
          <div class="merit">
            <img src="img/learnfromfreelancer.jpg">
            <h3>現役フリーランスから学べる</h3>
            <p>他のプログラミングスクールとは違い、実際</p>
            <p>にフリーランスとして活動しているエンジニ</p>
            <p>アが直接講師を勤めます。</p>
          </div>
          <div class="merit">
            <img src="img/learnfromprojects.jpg">
            <h3>実践を通じて学べる</h3>
            <p>フリーランスにとって最短の学習方法は「実</p>
            <p>践」。iSaraでは実案件を通して学びます。</p>
            <p>現役フリーランサーの案件サポートに加え、</p>
            <p>クラウドソーシングを活用。初心者の自分じ</p>
            <p>ゃ無理と思うかもですが、現役フリーランス</p>
            <p>がサポートしますので大丈夫。</p>
          </div>
          <div class="merit">
            <img src="img/actuallyfree.jpg">
            <h3>授業料が実質0円</h3>
            <p>講座費用258,000円以上の金額が稼げるまで</p>
            <p>「永久サポート延長」があります。</p> 
          </div>
        </div>
        <div class="saport">
          <h2>さらに!帰国後もサポート付き</h2>
          <h3>リモートワーカーのチームを作ることで受注率、受注単価が大幅に向上します。</h3>
          <p>iSaraは講座が終わって終了ではありません。</p>
          <p>参加メンバーのチャットグループを作り、帰国後も継続的に案件参加できるようになります。</p>
          <p>また、チームで働くことで継続的に稼ぎやすい仕組みづくりも構築しております。</p>
        </div>
        <p class="last-text-1">事前課題ができない人はお断りしております。iSaraでは、無料で学べるプログラミング基礎知識は教えません。事前課題一覧はメールで送りつつ、</p>
        <p class="last-text-2">チャットサポートのみ。従って、本気で取り組まないと結果は出ません。</p>
 </div>
うーま

サポートの英語が間違ってるよ。
saportじゃなくてsupportだよ!

ぶーた

まあまあ、小さいことは気になさらずに…。

.main-8 {
  background-color: rgb(254,245,224);
	overflow: hidden;
}
.main-8 .title {
	position: relative;
	margin: 40px;
	width: 60%;
}
.main-8 .title h3 {
  font-size: 1.2rem;
	padding-top: 50px;
	padding-bottom: 10px;
}
.main-8 .title h2 {
  font-size: 2rem;
	padding-bottom: 50px;
}
.merits {
  display: flex;
  justify-content: center;
  gap: 30px;
	margin: 0 10px;
}
.merit {
	width: 30%;
}
.merit img {
    height: auto;
    width: 100%;
}
.merit h3 {
    color: rgb(235,185,77);
    font-size: 1.2rem;
    text-align: left;
    padding-top: 5px;
}
.merit p {
    font-size: 1rem;
    text-align: left;
}
.main-8 .title::before,
.main-8 .title::after {
	position: absolute;
	content: "";
	height: 50px;
	width: 50px;
}
.main-8 .title::before {
	top: 0;
	left: 0;
	border-top: 4px rgb(235,185,77) solid;
	border-left: 4px rgb(235,185,77) solid;
}
.main-8 .title::after {
	bottom: 0;
	right: 0;
	border-bottom: 4px rgb(235,185,77) solid;
	border-right: 4px rgb(235,185,77) solid;
}
.saport {
    width: 85%;
    background-color: white;
    border: 3px rgb(235,185,77) solid;
    border-radius: 5px;
    margin-top: 50px;
}
.saport h2 {
    color: rgb(235,185,77);
    font-size: 2rem;
    padding-top: 45px;
    padding-bottom: 0;
}
.saport h3 {
    padding: 10px;
    font-size: 1.3rem;
}
.saport p {
    font-size: 1rem;
    font-weight: bold;
}
.saport p:last-child {
    padding-bottom: 50px;
}
.main-8 .last-text-1,
.main-8 .last-text-2 {
    font-size: 1rem;
}
.main-8 .last-text {
    padding: 40px 0 50px 0;
}

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

複雑ながらもなんとか完成することができました。
丸い画像はposition: absolute; で指定したり、borderで白い枠を付けたり、flex-wrap: wrap; で折り返したりしました。

けっこう大変でしたね…。

うーま

運営メンバーの横にマークがないよ!

ぶーた

どっかにいってしまったのだ…。

<div class="main-9">
        <h2>運営メンバー</h2>
		   <h3>実際にフリーランスとして活躍しているエンジニアが運営しています</h3>
        <div class="intros">
          <div class="intro">
			    <img src="img/keisuke_someya.jpg">
            <p class="name-1">フリーランス講師</p>
            <p class="name-2">染谷 佳佑</p>
            <p class="coment">ISARA (THAILAND) CO.,LTD.の代表です。学生起業の後にリクルートへ就職、その後独立し、海外移住しました。今はフリーランスとしてリモートワークで日本円を稼ぎ、外国通貨に変えて使い、海外を旅してます。営業、ブログPVアップ(最高月間150万PV)、ビジネス構築が専門です。</p>
          </div>
          <div class="intro">
			      <img src="img/yuki.png">
            <p class="name-1">フリーランス講師</p>
            <p class="name-2">成田 雄輝</p>
            <p class="coment">バンコクのシェアハウスのオーナーをやりながら一年の大半をタイで過ごしています。 大学時代から今に至るまでネットだけで生計を立てているので、自由歴だけは講師陣の中で最長です! 母親がタイ人という事もありタイには精通してますので、こちらでの生活のサポートはお任せください!</p>
          </div> 
		      <div class="intro">
			      <img src="img/shohey.png">
            <p class="name-1">フリーランスエンジニア</p>
            <p class="name-2">大滝 昇平</p>
            <p class="coment">月の半分は東京の会社にリモートで勤めつつ、フリー でも活躍しているノマドwebディレクター兼エンジニアです。Laravel・WordPressでのweb制作がコア スキル。会社員とフリーランス、2つの顔があるから こそ、両方の側面からお話できるかと思います。宜し くお願いします!</p>
           </div>
           <div class="intro">
			      <img src="img/manabu.png">
            <p class="name-1">フリーランスエンジニア</p>
            <p class="name-2">坂内 学</p>
            <p class="coment">ITとセブ島とお酒を愛しています。新卒で海外就職して11ヶ月後に退職。今は日本にいたり海外にいたりでゆるくフリーランスをしています。</p>
            <br>
            <p class="coment">お仕事はWebマーケティングとプログラミングが専門領域です。</p>
          </div>
      </div>
</div>
.main-9 {
    background-image: url("../img/teacherbgsp.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.main-9 h2 {
    font-size: 2rem;
    padding-top: 82px;
    color: white;
}
.main-9 h3 {
    font-size: 1rem;
    color: white;
    padding: 40px 0;
	  margin-bottom: 15px;
}
.intros {
    display: flex;
    justify-content: center;
	  flex-wrap: wrap;
    gap: 30px;
	  width: 80%;
}
.intro {
    height: 430px;
    width: 345px;
    border: 3px white solid;
	  position: relative;
	  margin-bottom: 15px;
	  margin-top: 185px;
}
.intro img {
    height: 200px;
    border-radius: 50%;
	  position: absolute;
	  top: -160px;
	  left: 22%;
}
.intro .name-1,
.intro .name-2,
.intro .coment {
    color: white;
    font-size: 1.2rem;
}
.intro .name-1,
.intro .name-2 {
    text-align: center;
	  padding-bottom: 15px;
}
.intro .name-1 {
	  padding-top: 65px;
}
.intro .coment {
    text-align: left;
    padding-right: 40px;
    padding-left: 40px;
    line-height: 1.6rem;
	  font-size: 1rem;
}

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

そこそこ時間がかかりましたが、良い感じにレスポンシブ対応することができました!
やっぱり、heightを指定しないと楽に操作できますね。

@media screen and (max-width:800px) {
	.main-8 .title {
		width: 90%;
	}
	.main-8 .title h2 {
		font-size: 1.2rem;
		padding-bottom: 30px;
	}
	.main-8 .title::before,
	.main-8 .title::after {
		height: 30px;
		width: 30px;
	}
	.main-8 .merits {
		flex-direction: column;
	}
	.main-8 .merit {
		width: 90%;
		margin: 0 auto;
	}
	.main-8 .merit img {
		width: 80%;
		height: auto;
	}
	.main-8 .merit h3,
	.main-8 .merit p {
		text-align: center;
	}
	.main-8 .merit p {
		font-size: 0.9rem;
		width: 100%;
	}
	.main-8 .saport h2{
		font-size: 1.2rem;
	}
	.main-8 .res {
		display: block;
	}
}

ここで、画像の縦横比を保ったまま画像を大きくする方法を知りました!
height: auto; width: auto; を指定すればOKです。

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

main-9でのレスポンシブ対応としては、丸画像の大きさや配置を調整したり、自己紹介欄の枠を変更したりしました。

思ったより、すらすらと進みました!

@media screen and (max-width: 800px) {
	.main-9 h2 {
		font-size: 1.2rem;
	}
	.main-9 .intros {
		width: 90%;
	}
	.main-9 .intro img {
		height: 130px;
		left: 40%;
	  top: -100px;
	}
	.main-9 .intro {
		width: 100%;
		height: 230px;
		margin-top: 70px;
	}
	.main-9 .intro p {
		font-size: 0.8rem;
	}
	.main-9 .intro .name-1 {
		padding-top: 50px;
	}
	.main-9 .res {
		display: block;
	}
}

これでmain-8main-9は終了です!

今回は意外と時間がかかりました…。
次も頑張ります!

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

広告

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

コメント

コメントする

目次
閉じる