HTML&CSS_02 【RESTART】

Last updated at 2021-10-16Posted at 2021-10-16

HTML＆CSS_02

今回のテーマは「progate」の「HTML＆CSS中級編」を使って作れたものについて
※前回の記事

お役立ちメモ

メモ

Google Drive　からの画像参照方法
https://drive.google.com/file/d/画像ID/view?usp=sharing
⇒　https://drive.google.com/uc?export=view&id=画像ID

フェーズ１_学習

「progate」「HTML＆CSS中級編」を学習

フェーズ２_記録

テキストファイル化し以下のコードに手記入でメモ書き

HTML

<!DOICTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>サンプルページ２</title>
    /*アイコンを参照出来る外部サイトのリンクを読み込む*/
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-left">
          <img class="logo" src="https://drive.google.com/uc?export=view&id=1NectTNTeasZrUQKYTBoyUP1iJiuUUpVa">
          <span class="page-title">サンプルページ２</span>
        </div>
        <div class="header-right">
          <a href="#" class="login">ログイン</a>
        </div>
      </div>
    </header>
    <div class="top-wrapper">
      <div class="container">
        <h1>サンプルトップ</h1>
        <h1>サンプル内容</h1>
        <p>サンプルトップページです</p>
        <p>がんばって作成してゆきます</p>
        <div class="btn-wrapper">
          <a href="#" class="btn signup">新規登録はこちら</a>
          <p>SNSでも登録できます</p>
　　　　　　/*fa fa-~ でアイコンを表示出来る*/
          <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
          <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
        </div>
      </div>
    </div>
    <div class="middle-wrapper">
      <div class="container">
        <div class="heading">
          <h2>サンプルキャラクター集</h2>
        </div>
        <div class="characters">
          <div class="character">
            <div class="cha-icon">
              <img src="https://drive.google.com/uc?export=view&id=1NectTNTeasZrUQKYTBoyUP1iJiuUUpVa">
              <p>モコ</p>
            </div>
            <p class="txt-contents">定期的にトリミングされる猫</p>
          </div>
          <div class="character">
            <div class="cha-icon">
              <img src="https://drive.google.com/uc?export=view&id=1hN832R-ykLCA1qIwKHhtqmrr5WK_QqHZ">
              <p>ちび</p>
            </div>
            <p class="txt-contents">枝豆が好物らしい</p>
          </div>
          <div class="character">
            <div class="cha-icon">
              <img src=https://drive.google.com/uc?export=view&id=1VPQ7F6JnlLt2Q76G55IopA-IpJ43lCar>
              <p>ヨシ猫</p>
            </div>
            <p class="txt-contents">好きなもの：ストロングゼロ Alc.9%</p>
          </div>
        </div>
      </div>    
    </div>
    <div class="lower-wrapper">
      <div class="container">
        <div class="heading">
          <h2>このページに関するお問い合わせはこちらから</h2>
        </div>
        <span class="btn message">お問い合わせ</span>
      </div>
    </div>
    <footer>
      <div class="container">
        <img src="https://drive.google.com/uc?export=view&id=1hN832R-ykLCA1qIwKHhtqmrr5WK_QqHZ">
        <p>サンプルページ２</p>
    </footer>
  </body>
</html>

CSS

body {
  margin: 0;
  font-family: "Meiryo UI";
}

a {
  text-decoration: none; /*テキストの装飾を消す*/
}

.container {
  width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

header {
  height: 70px;
  width: 100%;
  background-color: rgba(34,49,52,0.9); /*色のRGB指定と透過度*/
  position: fixed; /*表示の固定*/
  top: 0; /*ポジションの位置指定*/
  z-index: 10; /*要素の重なりの設定*/
}

.logo {
  width: 68px;
}

.header-left {
  float: left;
}

.header-right {
  float: right;
  background-color: rgba(255,255,255,0.3);
  transtion: all 0.5s; /*変化後の状態から指定秒数で変化させる*/
}

.header-right:hover { /*カーソルを合わせた際に適用*/
  background-color: rgba(255,255,255,0.5);
}

.header-right a {
  line-height: 70px; /*インラインブロックの高さ*/
  padding: 0 25px;
  color: white;
  display: block;
}

.page-title {
  color: white;
  font-weight: bold;
  font-size: 40px;
  display: inline-block;
  height: 65px;
  padding: 20px;
}

.top-wrapper {
  padding: 180px 0 100px 0;
  /*背景画像の設定*/
  background-image: url(https://drive.google.com/uc?export=view&id=1rHHnCRJBd5AzWO68m710F3eg05jZkQ_0);
  background-size: cover;
  text-align: center;
  color: rgb(255,204,0);
}

.top-wrapper h1 {
  font-size: 45px;
  letter-spacing: 5px;
  text-shadow: 2px 2px 2px black; /*テキストに影を付けて強調*/
}

.top-wrapper p {
  text-shadow: 2px 2px 2px black;
}

.btn-wrapper {
  margin: 20px 0;
}

.btn-wrapper p {
  margin: 10px 0;
}

.signup {
  background-color: #239b76;
}

.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}

.twitter {
  background-color: #55acee;
}

.btn {
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8; /*透過度*/
  border-radius: 4px; /*過度の丸み*/
}

.btn:hover {
  opacity: 1;
}

.fa {
  margin-right: 5px;
}

.middle-wrapper {
  height: 500px;
  padding-bottom: 80px;
  background-color: #e6ffe9;
  text-align: center;
}

.heading {
  padding-top: 60px;
  padding-bottom: 30px;
  color: #5f5d60;
}

.heading h2 {
  font-weight: normal;
}

.character {
  float: left;
  width: 25%;
}

.cha-icon {
  position: relative; /*重ね表示する際の起点とする設定*/
}

.cha-icon p {
  position: absolute; /*起点から以下のプロパティ分をオフセット*/
  top: 190px;
  width: 160%;
  font-weight: bold;
}

.txt-contents {
  display: inline-block;
  margin-top: 20px;
  font-size: 15px;
}

.lower-wrapper {
  border-bottom: 1px solid #eee;
  padding-bottom: 80px;
  text-align: center;
}

.message {
  padding: 15px 40px;
  background-color: #5dca88;
  cursor: pointer; /*カーソルが乗った際にポインターに変わる*/
  box-shadow: 0 7px #1a7940; /*ボックスに影を付けて立体的に表示*/
}

.message:active { /*クリックされた際に適用*/
  position: relative;
  top: 7px;
  box-shadow: none;
}

footer img {
  width: 50px;
}

footer p {
  color: white;
  font-size: 12px;
  float: right;
}

footer {
  background-color: rgba(34,49,52,0.9);
}

フェーズ３_実践

「codepen」を使って実際にページ作成メモ書きを行ったテキストファイルを使用する ※「0.25x」推奨

See the Pen サンプルページ２ by yuta-proto-biz (@yuta-proto-biz) on CodePen.

# フェーズ４_発信

縮尺が変更された場合に、背景が見切れたり
まだまだ必要な技術は多い
とは言えそれっぽいページが出来てきたと思う
（コードのコメントアウト内の注釈は間違っている可能性あり）

過去記事へのリンク

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up