Lesson: Design Your Page

Htmlの見栄えを良くするには

stylesheet

せっかく作ったobnizを動かすHtmlですから、友達に見せるために
もっと見た目をレベルアップしたいものです。

そんな時に使うのがスタイルシートです。Html内の部品1つ1つの色やサイズや位置などを指定できます。

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

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

このようなHtmlがあった時にh1が1つのDOMですし、buttonもそうです。また、bodyだって1つの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://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@1.14.1/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>

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

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

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

上の場合、

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

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

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

参考になるサイト

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

http://www.htmq.com/style/index.shtml 日本語

外部CSSを読み込む

何も自分で1から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://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@latest/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/