第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タグの中にあるinputタグ）

**使われるプロパティの例 [#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の部分に、以下の内容を記述する
    
    <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に以下を記述
    
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      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]

- グリッドシステムについて知りたい人は以下のページへ
-- [[./グリッドシステム]]

タイムスタンプを変更しない