第3回/フロントエンド開発
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
[[第3回]]
2021-06-29 中井~
とりあえずhtmlとcssとbootstrapについて、wikiの内容を参考...
* html [#m30fc957]
- HTML(HyperText Markup Language)・・・「構造」を記述
- こういった.htmlファイルを前回作成した~
&attachref(html01.jpg,,70%);
-- 正確にはThymeleafを使っているため「テンプレートファイ...
-- Thymeleafでは、htmlファイルをテンプレートとして使える
**基本的な内容 [#hb18d848]
-ファイルの拡張子は&color(#c7254e,#f9f2f4){.html};
-1行目には必ず&color(#c7254e,#f9f2f4){<!DOCTYPE html>};を...
-HTMLは大きく&color(#f89174){head};と&color(#5b8ceb){body...
**head [#kcdc9678]
-<head>...</head>ではさまれた部分。''訪問者に直接は見えな...
-文字のエンコード
<meta charset="UTF-8">
~日本語のサイトであれば必ず書く必要がある。
-タイトルタグ
<title> そのページのタイトル </title>
~検索結果やブラウザのタブに表示されるやつ
-外部ファイルの読み込み
<link rel="stylesheet" href="CSSファイルのURL" />
<script src="JavaScriptファイルのURL"></script>
~CSSファイルやJacaScriptファイルの読み込みをする。(後述)
- ...など
**body [#z94ad94f]
-<body>...</body>ではさまれた部分。''訪問者に見える部分''...
*** タグ [#a62c4695]
要素の一塊を表す。色々意味がある。
-pタグ
~段落を作る。
-h1～h6タグ
~見出しを作る。
-imgタグ
<img src="画像のURL" alt="代替テキスト" />
-aタグ
<a href="https://saruwakakun.com/">リンクボタン</a>
-ul・ol・liタグ
<ul>
<li>1つめの項目</li>
<li>2つめの項目</li>
・・・
</ul>
~箇条書きを作る。ul・liで箇条書き、ol・liで番号付きになる。
-brタグ
<br>
~改行する。上手い人はあまり使わないらしい。
-コメントアウト
<!-- 内容 -->
-tableタグ
~表を作る。
--tr：Table Rowの略。行全体をはさむ。
--th：Table Headerの略。trの中で使う。はさまれた部分は見...
--td：Table Dataの略。trの中で使う。はさまれた部分が表の...
~(例)
<table border="1">
<tr>
<th>果物</th><th>味</th>
</tr>
<tr>
<td>イチゴ</td><td>甘い</td>
</tr>
<tr>
<td>レモン</td><td>酸っぱい</td>
</tr>
</table>
|CENTER:果物|CENTER:味|
|イチゴ|甘い|
|レモン|酸っぱい|
~&color(red){※};1行目はヘッダになっている。
-div・spanタグ
~コードにまとまりを作る。
--div・・・&color(#c7254e,#f9f2f4){ブロック要素};（前後に...
--span・・・&color(#c7254e,#f9f2f4){インライン要素};（前...
*** 属性(プロパティ) [#x2c33894]
タグに対して、補助的な意味を持たせる
- class: 要素の分類用
- id: 固有の設定、要素の識別用
- href: リンク先のURLを指す
- htmlの例
<input type="text" id="mid" name="mid" />
-- input(タグ): 入力する部分を意味する
-- type(属性): 入力形式を意味する。今回はtext形式
-- id(属性): 固有の識別を意味する。これはmidです、と表し...
-- name(属性): あんまり意味ない
* CSS [#ee9f4802]
CSS(Cascading Style Sheets)・・・「装飾」を記述
**基本的な内容 [#u51da10c]
~CSSの書き方は3通り
-1.CSSファイルを作って読み込み（大体これ）
--CSSファイルを別に作り、HTMLファイルから読み込む
<link rel="stylesheet" href="ファイル名.css">
をheadタグ内に記述する。
※thymeleafの場合、リンク先に注意
-2.HTMLファイルにstyleタグを作って書く
--headタグ内に<style>...</style>を書き、その中にCSSを書く
-3.HTMLタグの中に書き込む
<タグ名 style="CSSをここに書く">
&br;
** CSSの基本文法 [#ja5ffc93]
セレクタ {
プロパティ：値;
}
-セレクタ
~タグ名、#id名、.class名
~○○,○○（複数指定）、○○ ○○（絞り込み指定、例:tableタグの中...
**使われるプロパティの例 [#t436312c]
***文字・色 [#q124733c]
-文字の大きさ
font-size: ◯◯px or ◯◯em
--px：縦のピクセルの大きさで指定
--em：現在のフォントサイズに対する倍率
-文字の色
color: 色名(red, blue他) or カラーコード(#FFFFFF他)
-背景色
background: 色名 or カラーコード
-文字の太さ
font-weight: bold
font-weight: lighter
-斜体
font-style: italic
-text-decoration
~テキストの装飾を指定する。
--underline：下線を引く
--overline：上線を引く
--line-through：取り消し線を引く
***配置・図形 [#x7c132f6]
-文字を左/中央/右に寄せる
text-align: left or center or right
-線で囲む
border: 種類 太さ 色
--線の種類
---solid・・・実線
---dotted・・・点線
---dashed・・・破線
---double・・・二重線
--上下左右個別に線をひく
border-top, bottom, left, right:
-要素の幅と高さ
width: ○○px or ○○% or auto
height: ○○px or ○○% or auto
~&color(red){※};heightを%指定するときは親要素の高さが指定...
~&color(red){※};display:inlineの要素では指定できない（文...
~min-width、max-widthでwidthの最小値、最大値を指定できる。
-余白の指定
margin: ○○px or ○○%
padding; ○○px or ○○%
--margin・・・borderの外側の余白
--padding・・・borderの内側の余白
~上下左右の余白をまとめて指定
margin: 上 右 下 左
padding: 上 右 下 左
~上から時計回りになっている。
* 実際にCSSを書いてみる [#i67a8286]
+ src\main\resources\static に css というフォルダを作る
+ その中に todo_css.css というファイルを作成する
+ 以下の内容をコピペする
/* htmlの周囲の余白を作る */
body {
margin: 20px; /* 外側の余白を40pxにする */
padding: 0; /* 内側の余白を消す(念のため) */
}
/* h1(タイトル)のデザイン */
h1 {
padding: 0.5em; /*文字周りの余白*/
color: #494949; /*文字色*/
background: #e6f2f5; /*背景色*/
border-left: solid 5px #78bbc7; /*左線（実線 太さ 色）*/
}
/* h2, h3(見出し)のデザイン */
h2,
h3 {
margin: 20px;
color: #494949; /*文字色*/
background: #e6f2f5; /*背景色*/
border-bottom: solid 3px #78bbc7; /*下線*/
}
/* img(画像)のデザイン */
img {
margin: 20px;
}
/* form(ログイン時)のデザイン */
form {
width: 460px;
padding: 0.5em;
background: #e6f2f5; /*背景色*/
}
/* table(表)のデザイン、以下も同様 */
table {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 650px;
table-layout: fixed;
background: #e6f2f5; /*背景色*/
}
table tr {
background-color: #e6f2f5;
padding: 0.35em;
border-bottom: 2px solid #fff;
}
table th,
table td {
padding: 1em 10px 1em 1em;
border-right: 2px solid #fff;
}
table th {
font-size: 0.85em;
}
table thead tr {
background-color: #167f92;
color: #fff;
}
table tbody th {
background: #78bbc7;
color: #fff;
}
.txt {
text-align: left;
font-size: 0.85em;
}
/* a(リンク)のデザイン */
a {
font-weight: bold; /*太字に*/
text-decoration: none; /*下線消す*/
background: skyblue; /*背景を水色に*/
color: white; /*文字を白に*/
padding: 5px 10px; /*内側の余白*/
border-radius: 20px; /*角を丸くする*/
font-family: 'Avenir', 'Arial'; /*フォントをいい感じに*/
}
a:hover {
background: silver; /*背景色をシルバーに*/
text-decoration: none; /*下線を消す*/
}
+ htmlファイルのheadの部分に、以下の内容を記述する
<!-- 手書きcss, <head>の中に以下のcssを入れる -->
<link rel="stylesheet" th:href=@{/css/todo_css.css} />
+ 実行するとこうなるはず
-- ←がCSS適応前、→がCSS適応後~
&attachref(css04.jpg,,70%);
&attachref(css05.jpg,,70%);
- これらのCSSはほぼコピペで作成しており、余白やフォントサ...
- 意外と簡単に出来る
* Bootstrap [#i6dff77b]
- 某アカデミーでは、以下のように説明されている
Bootstrapはレスポンシブデザインに対応したフロントエンド...
シンプルな指示でグリッドシステムを使用できたり、本格的な...
-- よくあるCSSの記述をあらかじめ定義している。
-- スマホ用設定も簡単に出来る
-- とりあえず入れておけば、誰でもキレイに魅せられる、WEB...
--- https://qiita.com/kakimochi/items/4e95c9e4d1e4b00ec05a
** 導入方法 [#lb431d44]
- headに以下を記述
<!-- bootstrap, <head>の中に以下のcss,jsを入れる -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/...
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784...
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min....
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVz...
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper....
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO...
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4...
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6V...
crossorigin="anonymous"
></script>
- 適応するとこうなる~
&attachref(css06.jpg,,70%);
- あんまり変わってない...？
-- BootStrapでは、classをきちんと定義することで、デザイン...
*** 表を変えてみる [#t1861938]
- list.htmlのtableタグに、属性を追加する
<table border="1" class="table">
- ↑が適応前、↓が適応後~
&attachref(bs01.jpg);
-- 横幅にも合わせて、いい感じに表示出来ている
- さらに別属性を追加してみる
-- 表の1行目の部分を以下のように変更する
<thead class="thead-dark">
<tr>
<th>#</th>
<th>タイトル</th>
<th>作成日時</th>
<th>コマンド</th>
</tr>
</thead>
~&attachref(bs02.jpg);
-- 分かりやすくなった...？
*** ボタンを変えてみる [#pa4ef1ee]
- list.htmlのログインボタンに、属性を追加する
<input type="submit" class="btn btn-primary" value="ログ...
&attachref(bs03.jpg);
-- よく見かけるボタンの色に変化した
-- ちなみに、色は色々変えられます(%%色だけに%%)
~&attachref(bs04.jpg);
* やってみよう！ [#haad7e22]
- ログインページのformをいい感じにしてみよう！
-- 検索していい感じな物のhtml, cssをコピペすると早い
- ToDoListの表をいい感じにしてみよう！
-- いろんなclassを付けて、その変化を確認してみる
* さらに知りたい人へ [#m320258d]
- グリッドシステムについて知りたい人は以下のページへ
-- [[./グリッドシステム]]
終了行:
[[第3回]]
2021-06-29 中井~
とりあえずhtmlとcssとbootstrapについて、wikiの内容を参考...
* html [#m30fc957]
- HTML(HyperText Markup Language)・・・「構造」を記述
- こういった.htmlファイルを前回作成した~
&attachref(html01.jpg,,70%);
-- 正確にはThymeleafを使っているため「テンプレートファイ...
-- Thymeleafでは、htmlファイルをテンプレートとして使える
**基本的な内容 [#hb18d848]
-ファイルの拡張子は&color(#c7254e,#f9f2f4){.html};
-1行目には必ず&color(#c7254e,#f9f2f4){<!DOCTYPE html>};を...
-HTMLは大きく&color(#f89174){head};と&color(#5b8ceb){body...
**head [#kcdc9678]
-<head>...</head>ではさまれた部分。''訪問者に直接は見えな...
-文字のエンコード
<meta charset="UTF-8">
~日本語のサイトであれば必ず書く必要がある。
-タイトルタグ
<title> そのページのタイトル </title>
~検索結果やブラウザのタブに表示されるやつ
-外部ファイルの読み込み
<link rel="stylesheet" href="CSSファイルのURL" />
<script src="JavaScriptファイルのURL"></script>
~CSSファイルやJacaScriptファイルの読み込みをする。(後述)
- ...など
**body [#z94ad94f]
-<body>...</body>ではさまれた部分。''訪問者に見える部分''...
*** タグ [#a62c4695]
要素の一塊を表す。色々意味がある。
-pタグ
~段落を作る。
-h1～h6タグ
~見出しを作る。
-imgタグ
<img src="画像のURL" alt="代替テキスト" />
-aタグ
<a href="https://saruwakakun.com/">リンクボタン</a>
-ul・ol・liタグ
<ul>
<li>1つめの項目</li>
<li>2つめの項目</li>
・・・
</ul>
~箇条書きを作る。ul・liで箇条書き、ol・liで番号付きになる。
-brタグ
<br>
~改行する。上手い人はあまり使わないらしい。
-コメントアウト
<!-- 内容 -->
-tableタグ
~表を作る。
--tr：Table Rowの略。行全体をはさむ。
--th：Table Headerの略。trの中で使う。はさまれた部分は見...
--td：Table Dataの略。trの中で使う。はさまれた部分が表の...
~(例)
<table border="1">
<tr>
<th>果物</th><th>味</th>
</tr>
<tr>
<td>イチゴ</td><td>甘い</td>
</tr>
<tr>
<td>レモン</td><td>酸っぱい</td>
</tr>
</table>
|CENTER:果物|CENTER:味|
|イチゴ|甘い|
|レモン|酸っぱい|
~&color(red){※};1行目はヘッダになっている。
-div・spanタグ
~コードにまとまりを作る。
--div・・・&color(#c7254e,#f9f2f4){ブロック要素};（前後に...
--span・・・&color(#c7254e,#f9f2f4){インライン要素};（前...
*** 属性(プロパティ) [#x2c33894]
タグに対して、補助的な意味を持たせる
- class: 要素の分類用
- id: 固有の設定、要素の識別用
- href: リンク先のURLを指す
- htmlの例
<input type="text" id="mid" name="mid" />
-- input(タグ): 入力する部分を意味する
-- type(属性): 入力形式を意味する。今回はtext形式
-- id(属性): 固有の識別を意味する。これはmidです、と表し...
-- name(属性): あんまり意味ない
* CSS [#ee9f4802]
CSS(Cascading Style Sheets)・・・「装飾」を記述
**基本的な内容 [#u51da10c]
~CSSの書き方は3通り
-1.CSSファイルを作って読み込み（大体これ）
--CSSファイルを別に作り、HTMLファイルから読み込む
<link rel="stylesheet" href="ファイル名.css">
をheadタグ内に記述する。
※thymeleafの場合、リンク先に注意
-2.HTMLファイルにstyleタグを作って書く
--headタグ内に<style>...</style>を書き、その中にCSSを書く
-3.HTMLタグの中に書き込む
<タグ名 style="CSSをここに書く">
&br;
** CSSの基本文法 [#ja5ffc93]
セレクタ {
プロパティ：値;
}
-セレクタ
~タグ名、#id名、.class名
~○○,○○（複数指定）、○○ ○○（絞り込み指定、例:tableタグの中...
**使われるプロパティの例 [#t436312c]
***文字・色 [#q124733c]
-文字の大きさ
font-size: ◯◯px or ◯◯em
--px：縦のピクセルの大きさで指定
--em：現在のフォントサイズに対する倍率
-文字の色
color: 色名(red, blue他) or カラーコード(#FFFFFF他)
-背景色
background: 色名 or カラーコード
-文字の太さ
font-weight: bold
font-weight: lighter
-斜体
font-style: italic
-text-decoration
~テキストの装飾を指定する。
--underline：下線を引く
--overline：上線を引く
--line-through：取り消し線を引く
***配置・図形 [#x7c132f6]
-文字を左/中央/右に寄せる
text-align: left or center or right
-線で囲む
border: 種類 太さ 色
--線の種類
---solid・・・実線
---dotted・・・点線
---dashed・・・破線
---double・・・二重線
--上下左右個別に線をひく
border-top, bottom, left, right:
-要素の幅と高さ
width: ○○px or ○○% or auto
height: ○○px or ○○% or auto
~&color(red){※};heightを%指定するときは親要素の高さが指定...
~&color(red){※};display:inlineの要素では指定できない（文...
~min-width、max-widthでwidthの最小値、最大値を指定できる。
-余白の指定
margin: ○○px or ○○%
padding; ○○px or ○○%
--margin・・・borderの外側の余白
--padding・・・borderの内側の余白
~上下左右の余白をまとめて指定
margin: 上 右 下 左
padding: 上 右 下 左
~上から時計回りになっている。
* 実際にCSSを書いてみる [#i67a8286]
+ src\main\resources\static に css というフォルダを作る
+ その中に todo_css.css というファイルを作成する
+ 以下の内容をコピペする
/* htmlの周囲の余白を作る */
body {
margin: 20px; /* 外側の余白を40pxにする */
padding: 0; /* 内側の余白を消す(念のため) */
}
/* h1(タイトル)のデザイン */
h1 {
padding: 0.5em; /*文字周りの余白*/
color: #494949; /*文字色*/
background: #e6f2f5; /*背景色*/
border-left: solid 5px #78bbc7; /*左線（実線 太さ 色）*/
}
/* h2, h3(見出し)のデザイン */
h2,
h3 {
margin: 20px;
color: #494949; /*文字色*/
background: #e6f2f5; /*背景色*/
border-bottom: solid 3px #78bbc7; /*下線*/
}
/* img(画像)のデザイン */
img {
margin: 20px;
}
/* form(ログイン時)のデザイン */
form {
width: 460px;
padding: 0.5em;
background: #e6f2f5; /*背景色*/
}
/* table(表)のデザイン、以下も同様 */
table {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 650px;
table-layout: fixed;
background: #e6f2f5; /*背景色*/
}
table tr {
background-color: #e6f2f5;
padding: 0.35em;
border-bottom: 2px solid #fff;
}
table th,
table td {
padding: 1em 10px 1em 1em;
border-right: 2px solid #fff;
}
table th {
font-size: 0.85em;
}
table thead tr {
background-color: #167f92;
color: #fff;
}
table tbody th {
background: #78bbc7;
color: #fff;
}
.txt {
text-align: left;
font-size: 0.85em;
}
/* a(リンク)のデザイン */
a {
font-weight: bold; /*太字に*/
text-decoration: none; /*下線消す*/
background: skyblue; /*背景を水色に*/
color: white; /*文字を白に*/
padding: 5px 10px; /*内側の余白*/
border-radius: 20px; /*角を丸くする*/
font-family: 'Avenir', 'Arial'; /*フォントをいい感じに*/
}
a:hover {
background: silver; /*背景色をシルバーに*/
text-decoration: none; /*下線を消す*/
}
+ htmlファイルのheadの部分に、以下の内容を記述する
<!-- 手書きcss, <head>の中に以下のcssを入れる -->
<link rel="stylesheet" th:href=@{/css/todo_css.css} />
+ 実行するとこうなるはず
-- ←がCSS適応前、→がCSS適応後~
&attachref(css04.jpg,,70%);
&attachref(css05.jpg,,70%);
- これらのCSSはほぼコピペで作成しており、余白やフォントサ...
- 意外と簡単に出来る
* Bootstrap [#i6dff77b]
- 某アカデミーでは、以下のように説明されている
Bootstrapはレスポンシブデザインに対応したフロントエンド...
シンプルな指示でグリッドシステムを使用できたり、本格的な...
-- よくあるCSSの記述をあらかじめ定義している。
-- スマホ用設定も簡単に出来る
-- とりあえず入れておけば、誰でもキレイに魅せられる、WEB...
--- https://qiita.com/kakimochi/items/4e95c9e4d1e4b00ec05a
** 導入方法 [#lb431d44]
- headに以下を記述
<!-- bootstrap, <head>の中に以下のcss,jsを入れる -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/...
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784...
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min....
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVz...
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper....
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO...
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4...
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6V...
crossorigin="anonymous"
></script>
- 適応するとこうなる~
&attachref(css06.jpg,,70%);
- あんまり変わってない...？
-- BootStrapでは、classをきちんと定義することで、デザイン...
*** 表を変えてみる [#t1861938]
- list.htmlのtableタグに、属性を追加する
<table border="1" class="table">
- ↑が適応前、↓が適応後~
&attachref(bs01.jpg);
-- 横幅にも合わせて、いい感じに表示出来ている
- さらに別属性を追加してみる
-- 表の1行目の部分を以下のように変更する
<thead class="thead-dark">
<tr>
<th>#</th>
<th>タイトル</th>
<th>作成日時</th>
<th>コマンド</th>
</tr>
</thead>
~&attachref(bs02.jpg);
-- 分かりやすくなった...？
*** ボタンを変えてみる [#pa4ef1ee]
- list.htmlのログインボタンに、属性を追加する
<input type="submit" class="btn btn-primary" value="ログ...
&attachref(bs03.jpg);
-- よく見かけるボタンの色に変化した
-- ちなみに、色は色々変えられます(%%色だけに%%)
~&attachref(bs04.jpg);
* やってみよう！ [#haad7e22]
- ログインページのformをいい感じにしてみよう！
-- 検索していい感じな物のhtml, cssをコピペすると早い
- ToDoListの表をいい感じにしてみよう！
-- いろんなclassを付けて、その変化を確認してみる
* さらに知りたい人へ [#m320258d]
- グリッドシステムについて知りたい人は以下のページへ
-- [[./グリッドシステム]]
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
