Raspberry PiでWEBアプリケーションを作る (3 - HTMLのheaderなど)

f:id:ibuquicallig:20180109175221j:plain

前の記事
できること
Headerとbody
- header
- body
こんな感じがいいのかも？
今までのHTMLを書き直す
次の記事
参考

一連の記事の最終的な目標に関しても下記の記事をご覧ください。

できること

HTMLのヘッダーなどを設定してよりWEBページらしくする。

ヘッダーを設定してもブラウザから見える内容というのは大きく変わらないですが、スマートフォンからアクセスした場合の設定や、Google検索に引っかからなくなるような設定を行えます。

Headerとbody

これまで作成したHTMLファイルは、ヘッダー情報は全く記述しておらずいわゆる<body>タグ内に記載するような内容ばかりについて作成してきました。

基本的なHTMLの文書のテンプレートは以下の様になっていると思います。(NetBeansのHTMLテンプレート)

<!DOCTYPE html>
<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  
        <div>...</div>
 
  </body>
</html>

<html>というタグで囲まれた中に、<header>タグと<body>タグの塊があります。

<!DOCTYPE html>はHTML5の文章ですよ、とブラウザ側に伝えるための宣言です。特に意識しなくて大丈夫です。

HTML文書の定義や内容がどんなものであるかをブラウザに伝えます。例えば、<title>TODO supply a title</title>という内容は、ページのタイトルをブラウザに伝えています。 FireFoxのタブに表示されるタイトルはココで設定できます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">は、ページの横幅をブラウザに伝えています。「横幅はデバイスのサイズに合わせて、初期のページの拡大倍率は1.0倍(拡大しない)」といった感じです。

body

ブラウザに表示したい中身です。今まで作成したもの(<button>...など)はこの中に書き込むべきです。

こんな感じがいいのかも？

私が使用しているheaderのテンプレートはこのような感じです。

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
   <title>ヘッダーの説明</title>
   <meta name="description" content="ヘッダーの内容について説明しています。">
   <!-- noindex / nofollow -->
   <meta name="robots" content="noindex">
   <meta name="robots" content="nofollow">
   <!-- Font Awesome -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <!-- Bootstrap -->
   <link rel="stylesheet" type="text/css" href="/hoge/huga/bootstrap.css">
   <!-- self-defined css file -->
   <link rel="stylesheet" type="text/css" href="/hoge/style.css">
   <!-- Google Fonts (https://fonts.google.com) -->
   <link href="https://fonts.googleapis.com/css?family=Barlow" rel="stylesheet"> 
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

IEで表示することを想定していないので、
<meta http-equiv="X-UA-Compatible" content="IE=edge">
という内容は記載していません。

IE使いたい場合かつ想定した通りのページが表示されない場合はこのタグを<head>タグの直後に書いてください。

以下、ざっくりとした説明です。より詳しく知りたい場合は他のサイトで調べたほうがいいかもしれません。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

内容がHTMLで、文字コードはUTF-8です。という情報。

<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">

先程説明した内容と同じですが、user-scalable=0という内容を追加することによって、 スマートフォンでページを表示した際にページの拡大を行えないようにすることが出来ます。

後々CSSで画面にピッタリフィットする(レスポンシブ)ように作成するので拡大する必要はありません。操作ミスなどで画面が拡大されてしまうほうが私にはストレスです...(笑)

<title>ヘッダーの説明</title>
<meta name="description" content="ヘッダーの内容について説明しています。">

<title>タグは先ほど説明しましたが、<description>タグはページの概要を伝えます。

「検索結果の順位をあげたい」という場合には大事なのかもしれませんが、今回は特にそのような目的にはWEBページを作成していないので、テキトーにページの概要を1文ほどで入れておきましょう。

<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">

これを設定することによって、検索エンジンで検索してもヒットしなくなります。 ページをひと目につかないようにしたい時やミラーサイトを設置する時に有効だそうです。

<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="./hoge/huga/bootstrap.css">
<!-- self-defined css file -->
<link rel="stylesheet" type="text/css" href="./hoge/style.css">
<!-- Google Fonts (https://fonts.google.com) -->
<link href="https://fonts.googleapis.com/css?family=Barlow" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

外部のCSSや自分で作成したCSSを読み込んでいます。少しそれぞれの機能を深堀しましょう。

Font Awesome

文章内に文字感覚でアイコンを埋め込むことのできるサービスです。現在はVersion 5が出ているようですが、 4系統と大きくアイコンや設定が異なるようでまだ使ったことはありません。

header内で読み込んでおけば、

<i class="fa fa-home" aria-hidden="true"></i> <i class="fa fa-photo" aria-hidden="true"></i>

と書けば、やのようなアイコンを文章中で使うことが出来ます。

コードのhomeやphotoの部分を、ココから探せるアイコン名に変えると任意のアイコンを表示できます。

自前でサーバー内にアイコンファイルを置かなくても良い(ディスク使用量・(サーバー側視点での)トラフィックの削減)ので、はてなブログの中でも使いやすくて便利です。

このブログのヘッダーイメージの下のナビゲーションバーにも使っています！

Bootstrap

ページ内のコンテンツの配置をきれいにできたり、アイコンやボタンをスタイリッシュにしてくれるCSSを提供しているサービスです。

Bootstrapのグリッドレイアウトというものが強力すぎて、私はもしかしたらこれなしではWEBページを作れないのかもしれません...(笑) 詳細は必要になった時に書きます。

こちらも外部のcssファイルを読み込んで使用するという手段もありますが、一部margin, paddingで修正したい部分があるのでローカルに保存したものを使用しています。

このCSSファイルを読み込んだ後に自分で作成したCSSファイルを読み込むようにしないと、上手く表示できないことがあります。

Google Fonts / Material icons

https://material.io/icons/

Googleの提供しているフォントとマテリアルデザインなアイコンを利用できるようになります。残念ながら日本語のフォントはありません....

Material IconsはFont Awesomeとほぼ同じようなサービスですね。

この2つに関してもHeaderに一行加えるだけで、サーバーにフォントファイルやアイコンファイルを保存せずに 使用出来ます。

今までのHTMLを書き直す

test.html

<!DOCTYPE html>
<html>
  <head>
    <title>this is a test.</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
        <p>test.html</p>
  </body>
</html>

button.html

<!DOCTYPE html>
<html>
  <head>
    <title>button</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <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>
   </head>
  <body>
        <a class="button" href="./test.html">jump to test.html</a>
  </body>
</html>