2023年 12月 27日の投稿一覧

2023.12.27

12月27日の作業データ

トップページのHTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GITの練習｜トップページ</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body class="top">
  <header class="header">
    <h1>My Portfolio</h1>
    <p>Felica Study Site</p>
  </header><!-- /.header -->
  <nav class="gnav">
    <ul>
      <li><a href="#">Top</a></li>
      <li><a href="../profile/">Profile</a></li>
      <li><a href="../works/">Works</a></li>
      <li><a href="../images/">Images</a></li>
    </ul>
  </nav><!-- /.gnav -->
</body>
</html>

プロフィールページ（Profile）のHTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GITの練習｜プロフィールページ</title>
  <link rel="stylesheet" href="../css/style.css">
</head>
<body class="profile">
  <header class="header">
    <h1>Profile Page</h1>
  </header><!-- /.header -->
  <nav class="gnav">
    <ul>
      <li><a href="../">Top</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="../works/">Works</a></li>
      <li><a href="../images/">Images</a></li>
    </ul>
  </nav><!-- /.gnav -->
</body>
</html>

CSS（ネスト）

@charset "utf-8";

/* GoogleFonts */
@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  vertical-align: bottom;
  max-width: 100%;
}

.header {
  width: 100%;
  height: 100vh;
  background: url(../img/main.jpg) no-repeat center bottom;
  background-size: cover;
  padding-top: 260px;
  text-align: center;
  >h1 {
    font-family: 'Cookie', cursive;
    font-size: 120px;
    color: #1d4709;
    margin-bottom: 10px;
  }
  >p {
    font-size: 24px;
    letter-spacing: .1em;/* 文字間*/
  }
}
/* プロファイルページ(profile)の h1 */
.profile {
  .header>h1 {
    color: #47093d;
  }
}
/* 習作ページ(works)の h1 */
.works {
  .header>h1 {
    color: #092147;
  }
}
/* バナーページ(images)の h1 */
.images {
  .header>h1 {
    color: #473d09;
  }
}
.gnav {
  width: 100%;
  height: auto;
  position: fixed;
  height: 80px;
  top: 0;
  right: 0;
  >ul {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    >li{
      height: 60px;
      margin-bottom: 10px;
      >a {
        display: block;
        padding: 0 30px;
        text-align: center;
        line-height: 80px;
        font-size: 32px;
        font-family: 'Cookie', cursive;
        color: #1d4709;
        &:hover {
          color: #3c9912;
        }
      }
    }
  }
}
/* プロファイルページ(profile)のナビゲーション */
.profile{
  >.gnav a {
    color:#47093d;
    &:hover {
      color:#b01796;
    }
  }
}
/* 習作ページ(works)のナビゲーション */
.works{
  >.gnav a {
    color:#092147;
    &:hover {
      color:#1855b7;
    }
  }
}
/* バナーページ(images)のナビゲーション */
.images{
  >.gnav a {
    color:#473d09;
    &:hover {
      color:#978214;
    }
  }
}