Raspberry PiでWEBアプリケーションを作る (2 - ボタンを作成する)

f:id:ibuquicallig:20180109175221j:plain

前の記事
今回の目標
ボタンの作成。
- 説明
CSSでアンカーリンクをボタンっぽくする
- ボタンにクラスを設定する。
- CSSを書き足す。
Javascriptで背景色を変更するボタンを作る
次の記事
参考

一連の記事の最終的な目標に関しても上記の記事をご覧ください。 Apache(WEBサーバー)の導入と作成したテストページの表示までです。

Raspberry Pi 3 MODEL B 【RS正規流通品】

出版社/メーカー: Raspberry Pi
発売日: 2016/01/28
メディア: Tools & Hardware
この商品を含むブログを見る

今回の目標

HTMLでボタンを表示させる。
ボタンを押した時に別のページに移動する。
javascriptでボタンを押した際に処理を実行する。(過去記事の紹介)

最後のjavascriptに関しては今後とくに使う予定はありません。

今回もがんばりましょう！(´ω｀)

ボタンの作成。

前回作成したtest.htmlと同じディレクトリ(/var/www/html/)にbutton.htmlというファイルを作成します。

その中に以下のように記述してください。

<button onclick="location.href='./test.html'">jump to test.html</button>
<input type="button" onclick="location.href='./test.html'" value="jump to test.html"></input>
<a href="./test.html">jump to test.html</a>

保存して、http://192.168.xxx.xxx/button.htmlにアクセスしてみてください。192.168.xxx.xxxは Raspberry PiのIPアドレスです。IPアドレスの表示方法は前回の記事を参考にしてください。

ボタン2つとリンク1つが表示されたでしょうか？ HTMLは明確なエラーをパッと表示してくれないのでミスがわかりにくいような気がします...(笑)

表示されない、なんか崩れて表示される(ボタンの枠内に文字が表示されないなど)という場合は、クォーテーションやカッコの数が間違っていないかを確認してください。

一つボタンで無いものも混じっていますが、あとでCSSを追加してあげるとボタンのようになります。 <button>, <input>, <a>で作成する3種類が主かと思います。 以降の記事では<a>で作成したリンクにCSSでボタンっぽい装飾を追加する方法をとります。

説明

<button onclick="location.href='./test.html'">jump to test.html</button>

<button>タグで作成しています。というか勘で作ってみたら動きました(笑) <buttonのあとに続くものが属性というもので、タグに対しての設定のようなものです。

onclick="location.href='./test.html'"はonclickという設定に対して"..."という値を設定するという感じですね。 onclickはボタンをクリックした時という意味です。

onclickの値に、さらに属性と値(location.href='./test.html')がありますが「./test.htmlに移動する」という感じです。

ファイルの場所を指し示す場合に頭に./とつけると「現在のディレクトリ」という意味になります。なにも書かずにtest.html としても同じ結果になります。ですのでtest.htmlとbutton.htmlは同じディレクトリにいる必要があります。

<input type="button" onclick="location.href='./test.html'" value="jump to test.html"></input>

1つめとほぼ同じです。inputタグの属性にtype=""とあり、そこでボタンタイプを選択しています。 type="text"とすると文字入力ができるテキストボックスになります。

<a href="./test.html">jump to test.html</a>

率直にいってこれはボタンではありません! WEBページで使われるアンカーリンクです。→ https://google.com hrefに対してリンク先を設定します。hrefはHyper REFerenceの略だそう。 HTMLのHもHyperなのですが、なぜこんなにハイパー好きなのでしょう(笑)

CSSでアンカーリンクをボタンっぽくする

ボタンにクラスを設定する。

先程の<a>タグの属性にclassを追加します。classを追加することによって、CSSが修飾すべき対象として認識することができるようになります。

とりあえず、

<a class="button" href="./test.html">jump to test.html</a>

として、buttonというクラスを設定します。

CSSを書き足す。

CSSを設定する際には、

HTML内に追記する。
別ファイルにCSSだけを書いて、HTMLファイル内で読み込むようにする。

の2パターンがありますが、今回は前者の方法で進めます。 本格的にWEBページを作り始める時はCSSの記述を別ファイルにまとめます。

CSS定義をHTMLファイル内に追加するには<style>タグをbutton.htmlの文頭に追加します。

<style>
    
</style>

<a class="button" href="./test.html">jump to test.html</a>

<style>タグの中にCSSを書いていきます。

ボタンのCSSに関してはコチラのサイトが大変参考になります。

使いたいボタンのCSSをコピペして貼り付けます。一番上のボタンの場合、button.htmlの中身は

<style>
    .button {
        display: inline-block;
        padding: 0.5em 1em;
        text-decoration: none;
        background: #668ad8;/*ボタン色*/
        color: #FFF;
        border-bottom: solid 4px #627295;
        border-radius: 3px;
    }
    
    .button:active {/*ボタンを押したとき*/
        -ms-transform: translateY(4px);
        -webkit-transform: translateY(4px);
        transform: translateY(4px);/*下に動く*/
        border-bottom: none;/*線を消す*/
    }
</style>

<a class="button" href="./test.html">jump to test.html</a>