[ドットインストール] はじめての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を書けるようになって、ブログのデザインを変えてみたいですね。