Learning site for website creation

講座用目次HTML

  • 投稿日:2013年04月23日
  • 更新日:2019年04月23日

講座全体目次

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<title>2019年2月生課題</title>
<style>
body {
  font-family: sans-serif;
  color: #333333;
  background-color: #eff1f0;
}
h1 {
  position: relative;
  background: #fff;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 5px 1em;
  color: #4e4e4e;
  text-align: center;
  border-left: dashed 1px;
  border-right: dashed 1px;
  box-shadow: 0 0 0 5px white,0 3px 25px -10px #000;
  font-weight: 400;
}
h1:after {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '\f0a7\ 2019年2月生';
  background: #4e4e4e;
  color: #fff;
  left: 5px;
  bottom: 103%;
  border-radius: 5px 5px 0 0;
  padding: 8px 10px;
  font-size: 0.6em;
  line-height: 1;
  letter-spacing: 0.05em;
  z-index: -1;
}
ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul::after {
  content: "";
  width: 230px;]
  display: block;
  margin: 5px;
}
a {
  display: block;
  width: 230px;
  height: 54px;
  line-height: 54px;
  color: #000;
  text-decoration: none;
  text-align: center;
  background-color: #ffffff;
  border-bottom: solid 6px #dcdcdc;
  border-radius: 5px;
  margin: 5px;
  transition: background 0.6s;
}
a:hover{
  background-color: #f9c500;
  border-bottom: solid 6px #f39800;
}
a:active {
  margin-top: 4px;
  border-bottom: none;
  transform: translateY(4px);
}
div {
  width:730px;
  margin: 0 auto;
}

@media only screen and (max-width : 760px) {
  h1 {
    font-size: 2em;
  }
  div {
    width: 490px;
  }
}
</style>
</head>
<body>
<div>
<h1>2019年2月生課題</h1>
<ul>
<li><a href="h01/">自己紹介</a></li>
<li><a href="h02/">ゆるキャラ</a></li>
<li><a href="site01/">リニューアル</a></li>
<li><a href="site02/">最終制作</a></li>
</ul>
</div>
</body>
</html>

自己紹介

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<title>自己紹介 2019年2月生</title>
<style>
body {
  font-family: sans-serif;
  color: #333333;
  background-color: #eff1f0;
}
h1 {
  position: relative;
  background: #fff;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 5px 1em;
  color: #4e4e4e;
  text-align: center;
  border-left: dashed 1px;
  border-right: dashed 1px;
  box-shadow: 0 0 0 5px white,0 3px 25px -10px #000;
  font-weight: 400;
}
h1:after {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '\f0a7\ 2019年2月生';
  background: #4e4e4e;
  color: #fff;
  left: 5px;
  bottom: 103%;
  border-radius: 5px 5px 0 0;
  padding: 8px 10px;
  font-size: 0.6em;
  line-height: 1;
  letter-spacing: 0.05em;
  z-index: -1;
}
ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul::after {
  content: "";
  width: 230px;]
  display: block;
  margin: 5px;
}
a {
  display: block;
  width: 230px;
  height: 54px;
  line-height: 54px;
  color: #000;
  text-decoration: none;
  text-align: center;
  background-color: #ffffff;
  border-bottom: solid 6px #dcdcdc;
  border-radius: 5px;
  margin: 5px;
  transition: background 0.6s;
}
a:hover{
  background-color: #f9c500;
  border-bottom: solid 6px #f39800;
}
a:active {
  margin-top: 4px;
  border-bottom: none;
  transform: translateY(4px);
}
div {
  width:730px;
  margin: 0 auto;
}

@media only screen and (max-width : 760px) {
  h1 {
    font-size: 2em;
  }
  div {
    width: 490px;
  }
}
</style>
</head>
<body>
<div>
<h1>自己紹介</h1>
<ul>
<li><a href="a01/"></a></li>
<li><a href="a02/"></a></li>
<li><a href="a03/"></a></li>
<li><a href="a04/"></a></li>
<li><a href="a05/"></a></li>
<li><a href="a06/"></a></li>
<li><a href="a07/"></a></li>
<li><a href="a08/"></a></li>
<li><a href="a09/"></a></li>
<li><a href="a10/"></a></li>
<li><a href="a11/"></a></li>
<li><a href="a12/"></a></li>
<li><a href="a13/"></a></li>
<li><a href="a14/"></a></li>
<li><a href="a15/"></a></li>
<li><a href="a16/"></a></li>
<li><a href="a17/"></a></li>
<li><a href="a18/"></a></li>
<li><a href="a19/"></a></li>
<li><a href="a20/"></a></li>
<li><a href="a21/"></a></li>
<li><a href="a22/"></a></li>
<li><a href="a23/"></a></li>
<li><a href="a24/"></a></li>
<li><a href="a25/"></a></li>
<li><a href="a26/"></a></li>
<li><a href="a27/"></a></li>
<li><a href="a28/"></a></li>
<li><a href="a00/"></a></li>

