ドットインストールで学ぶ、CSS入門（全17回）まとめ！【徹底解説】

ドットインストールのCSS入門（全17回）の講座内容のポイントをまとめてみました。これは前回作っていたプロフィールサイトの続きです。　HTML入門（全15回）まとめ！【徹底解説】

目次
・#01 はじめてのCSSを書いてみよう
・#02 デベロッパーツールを使ってみよう
・#03 色の表現方法を学ぼう
・#04 CSSのBoxモデルを確認してみよう
・#05 marginで外側の余白を設定しよう
・#06 リストのスタイリングをしてみよう
・#07 aタグのプロパティを操作しよう
・#08 セレクタの適用範囲を限定しよう
・#09 背景画像の設定をしよう
・#10 marginの相殺について理解しよう
・#11 border-radiusを使ってみよう
・#12 box-shadowで影をつけよう
・#13 divタグを使ってみよう
・#14 marginにautoを指定してみよう
・#15 フッターのリンクを完成させよう
・#16 floatで要素の位置を変えてみよう
・#17 プロフィールサイトを完成させよう
・出来上がったソースコードの公開

このCSS入門ではホームページのスタイルを整えていくレッスンです。

#01 はじめてのCSSを書いてみよう

ここでは、<style>タグの中でCSSを書いていく方法、また<link rel=”stylesheet” href=”cssあるルートを指定”>タグを使い別シートとして抜き出す方法について説明しています。

タグの使用方法
<style>
    h1{/*セレクター*/
       color:red;/*プロパティ*/
    }
</style>

#02 デベロッパーツールを使ってみよう

ここでは、デベロッパーツールの使い方について説明しています。右クリックし、検証を押すとデベロッパーツールが開きます。Elementsを見ると書いたindex.htmlの中身、Stylesでstyle.cssの中身が確認できます。

デベロッパーツールを開くショートカットキーは option + ⌘ command + i で簡単に開くことができます。便利なので覚えておきましょう！

#03 色の表現方法を学ぼう

ここでは、色の表現方法について説明しています。color:色名;、color:rgb(赤,緑,青)、color:#16進数。というような表現方法があります。

rgb(0,255,0)で色を表現した時、緑しかはいっていないため「山田太郎」が緑になっていると思います。

CSSは最後の要素が実際に適用されるので、この場合だとcolor:#333が「山田太郎」に適用されています！

#4 CSSのBoxモデルを確認してみよう

ここでは、CSSのBoxモデルについて確認していきます。HTML一つ一つの要素は箱の中に入っている感じになっています。margin、border、padding、<タグ>というふうな構成になっており、幅の調整はこのmarginやpaddingを使います。まずは、Boxをわかりやすくするために色をつけます。backgrond-color:色; という記述なのですが、background:色 ;ということで -colorは省略しても構いません。

#05 marginで外側の余白を設定しよう

余白は、marginで調整できるのですが、margin-top（↑）、margin-bottom（↓）、margin-right（←）、margin-left（→）という指定のやり方や、margin:10px 25px 30px 45px（↑、→、↓、←）;という指定のやり方、また全体のmarginの設定はmargin:◯px;で指定できます。 marginを0にする場合のみ、pxの省略ができるので覚えておきましょう！

#06 リストのスタイリングをしてみよう

ここでは、リストの・を消すために list-style:none; を使用することや、リストを横並べにするためにdisplay:inline-block; というものを使用することがわかりました。また、HOMEとABOUTの距離をあけるためにpadding を使用して文字の距離をあけていることがわかります。指定の方法は marginと変わりません。また、padding : 4px 8px (⇅ ⇄);の指定をしてあげることができます。便利なためぜひ覚えておきましょう！

#07 aタグのプロパティを操作しよう

ここでは、aタグにできる下線をとるためのコード text-decoration: none; と強制的に親要素の色を引継ぐ時 color:inherit; を使用することがわかりました！

a:hover でマウスカーソルをあてると、 color がロイヤルブルーになっていることがわかります！

また text-align:right; でheaderの画像やメニューを右揃えにしてみました！

#08 セレクタの適用範囲を限定しよう

ここでは、セレクタの適用範囲を限定するということで以下のコードだと

heder li > a

heder の li 要素の a タグにこれを効かせてください。というコードになります。

CSSのきく有効な範囲を細かく指定してあげましょう！

#09 背景画像の設定をしよう

ここでは、背景画像の設定のやり方について説明しています。まず、background-imge: url(絶対パス); で使う画像を指定してあげます！この際、CSSファイルの直下にstyle.cssがありその上にimgファイルがありその中に、使いたい画像ファイルがあるのでその絶対パスを指定します。CSSファイルから一つ上の階層に行くため ../img/heder.pngとなります！

