【プログラミング】iSara模写コーディング解説【ヘッダーの作り方】

プログラミング

模写するサイトとして有名な、iSara https://isara.life/ の模写解説をしていきます。

模写始めたけど、けっこう難しくって全然進まない…。

何とか進めるように手助けいたします。

✔本記事の内容

・iSaraのヘッダー部分の作り方を解説

この記事を書いている私は、プログラミングの学習を開始して2週間くらいでiSaraの模写に取り掛かりました。解説サイトはあるけど、自分のわからない部分の解説が飛んでいたりして、なかなか時間がかかりました…。

この解説記事ではどの記事よりも分かりやすい解説を目指して解説します。

レイアウトを組む

レイアウト

ページ全体のレイアウトを組む

まずはiSaraのページ全体を大まかに分けていきましょう。

こんな感じで、3つに分けました。

レイアウト

headerやsectionとしてますが、ここはblockでもなんでもOKですよ。

ヘッダーのレイアウトを組む

次は、少し細かくレイアウトを組んでいきます。

ヘッダーのレイアウト

外側から

  • header
  • container
  • item1とitem2
  • item1内に2つの要素

となっています。

ヘッダーとコンテナーどうしてわけるの?

私もここに最初つまづきました。

よーく見ると、item1とitem2の両端に、謎の余白があります。この余白をうまく再現するために、分けています。ぶっちゃけ、無理やりこの余白を作ることは可能ですが、微調整がメンドクサイので、オススメしません。

これでヘッダーを作る準備が完了しました。コードを書いていきましょう。

全コード

まずはヘッダー部分の全コードを紹介します。

解説に飛びたい方はコチラ

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>iSara模写</title>
  <link rel="stylesheet" href="index.html.css" >
</head>
<body>
  <header>
    <div class="container">
        <div class="item1">
          <img src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" >
          <p><b>バンコクのノマドエンジニア育成講座</b></p>
        </div>

        <div id="item2">
          <a href="#">お問い合わせ / 資料請求はこちら</a>
        </div>
      </div>
  </header>

CSS

html{
  margin:0;
  padding:0;
}
body{
  font-family:"Hiragino Kaku Gothic Pro";
  margin: 0;
  padding: 0;
  color:#333333;
}
header{
  background-color: white;
  width: 100%;
  margin:0.75rem 0;
  position: fixed;
  top:0;
  z-index:999;
}

header .container{
  max-width: 1170px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .item1{
  display: flex;
  align-items: flex-end;
}
    header img{
      width:30%;
    }
    header p{
      padding: 0;
      margin: 0;
      font-weight: 600;
      font-size: 14px;
    }
header a{
  font-size:15px;
  text-decoration: none;
  background-color:#da6b64;
  border-radius: 25px;
  color: white;
  padding: 0.7rem 2.4rem;
}

HTMLの解説

htmlの解説

HTMLはぶっちゃけ、ほぼ説明することはないです。強いて言えば、レイアウトに忠実に書くことがコツです。

豆知識エディターのVsCodeは、HTMLがまっさらな状態で半角の!と tabキー を押すとheadまでを一気に入力してくれます。

CSSの解説

全コードで書いたCSSの順番通りに解説していきます。

  • htmlとbody
  • header
  • container
  • item1
  • item1の画像とテキスト
  • item2の a

htmlとbody

✔ポイント

・marginとpaddingを0にする

marginとpaddingを0にしていないと、ブラウザによってはレイアウトが崩れる可能性があるので、CSSを書き始めたら、初めに指定する癖をつけましょう。

あとbodyにフォントと文字色を指定しています。

header

✔ポイント

・ヘッダーを固定する

iSaraのサイトをスクロールすると、ヘッダーが常に画面の上にくっついてきますね。こういうときは「position: fixed;」を使います。

このポジションタグは、marginやpaddingが無効になります。なので、「top:0;」で画面上にもってきた、といった感じです。

ポジションタグはちょこちょこ出てくるので、最初は理解に苦しみますが、使っていくうちになんとなくわかってくると思います。

「z-index:999;」は今は関係ないので、スルーしてください。簡単にいうと、文字が重らないようにするコードです。

container

✔ポイント

・最大幅を指定する

・marginで中央揃えにする

・item1とitem2を横並びにする+α

・最大幅を指定する

先ほども簡単に説明したように、ヘッダーの両端に、謎の余白があります。

chrome拡張機能を使って余白以外の部分を図ってみると、1170pxです。

この 1170px をcontainerの最大幅にしてあげましょう。

こうすることで、あとで微調整の必要がなくなります。ただ、これだけではiSaraのような余白にはなりません。iSaraのような余白を作るには次のコードが必要です。

marginで中央揃えにする

左右の余白を均等にするために、中央揃えにしましょう。これで謎の余白問題は解消します。

margin: 0 auto;

これは中央揃えの決まり文句なので、覚えましょう。よく使います。

・item1とitem2を横並びにする+α

今回は横並びにflexboxを使います。iSaraのサイトはfloatを使って横並びにしていますが、スマホ対応させるときにflexboxの方が確実に便利なのでflexboxを使うのがオススメ。

flexboxはこのサイトがすごくわかりやすいので、参考にしてください。

日本語対応!CSS Flexboxのチートシートを作ったので配布します
FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており

ただ、横並びにしただけではiSaraのようになりませんね。以下の2つをする必要があります。

  • item1と2を両端に寄せる
  • item1と2の上下の余白を均等にする

これをコードにすると…。こうなります。

justify-content:space-between;
align-items:center;

これもflexboxなので、上記のサイトを参考にしてください。

item1

✔ポイント

・flexboxで横並び、下揃え

再びflexboxの出番です。

コード間違ってないのに、flexboxが反映されない…

こういうときは、「display: flex;」などを子要素に指定してないか、確認してみてください。flexboxは親要素に指定することを忘れがちなので、気を付けて。

画像とテキスト(imgとp)

ここは微調整なのでさらっと。

imgはサイズを調整。

pは余白をなくして太さ、文字の大きさを変える。

終了。

pは勝手に余白がついてくるので、謎の余白がでてきたらmarginとpaddingを疑おう!ちなみにh1、h2も勝手についてくるから、気を付けて。

item2の a

a はリンクのタグなんですが、そのままだと勝手に下線が付いてきちゃいます。

下線退治の魔法をかけましょう。

text-decoration: none;

あとは、文字色、背景色、「border-radius」で丸みを調整して、「padding」でボタンの大きさを調整するだけ。

まとめ:ヘッダーはこれで完成!!

長々読んでくれて、ありがとうございます。お疲れ様でした!!!!

今回は以上です。

タイトルとURLをコピーしました