第3回/フロントエンド開発の履歴(No.1)

履歴一覧
差分を表示
現在との差分を表示
ソースを表示
第3回/フロントエンド開発へ行く。
- 1 (2021-06-29 (火) 22:49:02)
- 2 (2021-06-29 (火) 23:31:05)
- 3 (2021-06-30 (水) 04:48:13)

第3回

2021-06-29 中井
とりあえずhtmlとcssとbootstrapについて、wikiの内容を転記しておく

html†

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

こういった.htmlファイルを前回作成した &attachref()
- 正確には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: 上 右 下 左
```
  上から時計回りになっている。

果物	味
イチゴ	甘い
レモン	酸っぱい

第3回/フロントエンド開発 の履歴(No.1)

html†

基本的な内容†

head†

body†

タグ†

属性(プロパティ)†

CSS†

基本的な内容†

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

文字・色†

配置・図形†

第3回/フロントエンド開発の履歴(No.1)