今回は基本に立ち返ってHTMLとCSSを投稿します。
ただ後ほど投稿するflaskでの使用を前提としてるので
注意して下さい。
基本
HTML&CSSとは
HTML
Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略
ホームページなどを作成する際に用いられます。
文書構造を定義するものであり、骨組みや構造となるマークアップ言語です。
ほぼすべてのウェブページにはHTMLが使われています。
CSS
Cascading Style Sheets（カスケーディング・スタイル・シート）の略
ホームページなどの見た目・スタイルを定義するための言語のことです。
HTMLで画面に表示する文書構造などを定義し、CSSで表示方法や装飾などを定義します。
code editer
かくプログラム言語を書くのに便利な
VisualStudioCode
日本語化する
JapaneseLanguagePackforVisualStudioCode
などあるのでダウンロードとインストールして使用します。
リンクはこちらから
VisualStudioCode
JapaneseLanguagePackforVisualStudioCode
HTMLテンプレートの解説1/5
MNISTを用いた数字認識アプリのHTMLのテンプレートはこのようになっています。
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Number Classifier</title><linkrel="stylesheet"href="./static/stylesheet.css"></head><body><header><imgclass="header_img"src="https://aidemy.net/logo-white.8748c46e.svg"alt="Aidemy"><aclass="header-logo"href="#">Number Classifier</a></header><divclass="main"><h2> AIが送信された画像の数字を識別します</h2><p>画像を送信してください</p><formmethod="POST"enctype="multipart/form-data"><inputclass="file_choose"type="file"name="file"><inputclass="btn"value="submit!"type="submit"></form><divclass="answer">{{answer}}</div></div><footer><imgclass="footer_img"src="https://aidemy.net/static/media/logo.eb4d1a66.svg"alt="Aidemy"><small>© 2019 Aidemy, inc.</small></footer></body></html>flaskの場合
mnist_appフォルダの中にtemplatesフォルダを作成し
その中にindex.htmlを作成し、上記のコードをコピー＆ペーストしてください。
HTMLテンプレートの解説2/5 (重要)
HTMLには決められた基本構造があり、毎回その基本構造を書く必要があります。
ただ、Visual Studio Codeの補完機能として半角の!を入力し
タブキーを押すだけで下のようなHTMLが出力されます。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body></body></html>まずはこの基本構造について見ていきましょう。
この部分はDOCTYPE宣言と呼ばれるもので
テキストファイルはHTMLだとブラウザに説明するための宣言です。
<!DOCTYPE html>この部分は、このHTMLは英語を扱うとブラウザに説明するための宣言です。
今回は日本語を扱うので先ほどのように"ja"と書き換えましょう
<htmllang="en">htmlでは下のようなタグと呼ばれる見出しをつけて、タグに囲まれたテキストやコードに様々な意味を持たせます。また、タグに囲まれたテキストやコードのことを要素といいます。
<head></head>このまとまりはheadタグに囲まれているのでhead要素といいます。
head要素の中にmetaタグやtitleタグ、CSSの読み込みを記入したりします。
また、CSSの読み込みをする部分は自動で補完されないのでhead要素の最後に加えました。
それでは順番に見ていきましょう。
<head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><linkrel="stylesheet"href="./static/stylesheet.css"></head>この部分は、このHTMLの文字コードはUTF-8だとブラウザに説明するための宣言です。
この指定が違っていると文字化けの原因になります。
<metacharset="UTF-8">この部分は、ウェブページを表示する際に、きちんと正しく表示させるためのおまじないです。
詳しく説明すると難しく長くなるので、入れないといけないものなのだと覚えておいてください。
<metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge">title要素はページのタイトルを指定します。
ここで指定したタイトルは、ブラウザのタブ上に現れます。
<title>Document</title>CSSの読み込みをする部分です。
href=""にCSSファイルの置いている場所とファイル名を渡します。
<linkrel="stylesheet"href="./static/style.css">以上でhead要素は終わりです。ほとんどは定型文なので覚える必要はありませんが
どのようなことをしているのかは覚えておきましょう。
HTMLテンプレートの解説3/5
それではbody要素を詳しく見ていきましょう。body要素がウェブページに表示される部分です。
ページのレイアウトは大まかに、画面上部の緑のヘッダー、中央の白い部分のメイン
下部の灰色のフッターに分かれています。
まずはヘッダーを構成している要素を見ていきましょう。
予め用意されているheader要素によってレイアウトをブロックごとに構成していきます。
また、各要素をCSSで扱いやすいようにclass="xxx"としてラベリングしています（後に詳しく扱います）。
<header><imgclass="header_img"src="https://aidemy.net/logo-white.8748c46e.svg"alt="Aidemy"><aclass="header-logo"href="">Number Classifier</a></header>画像を入れたいときはimg要素を使います。srcに画像のURLを指定してください。
またaltには画像の説明を書きます。ブラウザはimg要素を見つけると
画像を表示できる場合はsrcで示されたURLの中身を、表示できないときはaltの代替文をそこに表示します。
<imgclass="header_img"src="https://aidemy.net/logo-white.8748c46e.svg"alt="Aidemy">テキストにリンクをつけたいときはaタグでテキストを囲います。
href=""にリンク先のURLを指定してください。
#を指定した場合はトップページに移動します。
<aclass="header-logo"href="#">Number Classifier</a>HTMLテンプレートの解説4/5
続いて、メイン部分を見ていきましょう。
div要素の「div」は「division」の略で、要素をグループ化するために使用されます。
また、各要素をCSSで扱いやすいようにclass="xxx"としてラベリングしています（後に詳しく扱います）。
<divclass="main"><h2> AIが送信された画像の数字を識別します</h2><p>画像を送信してください</p><formmethod="POST"enctype="multipart/form-data"><inputclass="file_choose"type="file"name="file"><inputclass="btn"value="submit!"type="submit"></form><divclass="answer">{{answer}}</div></div>見出しの要素です。h1>h2>h3>h4>h5>h6の順で重要度が高くなります。
<h2> AIが送信された画像の数字を識別します</h2>基
本的には文章を入力する際に使います。
パラグラフのpであり、１つの段落を意味します。改行には
を使いましょう。
<p>画像を送信してください</p>この部分はファイルの選択と送信ボタンについての記述です。
入力フォームを作成するときにはform要素を使います。
ここでmethod="POST"と指定していますが、これはPOSTリクエストで画像をアップロードするということを指します。
すなわち、Flaskで扱う
request.methodrequest.method"POST"が渡され
if文がTrueになるためFlask側で処理が進められます。
また、ファイルを送信するフォームでは
enctype="multipart/form-data"と指定しましょう。
<formmethod="POST"enctype="multipart/form-data"><inputclass="file_choose"type="file"name="file"><inputclass="btn"value="submit!"type="submit"></form>ファイルのアップローダーを作成するときはinput要素にtype="file"と指定します。またname="file"の"file"はFlaskだとrequest.filesに渡されています。
<inputclass="file_choose"type="file"name="file">送信ボタンの部分です。typeには"submit"を指定します。
valueには送信ボタンに書かれる文字を指定します。
<inputclass="btn"value="submit!"type="submit">Flaskで扱った
returnrender_template("index.html",answer=pred_answer)のanswerに代入されている
pred_answerが{{answer}}に代入されます。{{}}で囲むのを忘れないようにしてください。
<divclass="answer">{{answer}}</div>HTMLテンプレートの解説5/5
最後にフッター部分を見ていきます。
これも予め用意されているfooter要素を使います。
img要素を使って画像を入ています。
small要素には著作権表示や法的表記のような
注釈や小さく表示される文を入れます。また、
©は
©と表示されます。
<footer><imgclass="footer_img"src="https://aidemy.net/static/media/logo.eb4d1a66.svg"alt="Aidemy"><small>© 2019 Aidemy, inc.</small></footer>CSS入門
CSSテンプレートの解説1/5
MNISTを用いた数字認識アプリのCSSのテンプレートはこのようになっています。
header{background-color:#76B55B;height:60px;margin:-8px;display:flex;flex-direction:row-reverse;justify-content:space-between;}.header-logo{color:#fff;font-size:25px;margin:15px25px;}.header_img{height:25px;margin:15px25px;}.main{height:370px;}h2{color:#444444;margin:90px0px;text-align:center;}p{color:#444444;margin:70px0px30px0px;text-align:center;}.answer{color:#444444;margin:70px0px30px0px;text-align:center;}form{text-align:center;}footer{background-color:#F7F7F7;height:110px;margin:-8px;position:relative;}.footer_img{height:25px;margin:15px25px;}small{margin:15px25px;position:absolute;left:0;bottom:0;}flaskの場合
mnist_appフォルダの中にstaticフォルダを作成し
その中にstylesheet.cssを作成し、上記のコードをコピー＆ペーストして使用します。
CSSテンプレートの解説2/5
HTMLではヘッダーの要素を下のように書いていました。
<header><imgclass="header_img"src="https://aidemy.net/logo-white.8748c46e.svg"alt="Aidemy"><ahref="">Number Classifier</a></header>このヘッダー部分に対応しているCSSはこの部分になります。
header{background-color:#76B55B;height:60px;margin:-8px;display:flex;flex-direction:row-reverse;justify-content:space-between;}.header-logo{color:#fff;font-size:25px;margin:15px25px;}.header_img{height:25px;margin:15px25px;}各要素に対して、
タグ名{}のように書くことで装飾を施します。
また、div要素やimg要素など、同じ種類の要素が複数あり
それぞれ別に装飾したい場合は、
.class名{}のように書くことで、クラスごとに装飾をすることができます。
CSSテンプレートの解説3/5
続けてヘッター部分を見ていきましょう。
background-color: カラーコード;と指定することで要素の背景色を指定することができます。
16進数カラーコード見本
また、height: 60px;や、ここにはありませんが width: 60px;のように要素の高さや横幅を指定できます。
本来、デフォルトのタグには大きく、2つあります。
ブロック ... 段落など一つの塊として認識されるタグで、主にdiv、p、hなどがあります。
インライン ... ブロック内の要素の一つとして認識されるタグで、主にa、small、brなどがあります。
そして、ブロックやインラインの配置を操作しやすくするために
新たなフレックスというタグの概念が導入されました。
フレックスを使用することによってブロック要素の横並びなどが可能になるなど
レスポンシブ(画面サイズによる配置の最適化)にも対応可能となります。
要素をフレックスにするには、その親の要素に
display: flex とします。
デフォルトはブロック要素なので
display: blockとなっています。
そして、次に配置の設定を行います。
配置の設定を行うプロパティは大きく、3つあります。
flex-direction ... 配置の方向や順序を設定します。デフォルトはrow(横並び)になっています。縦並びにしたい場合はcolumnとします。
justify-content ... 横方向(columnの場合は縦方向)の配置を設定します。space-betweenで両端に寄せることができます。
align-items ... 縦方向(columnの場合は横方向)の配置を設定します。
があります。
今回
flex-direction:row-reverse/*とすることによって横向きに右から配置しています。*/header{background-color:#76B55B;height:60px;margin:-8px;display:flex;flex-direction:row-reverse;justify-content:space-between;}.header-logo{color:#fff;font-size:25px;margin:15px25px;}.header_img{height:25px;margin:15px25px;}CSSテンプレートの解説4/5
続いて、メインの部分を見ていきましょう。
HTMLでは次のように書いていました。
<divclass="main"><h2> AIが送信された画像の数字を識別します</h2><p>画像を送信してください</p><formmethod="POST"enctype="multipart/form-data"><inputclass="file_choose"type="file"name="file"><inputclass="btn"value="submit!"type="submit"></form><divclass="answer">{{answer}}</div></div>このメイン部分に対応しているCSSはこの部分になります。
.main{height:370px;}h2{color:#444444;margin:90px0px;text-align:center;}p{color:#444444;margin:70px0px30px0px;text-align:center;}.answer{color:#444444;margin:70px0px30px0px;text-align:center;}form{text-align:center;}h2{color:#444444;text-align:center;}margin: 90px 0px;のように2つのピクセル値のみを渡したときは
margin: top&bottom right&left;に対応するように余白が適応されます。
また、text-align: center;と指定することで文字を中央揃えにできます。
CSSテンプレートの解説5/5
最後にフッター部分を見ていきましょう。
HTMLでは次のように書いていました。
ここで、img要素とsmall要素はfooter要素の中にあるので子要素といいます。
footer要素は親要素といいます。
<footer><imgclass="footer_img"src="https://aidemy.net/static/media/logo.eb4d1a66.svg"alt="Aidemy"><small>© 2019 Aidemy, inc.</small></footer>このフッター部分に対応しているCSSはこの部分になります。
footer{background-color:#F7F7F7;height:110px;margin:-8px;position:relative;}.footer_img{height:25px;margin:15px25px;}small{margin:15px25px;left:0px;bottom:0px;position:absolute;}先ほどはmarginを指定することで要素の配置を調整しましたが、
ここでは別の方法で要素を配置しましょう。
まず親要素にposition: relative;を指定することで、その要素の端が基準点となります。
footer{background-color:#F7F7F7;height:110px;position:relative;}そして子要素にposition: absolute;を指定し
left: 0px;、bottom: 0px;と指定することで
左端から数えて0px、下から数えて0pxというように要素を配置することができます。
small{margin:15px25px;position:absolute;left:0px;bottom:0px;}