</ul>
</div>
</body>
</html>

リニューアルサイト

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サイト制作 2019年2月生</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  <style type="text/css">
body {
  font-family: sans-serif;
  color: #333333;
  background-color: #eff1f0;
}
h1 {
  position: relative;
  background: #fff;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 5px 1em;
  color: #4e4e4e;
  text-align: center;
  border-left: dashed 1px;
  border-right: dashed 1px;
  box-shadow: 0 0 0 5px white,0 3px 25px -10px #000;
  font-weight: 400;
}
h1:after {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '\f0a7\ 2019年2月生';
  background: #4e4e4e;
  color: #fff;
  left: 5px;
  bottom: 103%;
  border-radius: 5px 5px 0 0;
  padding: 8px 10px;
  font-size: 0.6em;
  line-height: 1;
  letter-spacing: 0.05em;
  z-index: -1;
}
h2 {
  background-color: #4e4e4e;
  color: #fff;
  padding: 10px;
  font-weight: 400;
  font-size: 1.1em;
  border: dashed 1px;
  box-shadow: 0 0 0 4px #4e4e4e;
  margin: 9px;
}
ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul::after {
  content: "";
  width: 230px;
  display: block;
  margin: 5px;
}
li {
    border-bottom: dashed 1px #dcdcdc;
    width: 50%;
}
a {
  transition: background 0.6s;
}
.new>a {
  display: block;
  /*
  width: 700px;
  height: 54px;
  */
  line-height: 54px;
  color: #000;
  text-decoration: none;
  text-align: center;
  background-color: #ffffff;
  border-bottom: solid 6px #dcdcdc;
  border-radius: 5px;
  margin: 5px;
}
.gw>a{
  width: auto;
}
.new>a:hover{
  background-color: #f9c500;
  border-bottom: solid 6px #f39800;
}
.new>a:active {
  margin-top: 6px;
  border-bottom: none;
  margin-bottom: 22px;
  transform: translateY(4px);
}
.old>a {
  border: solid 1px #fff;
  text-align: center;
  border-radius: 5px;
  padding: 6px;
  margin: 0 5px 15px;
  background-color: #dcdcdc;
  display: block;
  color: #000;
  text-decoration: none;
}
.old>a:hover {
  background-color: #f9c500;
}
div {
  width:730px;
  margin: 0 auto;
}


@media only screen and (max-width : 760px) {
  h1 {
    font-size: 2em;
  }
  div {
    width: 490px;
  }
  li {
    width: 100%;
  }
}
</style>
</head>

<body>
  <div>
    <h1>Webサイト制作実習</h1>
    <hr>
    <ul>
      <li>
        <p class="new">
          <a href="g01/" target="_blank">
            1班:
          </a>
        </p>
        <p class="old">
          <a href="" target="_blank">
            
          </a>
        </p>
      </li>

      <li>
        <p class="new">
          <a href="g02/" target="_blank">
            2班:
          </a>
        </p>
        <p class="old">
          <a href="" target="_blank">
            
          </a>
        </p>
      </li>

      <li>
        <p class="new">
          <a href="g03/" target="_blank">
            3班:
          </a>
        </p>
        <p class="old">
          <a href="" target="_blank">
            
          </a>
        </p>
      </li>

      <li>
        <p class="new">
          <a href="g04/" target="_blank">
            4班:
          </a>
        </p>
        <p class="old">
          <a href="" target="_blank">
            
          </a>
        </p>
      </li>

      <li>
        <p class="new">
          <a href="g05/" target="_blank">
            5班:
          </a>
        </p>
        <p class="old">
          <a href="" target="_blank">
            
          </a>
        </p>
      </li>

      <li>
        <p class="new">
          <a href="g06/" target="_blank">
            6班:
          </a>
        </p>
        <p class="old">
          <a href="" target="_blank">
            
          </a>
        </p>
      </li>

      <li>
        <p class="new">
          <a href="g07/" target="_blank">
            7班:
          </a>
        </p>
        <p class="old">
          <a href="" target="_blank">
            
          </a>
        </p>
      </li>

    </ul>
    <p style="text-align:center;">★班長 ■進捗管理</p>
  </div>
</body>
</html>

