[CSS] CSS Stylesとは？

Study / Javascript, Jquery, Css    作成日付 : 2019/11/27 07:30:30   修正日付 : 2019/11/27 07:31:26

こんにちは。明月です。


前述までHTMLに関して説明しました。これからCSSに関して調べてみます。

CSSは簡単にいうとHTMLタグでドキュメントを作成したらCSS styleでドキュメントにスタイルを付けることかな。


CSSを反映するように先にHTMLを作成しましょう。

<!doctype html>
  <html>
    <head><title>ドキュメント例</title> </head>
    <body>
      <h1>開発企画書</h1>
      <h2>目次</h2>
      <ol>
        <li><a href="#intro">概要</a></li>
        <li><a href="#contents">開発内容</a></li>
        <li><a href="#period">開発期間</a></li>
        <li><a href="#person">開発人数</a></li>
      </ol>
      <hr>
      <div>
        <h3>概要</h3>
        <div>このとキュメンとはただ作成しました。</div>
      </div>
      <div>
        <h3>開発内容</h3>
        <div>アイアンマンを作るような戦略を立ち上げ</div>
      </div>
      <div>
        <h3>開発期間</h3>
        <div>一日で十分</div>
      </div>
      <div>
        <h3>開発内容</h3>
        <div>私に任せよう。</div>
      </div>
    </body>
</html>

上の例はただHTMLだけ作成しました。HTMLタグだけでもウェブドキュメントが作成できますが、何か我々が使う一般ウェブスタイルではないですね。ここでCSS styleを入れます。

<style>
  /* h1タグ */
  h1 {
    color:green;
    text-align:center;
  }
  /* h2タグ */
  h2 {
    padding-left : 20px;
    border-bottom : 3px solid #000;
  }
  /* liタグ */
  li {
    background-color:green;
    border-bottom : 1px solid #000;
    font-size : 20px;
    height:30px;
    padding-top:10px;
  }
  /* liタグの直下派生のaタグ */
  li > a {
    text-decoration:none;
    color:white;
  }
  /* bodyタグの直下派生のdivタグ */
  body > div {
    border:1px solid red;
    margin:2px;
  }
  /* bodyタグの直下派生のdivタグの派生div */
  body > div div {
    height:100px;
  }
</style>

一応、CSSのスタイルを付けるようにはCSS Selecterを理解しなければならないですが、それは少し複雑なので別途の投稿で説明します。

簡単に見ると「h1」や「li」はタグ名です。「li > a」の場合は「li」タグ直下派生の「a」タグです。つまり「<li><a></a><li>」の「a」タグですね。

スペースがある場合(「div div」)はdivタグの派生タグの中で全ての「div」です。

<div>
  <div>対象</div>
</div>
<div>
  <section>
    <div>対象</div>
  </section>
</div>

上の選択になります。

各タグを指定して括弧の中がスタイル形式です。スタイルに関しても量が多いので別途の投稿で説明します。


上のスタイルをHTMLのドキュメントの「head」タグの中でいれましょう。

また、ブラウザを再更新すると上の結果になります。


HTMLタグだけで作られるウェブドキュメントより少し華やかになりました。

これからCSSに関してもっと詳しく調べてみましょう。

◀前の投稿[HTML] Open graph(ogタグ)
次の投稿▶[CSS] Selector(選択子)
#css
「Study / Javascript, Jquery, Css」の他投稿
最新投稿