また、画像の縦横比を維持したまま大きくする background-size:cover; やブラウザを伸び縮みさせたときに真中から画像を広げるやり方 background-position; のやり方について学ぶことができました。

#10 marginの相殺について理解しよう

ここでは、marginの相殺について説明されているのですが、<h1>タグの下の余白と

<p>タグの上の余白がかぶっていることがわかるかと思います。この場合、幅の広いほうを残すという仕様になっていてこの現象をmarginの相殺とよぶみたいです。このmarginの相殺を理解しつつ、marginの設定をやっていくようにしたほうがいいみたいですね！

またh1を使った時にかってに太字になると思うのですが、それを解除する方法として font-weight: normal ; を学ぶことができました。

#11 border-radiusを使ってみよう

ここでは、border-radiusの使用方法を説明しています。border-radiusを指定してあげることにより要素の角を丸くすることができます。これは、50%で角を丸くしたものです。また、HTMLのタグに名前を(class=””)をつけることでcssをいじることができるようになる！ということがわかりました。

border-radiusは細かく角を丸めることもできます。

border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;

#12 box-shadowで影をつけよう

ここでは、box-shadowで影をつけるということで影の付け方と要素に線を引く方法について説明してありました。まず線を引く方法なのですが、border: 幅、線、色;で指定することができます。

また、影をつける方法は、box-shadow: 縦、横、ぼかし、色 ;で指定することができます。

ちょっとサンプルを作ってみました！

<div style="
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: skyblue;
    border: 5px double white;
    box-shadow: 10px 10px 10px #9cd6f3;
">
</div>

#13 divタグを使ってみよう

ここでは、<div>タグを使い幅等の調整をおこなっていきました！

#14 marginにautoを指定してみよう

ここでは、marginにautoを指定し余白を均等にわりふる設定をしていきました。

#15 フッターのリンクを完成させよう

ここでは、フッターのリンクを完成させていきました。初めてでてきた内容としては、opacity:値; を使用してアイコン画像にマウスが乗ったらアイコン画像の透明度を変化させるというものでした。以下の画像にマウスをあわせてみてください。

変化しましたね！

#16 floatで要素の位置を変えてみよう

ここでは、floatで要素の位置を変えるということをしていきました。ちょっと説明が長くなってしまうので、こちらの記事を参考にしてみてください！

#17 プロフィールサイトを完成させよう

ここでは、プロフィールサイトの完成をさせていきました。border-bottom: 4px solid royalblue;でメニューをわかりやすくしてあげました！

出来上がったソースコードの公開

前回のHTML入門（全15回）と今回のCSS入門（全17回）でようやく１つのプロフィールサイトが仕上がりました。なんとなく、ホームページの作り方がわかったかと思います。

今回作ったプロフィールサイトの完成版は以下からダウンロードできるので、ダウンロードして中身を確認してみてください。

ファイルダウンロード:CSS入門(全17回終了)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>太郎のポートフォリオ</title>
    <link rel="icon" href="favicon.ico">
    <meta name="description" content="太郎のポートフォリオサイト">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>
    <nav>
          <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="140px" height="140px" alt="太郎のアイコン" class="icon">
      <h1>山田太郎</h1>
      <p>UI/UX デザイナー見習いです</p>
    <div class="works">
      <section>
        <img src="img/work1.png" width="400px" height="260px" alt="勇者ゲーム">
        <h1>勇者ゲーム</h1>
        <p>
          楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。
          楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。
          楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。
        </p>
      </section>

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

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

    </section>
    </div>
     <footer>
       <ul>
         <li><a href="mailto:all.ones.life.info@gmail.com" target="_back"><img src="img/mail.png" width="20px" height="20px" alt="メール送信"></a></li>
         <li><a href="https://www.alloneslife-0to1work.jp" target="_back"><img src="img/blog.png" width="20px" height="20px" alt="ブログサイトへ"></a></li>
         <li><a href="https://alloneslife.com" target="_back"><img src="img/photos.png" width="20px" height="20px" alt="写真サイトへ"></a></li>
       </ul>
     <p>(c) Taro yamada</p>
   </footer>
  </body>
</html>

body {
   color:#333;
   font-family: Vardana,sans-serif;
   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: 50px;
}

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

header li {
  display:inline-block;
  padding: 4px 8px;
  font-size: 12px;
}

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 {
  border-radius: 50%;
  border:5px solid white;
  box-shadow: 0 0 5px grey;
}

.works {
  width:400px;
  margin:60px auto;
}

.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: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;
}