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

プログラミングの学習を進めるうえで模写コーディングは必ず通る道です。
そして、模写コーディングの総まとめとして取り組まれることが多いサイトがiSaraというサイトになります。

iSaraはプログラミングスクールのサイトで、模写コーディングをした作品を自分の作品としてポートフォリオに組み込むことができます!

ぜひ模写コーディングに挑戦している人は、iSaraの模写コーディングもやってみましょう!

今回はサイトの中でも最初の画面の部分の固定ヘッダーを解説していきたいと思います。

この画像の上の部分になりますね。

目次

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

① 固定されたヘッダー

こちらの画面で特徴的なのは固定されたヘッダーですね!

このように画面を下にスクロールしても上のヘッダーは表示され続けていることが分かります。

② レスポンシブデザイン

そして、初心者にとってはレスポンシブも難しいですよね。

画面の幅を小さくすると右上のボタンが変化したり、左上の文字が2列になったりしていますね。

③ 右上のボタン

比較的簡単ではありますが右上のボタンも特徴的ですね。

では、つまずきポイントを攻略しながら早速やっていきましょう!

実際に挑戦してみる

デスクトップデザイン

まずはレスポンシブ対応は考えずにデスクトップのデザインを模写していきました。

良い感じですね!
配置はdisplay: flex; で指定してjustify-content: space-between; を使って左右に配置することができましたね。

右上のボタンはHTMLでaを指定して、border-radiusを使ったりして完成させました。

参考にこの部分のHTMLとcssを載せておきます。

 <header id="header">
      <div id="wrapper">
        <h1>
          <img src="img/isaralogo.png" id="title-img">
          <p>バンコクのノマドエンジニア育成講座</p>
        </h1>
        <a class="contact" alt="資料請求" href="#">お問い合わせ /資料請求はこちら</a>

  
      </div>
 </header>
#wrapper {
    display: flex;
    justify-content: space-between;
	height: 90px;
	width: 100%;
	background-color: white;
}
#wrapper h1 {
    display: flex;
}
#wrapper h1 img {
    width: 130px;
    height: 50px;
    margin: 5px 5px;
}
#wrapper h1 p {
    font-size: 0.9rem;
    margin-top: 25px;
}
#wrapper .contact {
    color: white;
    background-color: brown;
    display: inline-block;
    border-radius: 50px;
    padding: 4px 10px;
    font-size: 1rem;
    margin: 20px 18px;
	 line-height: 45px;
}
#wrapper ul {
    list-style: none;
}
ぶーた

フォントの違いや色の違いは許してほしいのだ…。

うーま

初心者はフォントや色にはこだわらずにサイトの構成を意識しよう!

ヘッダーを固定

次にヘッダーを固定させます。
ヘッダーを固定させるにはposition: fixed;を指定します。

#wrapper {
    display: flex;
    justify-content: space-between;
	height: 90px;
	position: fixed;
	width: 100%;
	background-color: white;
}

しっかり上に固定されてないですね…。
実はposition: fixed;を指定するだけでは問題があります

固定する位置を指定しなければなりません!

#wrapper {
    display: flex;
    justify-content: space-between;
	height: 90px;
	position: fixed;
	top: 0;
	width: 100%;
	background-color: white;
}

一番上に固定するためにtop: 0;を指定しましょう。
もしここでtop: 10pxを指定したら上のような画像になりますね。

ぶーた

しっかり上に固定できたのだ!

レスポンシブデザイン

まずは左側からレスポンシブ対応させていきます。
こんな風に変化させます。

左側はdisplay: flex; で配置している状態なのでこれを活かして、flex-direction: column-reverse; で2列に並び変えちゃいましょう!

@media screen and (max-width:800px) {

	#wrapper h1 {
		display: flex;
		flex-direction: column-reverse;
	}
	#wrapper h1 img {
		margin: 0;
	}
}

画像に指定していたmarginも0に変更しておきましょう!

これで左側のレスポンシブは完了です!
問題は右側です…。

明らかに変化していますね!
これはdisplay: none;を使用して対応しました。

まずはHTMLに資料請求の画像と文字を追加しておきましょう。

 <a class="contact" href="#">お問い合わせ /資料請求はこちら</a>
 <a href="#" class="small-contact">
     <img alt="資料請求" class="small-contact-img" src="img/form.png">
     <p>資料請求</p>
 </a>  
@media screen and (max-width:800px) {
	.small-contact {
		background-color: pink;
		display: block;
		height: 70px;
		width: 65px;
                padding-top: 20px;
		color: white;
		font-size: 0.7rem;
	}
	.small-content p {
		padding-top: 0;
	}
	#wrapper .contact {
		display: none;
	}
}

.small-contentをdisplay: none;で非表示にして、画面幅が小さくなったときはdisplay: block; で表示してみました。
一方、.contactの方は非表示にさせます。

これで固定ヘッダーは完成ですね!
たったの90pxでもこんなに時間がかかるなんて、模写コーディングは大変です…。

iSara模写コーディングは始まったばかりなのですべて終えれるように頑張りましょう!

お問い合わせアイコンをクリックしたらお問い合わせフォームに遷移する処理はこちらの記事で取り組んでいます。

↓次へ続く

広告

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

コメント

コメントする

目次
閉じる