【模写】iSaraサイト模写 トップ編

isara 【プログラミング】


こんにちは、すずです。

現在、フロントエンドエンジニアの大定番「iSara」のサイト模写をやっています。
そこで得た知識をブログにアウトプットしていこうと思います。

では、早速参りましょう!

【模写】iSaraサイト模写 トップ編

  • 制作時間:1.5H
  • 作業:背景画像・ロゴ・テキスト追加、センタリング

こちらも一度組んだソースを、大幅に変更しました。

つまづいた部分とその解決法

背景画像の取得


まずはこのトップ画面の背景画像を取得する必要があります。

しかしながらこの背景画像は、Google Chromeの拡張機能「Image Downloder」でダウンロードすることができません。

これの解決法がこちら。

  1. Google Chrome画面で右クリック→[検証]を押す。
  2. 「Elements」の横の「>>」を押し、「Application」を押す。
  3. 「Frames」のtop\Images\main.jpg をダブルクリック。
  4. 画像を右クリックし「名前を付けて画像を保存」

これで無事に背景画像を取得することができます。

背景画像のレイアウト

背景画像を入手したところで、実際に配置してみたのですが、どうも表示がうまくいきません。

HTMLをこんな感じに書き、

<div class=“top”>
  <h1 class=“txt-l”>プログラミングで<br/>人生の安定を手にいれよう</h1>
  <img src=“./img/isaralogolarge.png” alt=“iSara” class=“logo-l” />
  <p class=“txt-m”>バンコクのノマドエンジニア育成講座<br />iSara[イサラ]</p>
</div>

CSSはこのように書きました。

.top {
  background-imageurl(../img/main.jpg);
  text-aligncenter;
  padding80px 0;
}

.txt-l {
  font-size28px;
  font-weight600;
  margin-bottom10px;
  line-height50px;
}

.logo-l {
  width317px;
  height111px;
}

.txt-m {
  font-size20px;
  font-weight600;
  margin-top30px;
}

すると、


画像の横幅が足りておらず、右端が中途半端に表示されています。

これの解決法がこちら。

CSSに、

.top {
  background-imageurl(../img/main.jpg);
  background-size: cover;
  text-aligncenter;
  padding80px 0;
}

.txt-l {
  font-size28px;
  font-weight600;
  margin-bottom10px;
  line-height50px;
}

.logo-l {
  width317px;
  height111px;
}

.txt-m {
  font-size20px;
  font-weight600;
  margin-top30px;
}

background-size: cover;」を追加すると、

お手本どおりに、背景画像を表示することができました。

まとめ

以上、iSaraサイト模写 トップ編でした。

今回、「Image Downloder」で取得できなかった画像を入手する方法を初めて知りました。
意外なところで詰まってしまいましたが、勉強になりました。

これから模写する方にも、今回の記事が役立てばいいなと思っております。

最後までお読みいただき、ありがとうございました!