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

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

cssの教科書

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

本講座のまとめ

サイト制作

[1日目]Photoshopでデザインを作る[一週間でWebデザイナー]

htmlを学ぶ人

[2日目]エディターの上でHTMLを書こう![一週間でWebデザイナー]

macでプログラミング

[3日目]photoshopで作ったデザインのHTMLを書いてみよう![一週間でWebデザイナー]

この記事の中身

  • 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でプログラミング

[3日目]photoshopで作ったデザインのHTMLを書いてみよう![一週間でWebデザイナー]

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

<!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でコーディングする人

[5日目]flexboxを使ってコーディング[一週間でWebデザイナー]

コメントを残す

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

ABOUT US

アバター
はじめまして。クラゲと申します。 英語力0初海外から初めて、一人でタスマニアへ到着 孤立無援の赤ちゃん状態から、2年の間にfacebookで海外の友人400人以上作り、メルボルンでバリスタ、日本語教師、バンドで収入を得るところまでいったので、その時に学んだTipsなどを共有していきます。 ウェブデザイナー、グラフィックデザイナー、アプリデベロッパー、ミュージシャン、バリスタ、日本語教師、ブロガーとして収入を得て細々と暮らしています。 器用貧乏もここまで極めると悪くはないのではないかと思ってきた今日この頃。