最終制作

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サイト制作 2019年2月生</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  <style type="text/css">
body {
  font-family: sans-serif;
  color: #333333;
  background-color: #eff1f0;
}
h1 {
  position: relative;
  background: #fff;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 5px 1em;
  color: #4e4e4e;
  text-align: center;
  border-left: dashed 1px;
  border-right: dashed 1px;
  box-shadow: 0 0 0 5px white,0 3px 25px -10px #000;
  font-weight: 400;
}
h1:after {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '\f0a7\ 2019年2月生';
  background: #4e4e4e;
  color: #fff;
  left: 5px;
  bottom: 103%;
  border-radius: 5px 5px 0 0;
  padding: 8px 10px;
  font-size: 0.6em;
  line-height: 1;
  letter-spacing: 0.05em;
  z-index: -1;
}
h2 {
  background-color: #4e4e4e;
  color: #fff;
  padding: 10px;
  font-weight: 400;
  font-size: 1.1em;
  border: dashed 1px;
  box-shadow: 0 0 0 4px #4e4e4e;
  margin: 9px;
}
ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul::after {
  content: "";
  width: 230px;
  display: block;
  margin: 5px;
}
li {
    border-bottom: dashed 1px #dcdcdc;
    width: 50%;
}
a {
  transition: background 0.6s;
}
.new>a {
  display: block;
  /*
  width: 700px;
  height: 54px;
  */
  line-height: 54px;
  color: #000;
  text-decoration: none;
  text-align: center;
  background-color: #ffffff;
  border-bottom: solid 6px #dcdcdc;
  border-radius: 5px;
  margin: 5px;
}
.gw>a{
  width: auto;
}
.new>a:hover{
  background-color: #f9c500;
  border-bottom: solid 6px #f39800;
}
.new>a:active {
  margin-top: 6px;
  border-bottom: none;
  margin-bottom: 22px;
  transform: translateY(4px);
}
.old>a {
  border: solid 1px #fff;
  text-align: center;
  border-radius: 5px;
  padding: 6px;
  margin: 0 5px 15px;
  background-color: #dcdcdc;
  display: block;
  color: #000;
  text-decoration: none;
}
.old>a:hover {
  background-color: #f9c500;
}
div {
  width:730px;
  margin: 0 auto;
}


@media only screen and (max-width : 760px) {
  h1 {
    font-size: 2em;
  }
  div {
    width: 490px;
  }
  li {
    width: 100%;
  }
}
</style>
</head>

<body>
  <div>
    <h1>最終制作</h1>
    <hr>
    <ul>
      <li>
        <p class="new">
          <a href="" target="_blank">
            1班:
          </a>
        </p>
      </li>

      <li>
        <p class="new">
          <a href="" target="_blank">
            2班:
          </a>
        </p>
      </li>

      <li>
        <p class="new">
          <a href="" target="_blank">
            3班:
          </a>
        </p>
      </li>

      <li>
        <p class="new">
          <a href="" target="_blank">
            4班:
          </a>
        </p>
      </li>

      <li>
        <p class="new">
          <a href="" target="_blank">
            5班:
          </a>
        </p>
      </li>

      <li>
        <p class="new">
          <a href="" target="_blank">
            6班:
          </a>
        </p>
      </li>

      <li>
        <p class="new">
          <a href="" target="_blank">
            7班:
          </a>
        </p>
      </li>

    </ul>
    <p style="text-align:center;">★班長 ■進捗管理</p>
  </div>
</body>
</html>

ドラえもん課題

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドラえもん 2018年6月生</title>
<style>
body {
  font-family: sans-serif;
  color: #333333;
  background-color: #eff1f0;
}
h1 {
  position: relative;
  background: #fff;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 5px 1em;
  color: #4e4e4e;
  text-align: center;
  border-left: dashed 1px;
  border-right: dashed 1px;
  box-shadow: 0 0 0 5px white;
  font-weight: 400;
}
h1:after {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '\f0a7\ 2018年6月生';
  background: #4e4e4e;
  color: #fff;
  left: 5px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 8px 10px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em;
}
ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul::after {
  content: "";
  width: 230px;]
  display: block;
  margin: 5px;
}
a {
  display: block;
  width: 230px;
  height: 54px;
  line-height: 54px;
  color: #000;
  text-decoration: none;
  text-align: center;
  background-color: #ffffff;
  border-bottom: solid 6px #dcdcdc;
  border-radius: 5px;
  margin: 5px;
  transition: background 0.6s;
}
a:hover{
  background-color: #f9c500;
  border-bottom: solid 6px #f39800;
}
a:active {
  margin-top: 4px;
  border-bottom: none;
  transform: translateY(4px);
}
div {
  width:730px;
  margin: 0 auto;
}
li {
  width: 300px;
}
li img {
  width: 300px;
}

@media only screen and (max-width : 760px) {
  h1 {
    font-size: 2em;
  }
  div {
    width: 490px;
  }
}
</style>
</head>
<body>
<div>
<h1>ドラえもん課題</h1>
<ul>
  <li>
    <h2></h2>
    <img src="img/a01.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a02.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a03.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a04.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a05.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a06.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a07.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a08.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a09.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a10.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a11.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a12.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a13.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a14.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a15.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a16.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a17.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a18.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a19.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a20.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a21.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a22.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a23.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a24.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a25.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a26.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a27.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a28.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a29.png" alt="ドラえもん">
  </li>
  <li>
    <h2></h2>
    <img src="img/a30.png" alt="ドラえもん">
  </li>
</ul>
</div>
</body>
</html>