一週間でWebデザイナーになれる無料講座[完結]

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

cssの教科書

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

本講座のまとめ

サイト制作
htmlを学ぶ人
macでプログラミング

この記事の中身

  • 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を適用してみましょう。

macでプログラミング

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

<!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をダブルクリックしてブラウザで開いてみてください。

こんな風になりましたか?

タイトルが赤色になって他のフォントサイズが少し変わってますね。

デザインとしてはちゃんとしておりませんが、ここまででHTMLとCSSの関係性は理解できたと思います。

あとはひたすらCSSを書いていくだけで完成ですね。

GoogleChromeのデベロッパーツールを使おう

いよいよ今日も最後の項目です。

1日目でいった通り、本講座はブラウザのGoogleChromeを使っていきます。

まだダウンロードできてない人は今すぐ以下のリンクからダウンロードしてください。

→ここからGoogleChromeをダウンロード

1. デベロッパーツールとは

そもそもデベロッパーツールとはウェブの開発者がブラウザ上でバグを見つけたり、細かい変更をしたりするためのツールです。

これを使いこなせれば、世の中のあらゆるウェブサイトの中身を見ることができます。(別に違法でもなんでもありません。笑)

本講座ではその機能を使ってコーディングしていきます。

それでは下の動画を見て実際に試してみてください。(15分ほどで終わります。)

上の動画で学べることは

  • デベロッパーツールの表示の仕方
  • 各ウィンドウの見方
  • CSSの追加、CSSファイルの指定、保存

ですね。

これでデベローパーツールの最低限の使い方はわかったと思うので次回はいよいよ、実際に作るデザインデータを元にCSSを書いていきましょう。

次を乗り越えれば本講座の山場はおしまいです。

それでは今日もお疲れ様でした!

cssでコーディングする人

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ABOUT US
Nan
はじめまして。Nanと申します。 2016年より英語力0の状態で単身オーストラリアに行きました。 オーストラリア2年間の生活である程度の英語力やバリスタのスキル・世界中に友達を作って帰国。 その後、フリーランスのWebデザイナーとして仕事を初めて、 約一年少し海外でノマド生活をしていました。 タイ(1ヶ月)-ジョージア(2ヶ月)-ドイツ(1ヶ月)- イギリス(8ヶ月ロックダウン中)-フランス(1ヶ月)-イタリア(1ヶ月) と言った感じです。 その間、アプリのプログラミング(Flutter)を勉強し始め、帰国後に仕事を取れるようになりました。 ウェブデザイナー、グラフィックデザイナー、アプリデベロッパー、ミュージシャン、バリスタ、日本語教師、ブロガーとして収入を得て細々と暮らしています。 器用貧乏もここまで極めると悪くはないのではないかと思ってきた今日この頃。