山傘のプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

[ドットインストール] はじめてのCSS (全17回)

CSS

前回に引き続きドットインストールで学習をしました。

自己紹介サイト

HTML のときの題材である自己紹介サイトを改善していきます。

f:id:yamakasa3:20190321205253p:plain

コード

indx.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>太郎のポートフォリオサイト</title>
    <link rel="icon" href="favicon.ico">
    <meta name = "discription" content="太郎のポートフォリオサイトです。">
    <!-- <style>
      h1{
        color: red;
      }
    </style> -->
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li class="current">
            <a href="index.html">
              HOME
            </a>
          </li>
          <li>
            <a href="about.html">
              ABOUT
            </a>
          </li>
        </ul>
      </nav>
    </header>

    <section>
      <img src="img/taro.png" width="140" height="140" alt = "太郎のアイコン" class="icon">
      <h1>山田太郎</h1>
      <p>UI/UXデザイナー見習いです</p>

      <div class="works">
        <section>
          <img src="img/work1.png" width="400" height="260" alt="勇者ゲーム">
          <h1>勇者ゲーム</h1>
          <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p>
        </section>

        <section>
          <img src="img/work2.png" width="400" height="260" alt="勇者ゲーム">
          <h1>宝さがしゲーム</h1>
          <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p>
        </section>

        <section>
          <img src="img/work3.png" width="400" height="260" alt="勇者ゲーム">
          <h1>神経衰弱</h1>
          <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p>
        </section>
      </div>


    </section>

    <footer>
      <ul>
        <li>
          <a href="mailto:example@gmail.com" target="_blank">
            <img src="img/mail.png" width="20" height="20" alt="メール送信">
          </a>
        </li>
        <li>
          <a href="http://dotinstall.com">
            <img src="img/blog.png" width="20" height="20" alt="ブログサイトへ">
          </a>
        </li>
        <li>
          <a href="http://dotinstall.com" target="_blank">
            <img src="img/photos.png" width="20" height="20" alt="写真サイトへ">
          </a>
        </li>
      </ul>
      <p>(c) Tarou Yamada</p>
    </footer>
  </body>
</html>
styles.css
body {
  /* color: red;
  color: rgb(0, 255, 0);
  color: #0000ff;
  color: #00f */
  /*
  色の表現方法は、数値や文字で指定することができる。
  */
  color: #333;
  /* フォントをVerdanaにする。なければ、sans-serif */
  font-family: Verdana, sans-serif;
  /* margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: 0px; */
  margin: 0;
}

header {
  text-align: right;
  padding: 10px;
  background-image: url(../img/header.png);
  height: 240px;
  /* 画像のサイズを調整 */
  background-size: cover;
  background-position: 50% 50%;
  margin-bottom: 60px;
}

header ul {
  margin: 0;
  list-style-type: none;
  padding-left: 0;
}

header li {
  display: inline-block;
  /* padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px; */
  padding: 4px 8px;
  font-size: 12px;
}
/* hedaer 内にある li の直下のa要素に対して */
header li > a{
  /* 下線を消す */
  text-decoration: none;
  /* 設定を引き継ぐ */
  color:inherit;
}

/* リンクにマウスカーソルを重ねたときに色を変える。 */
header li > a:hover {
  color: royalblue;
}

.current {
  border-bottom: 4px solid royalblue;
}

section {
  text-align:center;
}

section h1{
  font-weight: normal;
  margin-bottom: 8px;
}

section p {
  margin-top: 0;
  font-size: 14px;
}

/* iconクラスの設定 */
.icon {
  /* アイコンを丸くする */
  border-radius: 50%;
  /* border-color: pink;
  border-width: 5px;
  border-style: solid; */
  /* アイコンの縁取りの設定 */
  border: 5px solid pink;
  box-shadow: 0 0 5px gray;
}

.works {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  margin: 60px auto;
  border-bottom: 1px solid gray;
}

.works > section{
  margin-bottom: 40px;
}
.works h1,
.works p {
  text-align: left;
}

footer {
  width: 400px;
  margin: 0 auto 60px;
}

footer ul {
  margin: 0;
  list-style-type: none;
  padding-left: 0;
  /* 水平方向を調整  */
  float: left;
}

footer li {
  display: inline-block;
}

footer li > a:hover {
  /* 透明度を変更 */
  opacity: 0.6;
}

footer p {
  color: lightgray;
  font-size: 14px;
  text-align: right;
}

.about {
  width: 400px;
  margin: 0 auto 60px;
}

.about p {
  text-align: left;
}

感想

なんとなくそれらしいサイトができたと思います。いずれは自分でCSSを書けるようになって、ブログのデザインを変えてみたいですね。