CSSってなに?WEBデザインを始める人向けに解説

CSSはカスケーディングスタイルシートの略称で、一般的にスタイルシートと呼ばれたりもします。ウェブサイトのレイアウトを作るには、HTMLで全体の構造を構成し、CSSでデザインを整える。というイメージになります。HTML単体でもウェブサイトを作ることはできませんし、CSS単体でもウェブサイトを作ることはできません。が、HTMLとCSSがセットになることで、一気にハイクオリティなホームページまで制作できるようになるんです。

HTMLとCSSはどちらも同時に勉強することになると思いますが、まだHTMLが何なのかよくわかっていない方は“HTMLってなに?WEBデザインを始める人向けに解説”を先に読んでおいた方が良いかもしれません。

それでは、CSSとは何?という疑問を解消すべく、WEBデザイン初心者の方に向けに解説していきます。

CSSの役割

CSSがウェブサイトのデザインを整えると言われてもなかなかピンとこないですよね。まずはCSSを機能しているページとCSSが機能しなくなったページがどう変わるかご確認ください。

CSSが機能しているバージョン

CSSが機能していないバージョン

いかがでしょう?CSSが機能しなくなったら何とも情けない感じになってしまいますね。文字が順番に流れてきているだけって印象になって、とてもじゃないですがウェブページと呼べるものではありません。それくらいCSSの効果は絶大だということですね。実際に全てのサイトでCSSが使われていると言っても過言ではないくらい、ウェブページの制作にはCSSによるデザインが必要不可欠となっている状況です。

CSSの書き方

それでは、CSSの書き方を説明していきます。まずCSSの書き方には3種類の方法があるということを頭に入れてください。その3つの方法とは。

  1. HTMLに直接書き込む方法
  2. styleタグに書き込む方法
  3. 外部ファイルに書き込む方法

この3つの方法になります。

CSSを書き込む内容は1~3までほとんど同じなので、書き込む方法というよりは書き込む場所が違うという印象かもしれません。一応それぞれ特徴があり、1~3の書き込み方法を使い分けることになるのですが、基本的には3番目の「外部ファイルに書き込む方法」で書き込むことになると思います。その理由は後述しますが、どれも書き込む内容はほとんど同じなので、まずは最もわかりやすい1番目の「HTMLに直接書き込む方法」から説明していきます。

HTMLにCSSを直接書き込む方法

それでは、まず単純に「こんにちは」と表示させるだけのHTMLを用意しました。

<p>こんにちは</p>

こんにちは

このHTMLに直接CSSを書き込んでいきます。

<p style="color: green; font-weight: bold;">こんにちは</p>

こんにちは

pタグの中に、「style=”color: green; font-weight: bold;”」を追記することで、文字色が緑色になり、太文字になっています。

HTMLやCSSのタグの名前は英語がベースで決められているのでなんとなくわかるかと思いますが、上記のCSSはこのような意味を表しています。

style CSSを書き始めることを意味する
color:green; 文字色を緑色にする
font-weight:bold; 文字を太くする

このようにHTMLのタグの中に直接CSSを書き込む方法が一つあります。これはどのタグにCSSを当てているのかわかりやすいのですが、実際にホームページなどを制作するとなると繰り返し同じCSSをブロック毎に何度も当てるということが頻出します。その時、HTMLに直接CSSを書き込む方法だと何度も同じCSSを書かなくてはならず非常に効率が悪いです。

次のstyleタグにCSSを書き込む方法では、何度も同じCSSを書かなければいけないという問題を解決してくれます。

styleタグにCSSを書き込む方法

さきほどの「こんにちは」に当てるCSSを、今度はstyleタグに書いていきたいと思います。書き方は下記になります。

