スタイルの調整

HTMLの各要素はスタイルシートを使うことで色、形などを調整することができます。

Html では１つ１つの要素が DOM と呼ばれる要素でできています。

<body>
  <h1>Hello</h1>
  <button id="button1">LED ON</button>
</body>

このような Html があった時に h1 が１つの DOM ですし、button もそうです。また、body だって１つの DOM なのです。
それぞれに対して中身を変えず、見た目だけ設定できるのがスタイルシート。特に Html では CSS というものが使われています。

CSS

では、実際に先ほどのページを変えてみましょう。
先ほどの Html を obniz のプログラム画面で使い、Mac の Safari で開くとこのようになります。

これでも十分良いですが、ボタンも小さくて少し押しにくいです。これを CSS を使って改善してみましょう。

<!-- HTML Example -->
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@3.5.0/obniz.js"></script>
    <style>
      h1 {
        color: red;
      }
      #button1 {
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <div id="obniz-debug"></div>
    <h1>Hello</h1>
    <button id="button1">LED ON</button>
  </body>
</html>

Copy This

これを実行するとこのようになります。

h1 の Hello が赤くなり、ボタンが大きくなりました。

CSS は<style>タグの中で書くことが出来ます。
style タグは HTML の中でどこにでも書けますが、上の方にあったほうが先に読み込まれて良いです。
そして CSS の中では、「何に」「どんなデザインを適用するか」を決められます。

上の場合、

h1 というタグに文字色の赤
button1 という id をもつものに padding(内側の余白)を 50 ピクセル

という２つのデザインが設定されています。
ここで設定したデザインはこの Html の中のすべてに適用されます。

どんな設定ができるのかなどは CSS について詳しいサイトなどで調べてみましょう。
中央寄せにしたり、角を丸くしたり影をつけたりなど色々なことが出来ます。

参考になるサイト

https://www.w3schools.com/css/ English

外部 CSS を読み込む

何も自分で１から CSS を用意しなくても、「いけてるデザイン」を作って公開してくれている人がいます。
ただ単にその CSS を自分の Html に取り込むだけで「いけてるデザイン」になります。

有名なものは Twitter が公開しているブートストラップと呼ばれる CSS です。

http://getbootstrap.com

これは無料で使用できます。ここで公開されている CSS を取り込んでみましょう。

<!-- HTML Example -->
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@4.0.0/obniz.js"></script>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
      integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div id="obniz-debug"></div>
    <h1>Hello</h1>
    <button id="button1" class="btn btn-primary">LED ON</button>
  </body>
</html>

このように <link>というので外部に公開されている CSS が書かれたファイルを読み込んで適用することが出来ます。ここで読み込んでいるのが Twitter の Bootstrap のバージョン 4.1.1 です。

そして、button に対して class というのを設定しています。
とりあえずこれを実行するとこのようになります。

一気にオシャレになりました。
button の方は class というのを追加しました。
これによりこの青色のボタンになっています。
「btn や btn-primary というクラスのものにはこんなデザイン」という CSS が
ブートストラップに書かれているのでただ単に class を書くだけでこんなふうになったのです。

どんなものが利用できるのかは先ほどのブートストラップのページの CSS や Component ページにあります。ぜひ見てみて下さい。

http://getbootstrap.com/docs/4.0/getting-started/introduction/

CSS

外部 CSS を読み込む

タイトル