コーディング４日目

投稿日：2021-11-19

更新日：2022-03-24

【フッター作成の例】

すでに作成済のヘッダーと似た構成である場合　
　　　　HTMLはコピペ、CSSはバリエーション追加

パーツ内容をヘッダーからコピペ

【HTML】

・「HeaderPC」内の構成を「Footer」にコピペしていく

・場所によってパーツの元デザインを変える場合は
　半角スペース+ハイフン始まりでclass名を付与する

　※例えば、文字色を白のバリエーションを作成する場合
　　元デザイン⇒「class=”Logo_link」
　　バリエーション⇒「class=”Logo_link -white」

【CSS】

「_Logo.css」に
<.Logo_link.-white { }>　を追加して設定を入れていく
★バリエーション用のClass名を書く前に半角スペースは入れない！

パーツのレイアウト

①「footer」にクラス名（Footer）を付与して「Footer_body」の枠を作成する

②中に、パーツを配置するボックスを配置する（「logo」「tel」「btn」）

③各BOXの中に先に作成していた各パーツを移し入れる

「Footer」のCSSを作成する

.Footer {
  background-color: #3f51b5;
  color: #fff;
  margin-top: auto;
}

.Footer_body {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: auto;
}

.Footer_logo {
  margin-right: auto;
}

コピーライト

　　<div class="Footer_copyright">
　　© 2021 西村小児科.
　　</div>

.Footer_copyright {
  font-size: .7em;
  text-align: center;
  padding: 20px;
}

【ページトップへ戻る」作成の例】

今回は、画面右下に固定配置＆フッターに被らないデザインにする

・場所移動する可能性があるパーツは新たにブロックを追加していく
　　（今はcontentに入れてるけど、後々footerに入れるかもなぁ～…とか）

①「tmp_common.html」の「<div class=”Content”>」の中にブロックを作成

      <div class="Pagetop">
        <a class="Pagetop_link" href="#top">▲</a>
      </div>

②<style.css> の「パーツデザイン」の箇所に @import url(_Pagetop.css); を追加

.Pagetop {
  position: sticky;
  bottom: 0;
  margin-bottom: 0;
  margin-right: 30px;
  z-index: 1000;
}

.Pagetop_link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  color: #fff;
  margin-left: auto;
  margin-bottom: 20px;
  font-size: 1.5em;
  background-color:
    rgba(50, 50, 50, 0.5);
  transition:
    background-color 0.5s;
}

.Pagetop_link:hover {
  background-color: #222;
}

・<display: flex;>でインライン要素（□）に幅＆高さを持たせて
　<justify-content: center;> と <align-items: center;> で中心に△が配置される

・<margin-bottom: 20px;> でフッターから20px上で止まるようにできる

◎本来は・・・

この辺までのテンプレ（tmp_common.html）の作成を完成させて
それを複製して各ページの作成をしていくのが一般的

メインビジュアルパーツの作成

トップページ用メインビジュアル作成

★TOPページのファイル名は必ず「index.html」とする！！

メインビジュアルは＜header＞の下に配置する

    </header>

    <div class="MainVisual">
      <div class="MainVisual_inner">
        <div class="MainVisual_content">
          
        </div>
      </div>
    </div>

続きは次回・・・

カテゴリー

ブログ一覧

コメントは受け付けていません。

コーディング ４日目