[模写コーディングの回答コード]HTML&CSSをマスターする完全ロードマップ

公開日 2021/3/17

『[独学での勉強方法]HTML&CSSをマスターする完全ロードマップ』で紹介した模写コーディング（初級編）の回答コードの記事です。

HTML
CSS
reset.CSS

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ocean</title>
  <link rel="stylesheet" href="./css/reset 2.css">
  <link rel="stylesheet" href="/css/style.css">
</head>

<body>
<header>
  <div class="header__inner inner">
    <div class="header__top-box">
      <h1 class="header__title"><a href="#" class="header__title-link">Ocean Blog</a></h1>
      <nav>
        <ul class="header__box">
          <li class="header__item"><a href="#main" class="header__link">main</a></li>
          <li class="header__item"><a href="#blog" class="header__link">blog</a></li>
          <li class="header__item"><a href="#cont" class="header__link">contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

<main>
  <section class="head">
      <div class="head__box">
      </div>
  </section>

  <section id="main" class="disc">
      <div class="disc__inner inner">
        <div class="disc__box">
          <div class="disc__left-item">
            <div class="disc__item-image">
              <img src="img/demo-main.jpg" alt="海の写真" class="disc__image">
            </div>
          </div>
          <div class="disc__right-item">
             <h2 class="disc__text-title">オーシャン</h2>
             <p class="disc__text">
               テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
             </p>
             <p class="disc__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
             <p class="disc__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </div>
  </section>

  <section id="blog" class="blog">
     <div class="blog__inner inner">
       <h2 class="blog__title">Blog</h2>
       <div class="blog__box">
        <a href="#" class="blog__item">
          <div>
            <div class="blog__item-image">
              <img src="./img/demo-blog1.jpg" alt="海の写真" class="blog__image">
            </div>
            <div class="blog__item-text">
              <h2 class="blog__item-title">海の写真</h2>
              <p class="blog__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </div>
          </div>
        </a>

        <a href="#" class="blog__item">
          <div>
           <div class="blog__item-image">
             <img src="./img/demo-blog2.jpg" alt="海の写真" class="blog__image">
           </div>
           <div class="blog__item-text">
             <h2 class="blog__item-title">海の写真</h2>
             <p class="blog__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
           </div>
          </div>
        </a>


        <a href="#" class="blog__item">
          <div>
           <div class="blog__item-image">
             <img src="./img/demo-blog3.jpg" alt="海の写真" class="blog__image">
           </div>
           <div class="blog__item-text">
             <h2 class="blog__item-title">海の写真</h2>
             <p class="blog__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
           </div>
          </div>
        </a>

       </div>
     </div>
  </section>

  <section id="cont" class="contact">
    <div class="contact__inner inner">
      <h2 class="contact__title">Contact</h2>
     <div class="contact__list">
       <form action="#">
                    <dl class="contact__controls">
                        <div class="contact__control">
                            <dt class="contact__name">
                                <label class="contact__label contact-name" for="your-name">お名前</label>
                            </dt>
                            <dd>
                                <input id="your-name" class="form-input" type="text" name="your-name" value="" placeholder="" required>
                            </dd>
            </div><!-- /.contact__control -->
            <div class="contact__control">
              <dt>
                <label for="mail">メールアドレス</label>
              </dt>
              <dd>
                <input type="email" id="e-mail">
              </dd>
            </div>
            <div class="contact__control">
              <dt>

                <label for="textarea">お問い合わせ内容</label>
              </dt>
              <dd>
                <textarea name="" id="textarea" cols="30" rows="6"></textarea>
              </dd>
            </div>
          </dl>
            <div class="contact__btn">
              <a href="#" class="btn">送信</a>
            </div>
        </form>
     </div>
    </div>
  </section>

</main>
<footer>
  <p>Copyright(C) 2020 Ocean ALL Rights Reserved.</p>
</footer>
</body>
</html>

CSS


@charset "utf-8";

body {
  background-color: #fff;
  color: #333;
}

