日々地道に成長

思いついたことを書いていきます。

UNDERTALE風webサイト制作#2

お疲れ様です。コーヒーです。

第9回も引き続きHTML&CSSとWEBデザイン実践編です!

前回は企画からデザインカンプの制作まで終了しました!

第8回:

https://stady-diary.hatenablog.com/entry/2020/07/13/035613?_ga=2.146485490.713791784.1595177338-1694477281.1543286277

今回は実際にコーディングを行い、WEBサイトのホーム画面を作っていきます。

コーディング環境

 コーディングを行う前に、テキストエディターについて少し触れたいと思います。テキストエディターを使用することで多くの「補完機能」を得ることができ、効率よく開発が行えるため非常に便利です。

 今回使用したエディターは、「Atom」です。シンプルで使いやすく、無料で拡張機能も多いため、オススメのテキストエディターです。

ホーム画面作成

 それでは実際にコーディングしていきます。今回作成するサイトの構造は以下のようになります。

f:id:stady-diary:20200720024001p:plain

 上記構造を元に実際にHTMLを書いた結果こうなりました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Koshi Portfolio Web</title>
    <meta name="description" content="UNDERTALE風ポートフォリオサイトになります。">
    <link rel="icon" type="image/png" href="images/favicon.png">
  <!-- CSS -->
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Philosopher">
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <div id="home">
      <header class="page-header wrapper">
        <h1><a href="index.html"><img class="logo" src="images/logo.png" alt="koshinagai-logo"></a></h1>
      </header>

      <div class="home-content wrapper">
        <img class="char" src="images/char.png" alt="char">
      </div><!-- /#home-content-->

      <nav>
        <div class="main-nav wrapper">
          <a href="index.html"><img src="images/syoukai.png" alt="nav-syoukai"></a>
          <a href="index.html"><img src="images/keireki.png" alt="nav-keireki"></a>
          <a href="index.html"><img src="images/blog.png" alt="nav-blog"></a>
        </div><!-- /#main-nav-->
      </nav>

    </div><!-- /#home-->
  </body>
</html>
ファビコン

 今回はファビコンも用意しました。ファビコンとはサイト名の横に表示されている小さなアイコンのことです。例としてYouTubeのファビコンが以下となります。

f:id:stady-diary:20200720024832p:plain

 ファビコンがあることで複数タブを開いている時などに、ひと目で判断できるようになります。ファビコンの記述はヘッド内で行われています。

    <link rel="icon" type="image/png" href="images/favicon.png">
CSS

 HTMLだけでは、なんの装飾も行われていない状態です。実際にHTMLだけの状態は以下のようになります。

f:id:stady-diary:20200720030023p:plain

配置も大きさもバラバラで、背景も白のためおかしな表示になっています。これをCSSで整え、理想のサイトに近づけていきます。実際のコードは以下になります。

@@charset "UTF-8";

/* 共通部分
-------------------------------*/
html{
  font-size: 100%;
}
body{
  font-family: "Yu Gothic Medium","游ゴシック Medium","YuGothic","游ゴシック体","ヒラギノ角ゴ pro W3","sans-serif";
  line-height: 1.7;
  color: #432;
}
a{
  text-decoration: none;
}
img{
  max-width: 100%;
  max-height: 100%;
}

.wrapper{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
}


/* home
------------------------------*/
#home {
  background-color: #000;
  min-height: 100vh;
}

/* header
------------------------------*/
.logo{
  margin-top: 5%
}

/* nav
------------------------------*/
.main-nav{
  display: flex;
  margin-top: 20px;
  list-style: none;
  justify-content: space-between;
}

それぞれの項目に対して必要な処理を加えていく形になります。

そして完成したものがこちらになります。

f:id:stady-diary:20200720030726p:plain

 

次回は紹介ページの作成を行なっていこうと思います!!
今回を最後まで読んでいただきありがとうございます。