<head>
  <style type="text/css">
    p{
      color: green;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <p>こんにちは</p>
</body>

こんな感じになります。先ほどよりもちょっと長くなって、<head>や<style>が登場しましたね。

<head>を簡単に説明すると、<head>の中には目に見えるサイトのデザインには影響しないものの、現在作っているウェブページの細かい設定をするところという感じで覚えておけば良いでしょう。

そして、<style>タグの中にCSSを書いているのが今回のポイントです。{(波カッコ)の前に”p”とありますが、これでこのページのpタグ全てに「color: green;」「font-weight: bold;」のCSSを付けるという意味になります。

外部ファイルにCSSを書き込む方法

そして最後に外部ファイルにCSSを書き込む方法を解説します。前述した通りホームページなどを作成する時は、CSSを外部ファイルに書く方法がほとんどです。その理由は、headタグにCSSを書いてしまうとHTMLがありえないくらいに長くなってしまい、HTMLを修正する箇所を探せないという欠点があるからです。ピンキリですが、普通にホームページを作るとなるとCSSの長さは1,000行~10,000行くらいになるので、それがずっとHTMLの上に乗っかってると非常に不便なんですねー(^^;)

ということで、CSSを別のファイルに持っていって、HTMLとリンクさせる方法を解説していきます。

HTML↓
<head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <p>こんにちは</p>
</body>
CSS↓
p{
  color: green;
  font-weight: bold;
}

書き方としてはこんな感じになります。先ほどの「styleタグにCSSを書く方法」とよく似ていますが、styleタグが無くなってlinkタグというのが登場していますね。このlinkタグはその名の通り、今回ではHTMLとCSSを繋げる役割を果たしています。

linkタグの中の”href”に、リンクさせたい CSSのパスを入力します。最初のうちは、このパスの間違いなどでうまくHTMLとCSSをリンクできないという方がいますので、このパスの書き方もしっかり理解しておきましょう!

“rel”や”type”に何か書かれてますが、最初のうちは気にしないで大丈夫です(^^;)
CSSを繋げる時のlinkタグにはこういう風に書くんだなーという程度のおまじないだと思っておいてください。

最後に

それでは最後にこちらのページのHTMLとCSSを公開しておきます。これは外部リンクでCSSを当てている形になりますね。

HTML↓
<html>
<head>
  <meta charset="utf-8">
  <title>まずはこのサイトを作れるように練習しよう</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <header>
    <div class="container">
    <h1>まずはこのサイトを作れるように練習しよう</h1>
    <ul id="menu">
      <a href=""><li>メニュー1</li></a>
      <a href=""><li>メニュー2</li></a>
      <a href=""><li>メニュー3</li></a>
      <a href=""><li>メニュー4</li></a>
      <a href=""><li>メニュー5</li></a>
    </ul>
  </header>

  <main id="wrapper" class="container">
    <section id="main">
      <h1>プログラミング学習に必要なもの。それは愛。</h1>
      <img src="https://web-firstlog.com/wp-content/uploads/2017/12/heart.jpg" alt="プログラミング愛">
      <link rel="stylesheet" type="text/css" href="css/style.css">
      <h2>私の戦闘力</h2>
      <table border="3">
        <tbody>
          <tr>
            <td>名前</td><td>戦闘力</td>
          </tr>
          <tr>
            <td>コリスケ</td><td>2,300,000</td>
          </tr>
          <tr>
            <td>フリーザ</td><td>530,000</td>
          </tr>
          <tr>
            <td>ザーボンさん</td><td>35,000</td>
          </tr>
          <tr>
            <td>ドドリアさん</td><td>25,000</td>
          </tr>
        </tbody>
      </table>
    </section>

    <sidebar id="side">
      <div id="block1">
        <h2>コリスケの日常</h2>
        <p>
          今日、朝起きたらいつもベランダに木の棒をせっせと持ってきていた鳩が巣を完成させて卵を産んでいました。これからは彼らの成長をそっと見守っていきます。
        </p>
      </div>

      <div id="block2">
        <h2>このページでポイントとなるタグ</h2>
        <ul>
          <li>imgタグ</li>
          <li>floatタグ</li>
          <li>ulタグ</li>
          <li>tableタグ</li>
        </ul>
      </div>
    </sidebar>
  </main>

  <footer>
    <div class="container">
      <h2>プロフィール</h2>
      <div class="footer-left">
        <p>名前:コリスケ<br>職業:大阪に住むフロントエンジニア<br>趣味:ゴルフ<br>欲しいもの:新しいパター<br>癖:シャンク</p>
      </div>
    </div>
  </footer>
</body>
</html>

そして、CSSがこちらです。↓

    body,
    p,
    ul{
      margin: 0;
      padding: 0;
    }

    li{
      list-style: none;
    }

    a{
      text-decoration: none;
    }

    .container{
      width: 1000px;
      margin: 0 auto;
      overflow: hidden;
    }

    header{
      margin: 0 0 30px 0;
    }

    header h1{
      padding-left: 30px;
    }

    #menu > a{
      display: block;
      width: 20%;
      float: left;
      text-align: center;
      height: 50px;
      line-height: 50px;
      background: #aaa;
      color: #fff;
    }

    #menu > a:hover{
      background: #555;
    }

    #main{
      width: 70%;
      float: left;
      text-align: center;
      margin-bottom: 30px;
    }

    #main h1{
      text-align: center;
    }

    #main > img{
      width: 70%;
    }

    #main table{
      border-collapse: collapse;
      width: 70%;
      margin: 0 auto;
    }

    #main table tbody tr td{
      height: 30px;
    }

    #main table tbody tr:nth-of-type(1) td{
      background: #999;
      color: #fff;
    }

    #main h2{
      margin: 50px 0 10px 0;
      text-decoration: underline;
    }

    #side{
      width: 30%;
      float: right;
    }

    #side div h2{
      border-bottom: 1px solid #333;
      font-size: 20px;
    }

    #side #block2 li{
      border-bottom: 1px dotted #333;
      margin: 0 0 10px 0;
      padding-left: 10px;
    }

    footer{
      background: #eee;
      border-top: 3px #333 solid;
      padding: 30px 0;
    }

    footer h2{
      text-align: center;
      text-decoration: underline;
    }

    footer .footer-left{
      width: 50%;
      float: left;
    }

HTMLの中に”class”や”id”というものが登場してますが、これらを使ってよりCSSを便利に使いこなすことができます。classやidの使い方も追って解説していきますので、今回はCSSとは何か?CSSの書き方の違いを理解していただければ大丈夫です。

まとめ

CSSのこと、少しは理解を深めて頂けましたでしょうか?CSSは書き方が非常に重要で、下手に書いてしまうとカスタマイズをするときに非常に時間が掛かったりします。最初はゆっくりでも構いませんので、自分も他人も気持ちよく触れる綺麗で丁寧なプログラミングを心掛けましょう。

カテゴリーCSS

コメントを残す

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