.inner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

img {
  width: 100%;
  height: auto;
}


/* header */

header {
  background-color: #00afe028;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10;
}

.header__inner {
  height: 60px;
  line-height: 60px;
}

.header__top-box {
  display: flex;
}

nav {
  margin-left: auto;
}

.header__box {
  display: flex;
}

.header__title-link {
  color: #333;
  font-size: 30px;
  font-weight: bold;
}

.header__link {
  font-size: 20px;
  margin-right: 30px;
  color: #333;
}


/* head */

.head {
  width: 100%;
  height: 500px;
  margin-bottom: 100px;
}

.head__box {
  background: url("../img/demo-top.jpg");
  background-size: cover;
  background-position: 0 ;
  background-repeat: no-repeat;
  height: 500px;
}


/* disc */

.disc {
 margin-bottom: 100px;
}

.disc__box {
  display: flex;
  align-items: center;
}

.disc__left-item {
  width: calc(70% - 50px);
  margin-right: 50px;
}


.disc__text-title {
  font-size: 25px;
  padding-bottom: 20px;
  text-align: center;
}

.disc__text {
  font-size: 16px;
  line-height: 2em;
}

/* blog */

.blog {
  margin-bottom: 100px;
  background-color: #00afe028;
  padding: 50px 0;
  position: relative;
}

.blog__title {
  text-align: center;
  font-size: 2em;
  margin-bottom: 50px;
  font-weight: bold;
}

.blog__box {
  display: flex;
}

.blog__item {
  width: calc(33.3333% - 40px * 2 / 3);
  margin-right: 40px;
  border: 1px solid #333;
  background-color: #fff;
}

.blog__item:last-child {
  margin-right: 0;
}

.blog__item-image {
  height: 215px;
  overflow: hidden;
}

.blog__item-text {
  padding: 15px;
}

.blog__item-title {
  color: #333;
  font-size: 20px;
  padding-bottom: 10px;
}

.blog__text {
  color: #333;
  line-height: 1.5em;
}

/* contact */

.contact__title {
  text-align: center;
  font-size: 2em;
  margin-bottom: 50px;
  font-weight: bold;
}

.contact__control {
  height: 50px;
  width: 60%;
  display: flex;
  margin: 0 auto 30px;
}

.contact__control dt label{
  color: #fff;
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  padding: 10px 30px;
  font-size: 1.2em;
  background-color:#7ac7ed;
  position: relative;
}

.contact__control dt label:before{
  content: "";
  border: 19.5px solid #7ac7ed;
  border-right: 19.5px solid transparent;
  position: absolute;
  right: -39px;
  top: 0;
}

.contact__control dd {
  width: 50%;
  margin-left: auto;
}

.contact__control dd input{
  width: 100%;
  height: 40px;
  outline: none;
}

.contact__control dd input:focus{
  border: 1px solid #7ac7ed;
}

.contact__control dd textarea{
  width: 100%;
  outline: none;
}

.contact__control dd textarea:focus{
  border: 1px solid #7ac7ed;
}

.contact__btn {
  text-align: center;
  margin-top: 150px;
  margin-bottom: 50px;
}

.contact__btn .btn{
  color: #7ac7ed;
  font-weight: bold;
  font-size: 1.2em;
  border: 2px solid #7ac7ed;
  padding: 20px 40px;
  background-color: #fff;
}



/* footer */

footer {
  padding: 20px 0;
  text-align: center;
  color: #fff;
  background-color: #333;
  font-size: 14px;
}

reset.CSS


@charset "utf-8";

/*==========================================================================
# reset - ブラウザの差異や不要なスタイルを無くすためのスタイル
========================================================================== */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, small, button, time, figure {
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

li, dd {
  list-style-type: none;
}

header, footer, nav, section, article, aside, figure, figcaption {
  display: block;
}

img {
  border: none;
  vertical-align: bottom;
}

a {
  cursor: pointer;
  text-decoration: none;
}

タグ