第3回/フロントエンド開発 - KobeSpiral2021

[ トップ ] [ 編集 | 凍結 | 差分 | 履歴 | 添付 | リロード ] [ 新規 | 一覧 | 検索 | 最終更新 | ヘルプ ]

2021-06-29 中井
とりあえずhtmlとcssとbootstrapについて、wikiの内容を参考に記述

html†

HTML(HyperText Markup Language)・・・「構造」を記述

こういった.htmlファイルを前回作成した
- 正確にはThymeleafを使っているため「テンプレートファイル」という
- Thymeleafでは、htmlファイルをテンプレートとして使える

基本的な内容†

ファイルの拡張子は.html
1行目には必ず<!DOCTYPE html>を記述
HTMLは大きくheadとbodyの二つの部分に分けられる

head†

<head>...</head>ではさまれた部分。訪問者に直接は見えないタグを入れる

文字のエンコード
```
<meta charset="UTF-8">
```
日本語のサイトであれば必ず書く必要がある。

タイトルタグ
```
<title> そのページのタイトル </title>
```
検索結果やブラウザのタブに表示されるやつ

外部ファイルの読み込み
```
<link rel="stylesheet" href="CSSファイルのURL" />
<script src="JavaScriptファイルのURL"></script>
```
CSSファイルやJacaScriptファイルの読み込みをする。(後述)

...など

body†

<body>...</body>ではさまれた部分。訪問者に見える部分がここに書かれる

タグ†

要素の一塊を表す。色々意味がある。

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>
```
  果物味
  
  イチゴ甘い
  
  レモン酸っぱい
  
  ※1行目はヘッダになっている。

div・spanタグ
コードにまとまりを作る。
- div・・・ブロック要素（前後に改行が入る）
- span・・・インライン要素（前後に改行が入らない）

属性(プロパティ)†

タグに対して、補助的な意味を持たせる

class: 要素の分類用
id: 固有の設定、要素の識別用
href: リンク先のURLを指す

htmlの例
```
<input type="text" id="mid" name="mid" />
```
- input(タグ): 入力する部分を意味する
- type(属性): 入力形式を意味する。今回はtext形式
- id(属性): 固有の識別を意味する。これはmidです、と表している。
- name(属性): あんまり意味ない

CSS†

CSS(Cascading Style Sheets)・・・「装飾」を記述

基本的な内容†

CSSの書き方は3通り

1.CSSファイルを作って読み込み（大体これ）

CSSファイルを別に作り、HTMLファイルから読み込む

<link rel="stylesheet" href="ファイル名.css">
をheadタグ内に記述する。
※thymeleafの場合、リンク先に注意

2.HTMLファイルにstyleタグを作って書く
- headタグ内に<style>...</style>を書き、その中にCSSを書く

3.HTMLタグの中に書き込む

<タグ名 style="CSSをここに書く">

CSSの基本文法†

セレクタ {
  プロパティ：値;
}

セレクタ
タグ名、#id名、.class名

○○,○○（複数指定）、○○ ○○（絞り込み指定、例:tableタグの中にあるinputタグ）

使われるプロパティの例†

文字・色†

文字の大きさ
```
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：取り消し線を引く

配置・図形†

文字を左/中央/右に寄せる
```
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
```
※heightを%指定するときは親要素の高さが指定されている必要がある。

※display:inlineの要素では指定できない（文字の長さや大きさで決まるため）

min-width、max-widthでwidthの最小値、最大値を指定できる。

余白の指定
```
margin: ○○px or ○○%
padding; ○○px or ○○%
```
- margin・・・borderの外側の余白
- padding・・・borderの内側の余白
  上下左右の余白をまとめて指定
```
margin: 上 右 下 左
padding: 上 右 下 左
```
  上から時計回りになっている。

実際にCSSを書いてみる†

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適応後

これらのCSSはほぼコピペで作成しており、余白やフォントサイズくらいしか調整してない。
意外と簡単に出来る

Bootstrap†

某アカデミーでは、以下のように説明されている
```
Bootstrapはレスポンシブデザインに対応したフロントエンドのフレームワークだよ。
シンプルな指示でグリッドシステムを使用できたり、本格的なフォームやボタンを作成できたりと非常に便利なんだ。
```
- よくあるCSSの記述をあらかじめ定義している。
- スマホ用設定も簡単に出来る
- とりあえず入れておけば、誰でもキレイに魅せられる、WEBデザイン界の"味覇(ウェイパー)"
  - https://qiita.com/kakimochi/items/4e95c9e4d1e4b00ec05a

導入方法†

headに以下を記述

   <!-- bootstrap, <head>の中に以下のcss,jsを入れる -->
   <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>

適応するとこうなる

あんまり変わってない...？
- BootStrapでは、classをきちんと定義することで、デザインが変更される

表を変えてみる†

list.htmlのtableタグに、属性を追加する
```
<table border="1" class="table">
```
↑が適応前、↓が適応後
- 横幅にも合わせて、いい感じに表示出来ている

さらに別属性を追加してみる

表の1行目の部分を以下のように変更する

     <thead class="thead-dark">
       <tr>
         <th>#</th>
         <th>タイトル</th>
         <th>作成日時</th>
         <th>コマンド</th>
       </tr>
     </thead>

分かりやすくなった...？

ボタンを変えてみる†

list.htmlのログインボタンに、属性を追加する
```
<input type="submit" class="btn btn-primary" value="ログイン" />
```
- よく見かけるボタンの色に変化した
- ちなみに、色は色々変えられます(~~色だけに~~)

やってみよう！†

ログインページのformをいい感じにしてみよう！
- 検索していい感じな物のhtml, cssをコピペすると早い
ToDoListの表をいい感じにしてみよう！
- いろんなclassを付けて、その変化を確認してみる

さらに知りたい人へ†

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

■検索

■メニュー

■参考

■スタッフ用

添付ファイル:

html01.jpg 68件 [詳細]

css04.jpg 55件 [詳細]

css05.jpg 47件 [詳細]

css06.jpg 63件 [詳細]

bs04.jpg 56件 [詳細]

bs03.jpg 90件 [詳細]

bs02.jpg 69件 [詳細]

bs01.jpg 61件 [詳細]

Last-modified: 2023-11-23 (木) 23:14:42