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

前回は固定ヘッダーをコーディングすることができました!
今回はいよいよメインの部分に入っていこうと思います。

模写する部分はこちらになります。

左はサイトを開くと出てくる一番上の画面ですね。main-1 と名付けますね。
右は左の画面の下の部分になります。main-2と名付けます。

目次

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

① 背景の設定

模写コーディングでは背景の設定が難しいですよね。
しかし、個人的にはシンプルな設定で模写することができたので、難易度は低めな気がします。

② レスポンシブによる改行

画面幅を小さくすると「こちら」が改行されます。

ぶーた

わざわざ改行しなくても見やすいのに…。

この改行に意外とてこずりましたが、調べるとある技に出会いました!
こんな考え方もあるのかと目からうろこでしたね。

③ いいねボタン

いいねボタンってどうコーディングすればいいんだ?めちゃくちゃ難しそう!と思ったのですが、これはコピペで一件落着です(笑)。

実際に挑戦してみる!

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

ぶーた作

ここはつまずくことなく、サラッと書けた気がします!
画像が文字に挟まれてますね。

参考のため、コードを載せておきます。

<div class="main-1">
        <p class="main-1-big">プログラミングで
		 <br>
		  人生の安定を手に入れよう
		</p>
        <img src="img/isaralogo.png" id="main-1-img">
        <p class="main-1-small">バンコクのノマドエンジニア育成講座  <br>
		  iSara[イサラ]
		</p>
</div>
.main-1 {
    height: 580px;
    background-image: url("../img/mainsp.jpg");
    background-size: cover;
    text-align: center;
	 display: flex;
	 flex-direction: column;
}
.main-1-big {
    font-weight: bold;
    font-size: 1.8rem;
	 display: inline-block;
	 margin-top: 220px;
}
#main-1-img {
	width: 300px;
  display: block;
	margin: 20px auto;
}
.main-1-small {
  font-size: 1.2rem;
  font-weight: bold;
	display: inline-block;
}

親要素である.main-1でtext-align: center;を指定することによって、文字は画面の中央に寄りますが、画像は中央に寄りません。

なので、画像にはdisplay: block;を指定して、margin: 20px auto;で中央寄せしています!

ぶーた

このくらい朝飯前なのだ!

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

ぶーた作

画面幅を小さくすると全ての要素が大きくなり、main-1のheightも大きくなります。

ここもサラッとコーディングすることができました!
レスポンシブデザインのコーディングも載せておきますね。

@media screen and (max-width:800px) {
		.main-1 {
			height: 660px;
		}
		.main-1-big {
			font-size: 2.3rem;
		}
		#main-1-img {
			width: 500px;
			margin: 0 auto;
		}
		.main-1-small {
		  font-size: 1.7rem;
		}
}

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

ぶーた作

main-2のデスクトップデザインで厄介だったのは真ん中のボタンですね!
「お問い合わせ&資料請求はこちら」という場所です。

ここで私はpaddingでボタンを作成してしまったのですが、これだと画面幅が小さくなった場合に見切れてしまうのでpaddingではなく、widthで指定しなければなりません。

また、widthはpxで指定するとレスポンシブに対応できないため、%で指定しましょう!

いいねボタンはコピペしました!
HTMLのコーディングを参考にしてみて下さい。
<iframe~のところですね。

<div class="main-2">
        <p class="top">まずは20日間で</p>
        <P class="top">月10万円稼げるスキルを手に入れよう。</P>
        <p class="alart">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</p>
        <p><a href="#">お問い合わせ&資料請求はこちら</a></p>
        <p class="bottom">第4期生 : 2018年12月3日 ~ 2018年12月22日  *締め切りました</p>
        <P class="bottom">第5期生:2019年4月8日 ~ 2019年4月27日  *締め切りました</P>
        <p class="bottom">第6期生:資料請求受付中です</p>
        <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=150&layout=button&action=like&size=small&share=true&height=65&appId" width="150" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
.main-2 {
    height: 620px;
    background-color: rgb(235,185,77);
}
.main-2 p {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}
.main-2 .alart {
    color: red;
    font-size: 1.4rem;
    background-color: white;
    display: inline-block;
	 font-weight: normal;
	 margin-top: 20px;
}
.main-2 p a {
    color: white;
    background-color: brown;
    display: inline-block;
    border-radius: 200px;
 	width: 85%;
    padding:25px 0;
    font-size: 1.7rem;
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 50px;
}
.main-2 .top:first-child {
    padding-top: 20px;
}
.main-2 .bottom {
    padding: 10px;
}

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

ぶーた作

ここでつまずいたのは「こちら」の改行ですね。
どうすればいいのか調べたところ、<br>の表示と非表示を切り替える方法を発見しました。

具体的には<br>にクラスを指定して、デスクトップデザインの時には非表示にしておいて、画面幅が小さくなったら表示させるというものです!

詳しくはコーディングをご覧ください。

<p><a href="#">お問い合わせ&資料請求は<br class="res" />こちら</a></p>

こんな感じでクラスを指定した<br>を設置します。

@media screen and (max-width:800px) {
	.main-2 {
		height: 445px;
	}
	.main-2 p {
		font-size: 1rem;
		font-weight: normal;
	}
	.main-2 p a {
		width: 90%;
		padding: 18px 0;
		font-size: 1rem;
		margin: 15px auto;
	}
	.main-2 .alart {
		font-size: 1rem;
		font-weight: bold;
	}
	.main-2 .res {
		display: block;
	}
}

.resは非表示にしておいて、画面幅が小さくなったらdisplay:block;で表示させます。
そうすると改行されます!

ぶーた

感動なのだ!

以上でiSara模写コーディング②を終わります。
個人的には改行に感動!

↓次へ続く

広告

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

コメント

コメントする

目次
閉じる