【ウェブ制作】 ホームページ作る 1

作っては消し、作っては消し。これで何度目かになるかわからないがまた自分のホームとなるウェブページを作ってみようと思う。雰囲気駆動開発。

  1. とりあえずテンプレート
  2. 名前と連絡先は必要
  3. 名刺っぽくしてみる

とりあえずテンプレート

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="./styles/style.css">
  <title>cosmology233.github.io</title>
</head>
<body>
  <header class="header"></header>
  
  <main class="main"></main>
  
  <footer class="footer"></footer>
  
  <script src="./scripts/script.js"></script>
</body>
</html>

styles/style.css

body {
  margin: 0; padding: 0;
  color: #333;
  font-size: 16px;
  font-family: "helvetica", "arial", "hiragino kaku gothic pro", "meiryo", "ms pgothic", sans-serif;
}

/* ==============================
 * header
 ============================== */

.header {
  
}

/* ==============================
 * main
 ============================== */

.main {
  
}

/* ==============================
 * footer
 ============================== */
 
.footer {

}

scripts/script.js

(function() {
  console.log("script loaded.");
}());

名前と連絡先は必要

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="./styles/style.css">
  <title>cosmology233.github.io</title>
</head>
<body>
  <header class="header"></header>
  
  <main class="main">
    <p class="name">
      Kazma Arakaki
    </p>
    
    <p class="contact">
      E-mail:
      
      <a class="contact_address" href="mailto:twi1ightmessenger1988@gmail.com">
        twi1ightmessenger1988@gmail.com
      </a>
    </p>
  </main>
  
  <footer class="footer"></footer>
  
  <script src="./scripts/script.js"></script>
</body>
</html>

f:id:kosumoro:20160826192343j:plain

名刺っぽくしてみる

index.html

<!-- 略 -->

  <main class="main">
    <div class="card">
      <p class="card_name">
        Kazma Arakaki
      </p>
      
      <p class="card_contact">
        E-mail:
        
        <a class="card_contact_address" href="mailto:twi1ightmessenger1988@gmail.com">
          twi1ightmessenger1988@gmail.com
        </a>
      </p>
    </div>
  </main>

<!-- 略 -->

styles/style.css

/* 略 */

/* ==============================
 * main
 ============================== */

.main {
  
}

.card {
  margin: 16px 24px; padding: 28px 48px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.card_name {
  font-size: 20px;
}

.card_contact {
  font-size: 12px;
}

.card_contact_address {
  
}

/* 略 */

f:id:kosumoro:20160826194000j:plain

いい感じ。