[4日目]CSSの基礎を学ぼう[一週間でWebデザイナー]

4日目はCSSを使ってデザインを作っていきましょう。

本講座のまとめ

2022.02.28

2022.01.28

2022.01.28

この記事の中身

CSSとは
CSSの書き方
HTMLにCSSを適用してみよう
GoogleChromeのデベロッパーツールを使おう

とりあえず難しいことを考えなくていいように話をすすめていきます。

CSSとは

cssとは簡単に言えばデザイン作っていく言語です。

HTMLでは見出しやリスト、divでグループを作ったりしていきましたね。これらはウェブサイトの骨組みになるところです。このウェブサイトにはこんな情報が入っていますよーとgoogleに知らせるのがHTMLの役割です。

しかし、ウェブサイトは文章がならんでいるわけではありません。

どんな文字の大きさで
背景には画像をいれて
文字の色は青色

など、デザインを施すことも必要です。

それを担当しているのがCSSというわけです。

つまりHTMLはウェブサイトの基本的な情報、骨組みで
CSSはデザインを表現するというわけですね。

CSSの書き方

htmlだとタグと呼ばれる<>で括られていましたが、CSSは少し違います。

CSSは<>ではなく{}を使います。

一度下のh1にcssを使ってデザインを作ってみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サイト名</title>
  </head>
  <body>
   <header>
      <h1>Web Company Work</h1>
      <p>ためしにCSSをつけてみる</p>
   </header>
  </body>
</html>

h1 {
	color: red;
        font-size: 18px;
}
p {
	font-size: 12px;
}

二番目のソースコードがCSSになります。

一番最初の部分はh1の見出しに対して、文字の色を”red”つまり赤色にしてくださいという指定ですね。

同じように”font-size: 18px;”は文字の大きさを18ピクセルにしてくださいという意味です。

下のpタグに使われているのも同じでフォントサイズを12ピクセルにしてくださいという意味ですね。

基本的にCSSはこういった指定をひたすら書いていくだけの作業です。

プログラミングと聞くとややこしそうで数式なんかもありそうですが、HTMLとCSSに関しては本当にシンプルで学習しやすいですね。

HTMLにCSSを適用してみよう

1. HTMLとCSSのファイルを作る

とりあえず三日目で作ったHTMLファイルにCSSを適用してみましょう。

2022.01.28

↓一応作ったコードを貼っておきますね。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サイト名</title>
  </head>
  <body>
   <header>
     <div class="headerBar">
        <div class="headerIn">
          <h1>Web Company Work</h1>
    　　    <nav>
             <ul>
	       <li><a href="">ABOUT</a></li>
	       <li><a href="">WORKS</a></li>
	       <li><a href="">CONTACT</a></li>
             </ul>
           </nav>
        </div>
     </div>
   </header>
   <div class="contents">
      <div class="left">
        <div class="pages">
          <img src="" alt="画像の説明が入ります。">
          <h2>タイトル</h2>
          <p>pagesの文章がここに入ります。適当にいれてみてください。</p>
        </div>
      </div>
      <div class="right"></div>
    </div>
  </body>
</html>

一度Testというフォルダをデスクトップ上につくってから、その中にこのコードをtop.htmlという名前で保存してみましょう。

次にテキストエディターで新規のファイルを作ってそこに下のコードをコピペしてみましょう。

@charset "utf-8";

h1 {
	color: red;
        font-size: 18px;
}
p {
	font-size: 12px;
}

今度はdesign.cssとして同じTestのフォルダに保存してみてください。

これでCSSファイルを作ることができました。

CSSファイルのコードのはじめにある

@charset "utf-8";

は今からこのutf-8という文字の形式で書いていきますよという宣言です。CSSファイルを作るときには必ずいれましょう。

詳しく考えずにとにかくいれてりゃOKです。

2. HTMLとCSSのファイルを結びつける

とりあえずこの段階でtop.htmlをダブルクリックしてみてください。

するとなんの変哲もないこんなページが開くと思います。

寂しい気持ちになりますね。

そうですさっきいれたCSSが反映されていないのです。

CSSを反映させるには下の一行をHTMLのheadタグにいれてあげれば解決です。

このhref=”にさっき作ったファイルの名前が入っているんですね。他のところは今の所覚えなくても大丈夫です。とりあえずコピペでいきましょう。

実際にHTMLに組み込んだコードが下のものです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サイト名</title>
    <link rel='stylesheet' type='text/css' href='design.css'>
  </head>
  <body>
   <header>
     <div class="headerBar">
        <div class="headerIn">
          <h1>Web Company Work</h1>
    　　    <nav>
             <ul>
	       <li><a href="">ABOUT</a></li>
	       <li><a href="">WORKS</a></li>
	       <li><a href="">CONTACT</a></li>
             </ul>
           </nav>
        </div>
     </div>
   </header>
   <div class="contents">
      <div class="left">
        <div class="pages">
          <img src="" alt="画像の説明が入ります。">
          <h2>タイトル</h2>
          <p>pagesの文章がここに入ります。適当にいれてみてください。</p>
        </div>
      </div>
      <div class="right"></div>
    </div>
  </body>
</html>

titleの下のところに挿入されているのがわかりますか？

これをそのままtop.htmlとして保存してしまいましょう。

そしてもう一度top.htmlをダブルクリックしてブラウザで開いてみてください。