HTML/CSSでFlaskに使うフロントエンドのデザインを作成する01(背景色と文字色の指定)
背景色と文字色の指定を実施します．
最終成果は，WinXのデザインをベースにしたフロントエンドを作成します．
デザイン元 
デザインゴール 
# ファイル構成
後日，Flaskのフロントに利用したいので下記のようなファイル構成とします．
作業ディレクトリ
├── /templates <- HTML
│ └── main.html
└── /static <- CSS/JS
├── normalize.css
└── style.css
# 編集ファイル
編集するファイルは，main.htmlとstyle.cssとなります．
# normalize.css
normalize.cssは，どのブラウザでアクセスしても表示が変化しないように，各々のブラウザに適用されているデフォルトのスタイルを平均化するために読み込ませるCSSです． normalize.css (opens new window)からダウンロードします．
# CSSの単位
CSSには下記のような単位があります．
- px：デバイスの1ドットを表す絶対値
- em：その要素自身のfont-size値を基準として相対値
/* 基準が16pxより */
body {
/* 1.125em = 16 * 1.125 = 18px */
font-size: 1.125em;
}
.parent {
/* 1.5em = 18 * 1.5 = 27px */
font-size: 1.5em;
/* 2em = 27 * 2 = 54px */
padding: 2em;
}
.child {
/* 0.5em = 27 * 0.5 = 13.5px */
padding: .5em;
}
- rem:ルート要素（通常はhtml要素）のfont-size値を基準として相対値．font-sizeプロパティが指定されているかどうかは影響しません．
/* 基準が16pxより */
body {
/* 1.125em = 16 * 1.125 = 18px */
font-size: 1.125rem;
}
.parent {
/* 1.5em = 16 * 1.5 = 24px */
font-size: 1.5rem;
/* 2em = 16 * 2 = 32px */
padding: 2rem;
}
.child {
/* 0.5em = 16 * 0.5 = 8px */
padding: .5rem;
}
- %:%単位の相対値．しかし，何を基準としているかはプロパティごとに確認すること．widthやmargin、paddingプロパティなら親要素の横幅に対する割合、heightプロパティなら親要素の高さに対する割合、font-sizeプロパティなら親要素の文字サイズに対する割合となります．
- vw:ブラウザの横幅に対する相対値となり，1vwはブラウザの横幅の1%に相当します．
# ヘッダーのデザイン1
下記の画像までのデザインを作成します．
# HTML
前述の画像のHTMLは下記の通りです．
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese" rel="stylesheet">
<link rel="stylesheet" href="../static/normalize.css">
<link rel="stylesheet" href="../static/style.css">
<title>LineArt</title>
</head>
<body>
<div class="wrap">
<header>
<h2 class="header_title">LineArt</h2>
</header>
</div>
# CSS
前述の画像のCSSは下記の通りです．
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
* {
box-sizing: inherit;
}
.wrap {
}
/* 共通
------------------------------------------------------------*/
h2{
font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
display: flex;
justify-content: center;
align-items: center;
margin-block-start: 0;
margin-block-end: 0;
}
/* ヘッダー
------------------------------------------------------------*/
header {
background: #808080;
padding: 0px;
left: 0;
top: 0;
bottom: 0;
width: 100%;
height: 15%;
color: #FFF;
}
.header_title{
background-color: 3d3d3d;
position: absolute;
right: 0;
width: 10%;
height: 15%;
color: #FFF;
}
# CSSの要素
# フォントの指定
フォントはHTMLで読み込み，CSSで指定します．
HTML
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese" rel="stylesheet">
</head>
CSS
h2{
font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
}
# h2の自動配置の修正
h2はデフォルトだと，下画像のような空白が挿入されます．
そこで下記のcssで空白が挿入されないようにします．
h2{
margin-block-start: 0;
margin-block-end: 0;
}
# 上下左右中央揃え
テキストの上下左右中央揃えする場合は下記のように記述します．
h2{
display: flex;
justify-content: center;
align-items: center;
}
# 文字色の指定
文字色は，colorで指定します．
色の数値は，16進数の色 (opens new window)が参考になります．
.header_title{
color: #FFF;
}
# 背景色の指定
背景色は，background・background-colorで指定します．
色の数値は，16進数の色 (opens new window)が参考になります．
header {
background: #808080;
}
.header_title{
background-color: 3d3d3d;
position: absolute;
right: 0;
width: 10%;
height: 15%;
color: #FFF;
}
# 前面配置
headerの前面にheader_titleを配置するために，「position: absolute;」+ 「top, left, right, bottom」の絶対値指定で設定します．
header {
background: #808080;
padding: 0px;
left: 0;
top: 0;
bottom: 0;
width: 100%;
height: 15%;
color: #FFF;
}
.header_title{
background-color: 3d3d3d;
position: absolute;
right: 0;
width: 10%;
height: 15%;
color: #FFF;
}
# まとめ
簡単なヘッダーを作成しました．
ここから徐々に作成します．
# 参考サイト
CSSのnormalize.cssの使い方を現役エンジニアが解説【初心者向け】 (opens new window)
ちゃんと使い分けてる？CSSのpx, em, rem, %, vw単位の違い (opens new window)
[CSS/HTML]上下左右中央揃えまとめ。 (opens new window)
