Document
Everything about obniz

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を使って改善してみましょう。

<style>
  h1 {
    color: red
  }
  #button1 {
    padding: 50px;
  }
</style>

<div id="obniz-debug"></div>
<h1>Hello</h1>
<button id="button1">LED ON</button>

<script>
  var obniz = new Obniz("");
  obniz.onconnect = async function () {

  }
</script>​

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

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を取り込んでみましょう。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="obniz-debug"></div>
<h1>Hello</h1>
<button id="button1" class="btn btn-primary">LED ON</button>

<script>
  var obniz = new Obniz("");
  obniz.onconnect = async function () {

  }
</script>​

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

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

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

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

https://getbootstrap.com/docs/3.3/css/

https://getbootstrap.com/docs/3.3/components/