20201001 授業メモ
授業内容
mb_convert_kana
・指定した文字列を半角から全角に変換することができる
・変換対象は、全角数字、半角カナ、半角数字、ひらがな、カタカナ
mysqli_real_escape_string
■labelタグの使い方
1.文字とフォームパーツをlabelタグで囲んでグループ化する
「フォームパーツのID属性」
をそろえて関連があることを定義する事。
<label>
項目１
</label>
■onclick属性
・JavaScript専用属性
・イベント用属性
場所：
種類（タイミング）：クリックしたとき
処理：属性値に記述されている
return confirm('一覧に戻りますか？')
confirmメソッド：確認ダイアログ画面表示
「ok」→戻り値「true」
「キャンセル」→戻り値「false」
■今回のa要素はくりっくで確認ダイアログ画面表示
「ok」→リンク先に移動する
「キャンセル」→リンク先に移動しない
下記二つのファイルは入力フォーム作成用
〇entry.phpより
<?php
// デバッグ領域表示・非表示
$debug = true;
// 自作関数定義を読み込む
// いつものDB接続
or die('接続不可');
mysqli_select_db($dbobj, 'practice');
mysqli_set_charset($dbobj, 'utf8');
// SQL文をDBに投げる
or die(mysqli_error($dbobj));
// 下記テーブル情報を変数trSet(traderSet)に代入
// +------+----------+---------+--------------+
// | m_id | company | address | tell |
// +------+----------+---------+--------------+
// | 1 | ペン工房 | 東京都 | 03-0000-0000 |
// | 2 | 小鳥文具 | 栃木県 | 028-111-1111 |
// | 3 | 黒木屋 | 島根県 | 0853-55-5555 |
// +------+----------+---------+--------------+
?>
<!DOCTYPE html>
<html>
<head>
<title>商品管理システム</title>
</head>
<body>
<div class="debug">
</div>
<div id="container">
<div id="head">
<h1>新規登録</h1>
</div>
<div id="content">
<fieldset>
<legend>新しい商品の情報</legend>
<dl>
<dt><label for="item">商品名<span>※必須</span></label></dt>
<dd><input name="item" type="text" id="item" size="20" maxlength="10"></dd>
<dt><label for="price">価格</label></dt>
<dd><input name="price" type="text" id="price" size="10" maxlength="10"></dd>円
<dt><label for="stock">在庫</label></dt>
<dd><input name="stock" type="text" id="stock" size="10" maxlength="10"></dd>
<dt><label for="keyword">キーワード</label></dt>
<dd><input name="keyword" type="text" id="keyword" size="50" maxlength="255"></dd>
</dl>
</fieldset>
<fieldset>
<legend>メーカー情報</legend>
<dl>
<dt>メーカー<span>※必須</span></dt>
<label>
</label>
</dd>
</dl>
</fieldset>
</form>
<!--#content-->
</div>
<!--#container-->
</div>
</body>
</html>
〇insert.phpより
<?php
$debug = true;
// 三項演算子で値が届いているか確認したうえで各変数に値を代入
// 値が届いていたら「届いた値」を代入
// 値が届いていなかったら「NULL」を代入
$item = isset($_POST['item']) ? $_POST['item'] : NULL;
$price = isset($_POST['price']) ? $_POST['price'] : NULL;
$stock = isset($_POST['stock']) ? $_POST['stock'] : NULL;
$keyword = isset($_POST['keyword']) ? $_POST['keyword'] : NULL;
$maker = isset($_POST['maker']) ? $_POST['maker'] : NULL;
// trimとは
// 文字列の先頭・末尾にあるホワイトスペースを取り除く
// ホワイトスペースとは：半角スペース、タブ、改行など
$item = trim($item);
$price = trim($price);
$stock = trim($stock);
$keyword = trim($keyword);
$maker = trim($maker);
$message = ''; //ブラウザ表示用メッセージ
$btn = ''; //ブラウザ表示用リンク
if ($item == '' or $maker == '') {
// 必須項目である商品名（$item）とメーカー（$maker）が空文字もしくはNULL
// ではないことを確認
// 確認できたらエラー時の処理
$message = '必須項目を入力してください';
フォームに戻る</a>';
} else {
// 確認できなかったらOKの処理
// DB接続
or die('接続不可');
mysqli_select_db($dbobj, 'practice');
mysqli_set_charset($dbobj, 'utf8');
// セキュリティ対策（SQLインジェクション対策）
// mysqli_real_escape_string関数
// 注意：第一引数に接続許可証が必要なのでDB接続後にしか使えない。
// 第一引数：接続許可証
// 第二引数：変数対象の文字列
// 戻り値：クォートエスケープ後の文字列
//DBでは意味がある記号のクォート文字をエスケープする
// 文字列開始・終了のクォートを悪用した攻撃がある
// DELETEの時に実演するので保留。
// mb_convert_kana関数
// 文字列を全角・半角等に変換する。
// 第一引数：変数対象文字列
// 第二引数：変換ルールを指定するオプション
// 「ｎ」全角数字を半角数字に変換するオプション
// ユーザ入力する値の全角・半角のゆれを
// mb_convert_kana関数で統一することができる
$item = mysqli_real_escape_string($dbobj, $item);
$price = mysqli_real_escape_string($dbobj, mb_convert_kana($price, 'n'));
$stock = mysqli_real_escape_string($dbobj, mb_convert_kana($stock, 'n'));
$keyword = mysqli_real_escape_string($dbobj, $keyword);
$maker = mysqli_real_escape_string($dbobj, mb_convert_kana($maker, 'n'));
// sprint（string print formatted）関数
// 第一引数：フォーマット対象文字列
// 必要に応じて虫食い部分を作成できる
// 虫食い部分には「%s」「%d」等を指定
// 第二引数以降：フォーマット対象文字列に追加する値
'insert into stationery SET
item="%s",price=%d,stock=%d,keyword="%s",maker=%d',
$item,
$price,
$stock,
$keyword,
$maker,
);
$message = '新規登録しました';
}
?>
<!DOCTYPE html>
<html>
<head>
<title>商品管理システム</title>
</head>
<body>
<div class="debug">
</div>
<div id="container">
<div id="head">
<h1>新規登録</h1>
</div>
<div id="content">
<!--#content-->
</div>
<!--#container-->
</div>
</body>
</html>
20200929 授業メモ
授業内容
エラー名:undifined barriable
→変数名を確認
変数名が大文字小文字で違っていたり抜けていたりする場合が多い
XSS対策
タグを認識させないように対策をする
index.phpより
<?php
// デバッグ用領域の表示・非表示
$debug = true;
// 自分で作成した関数functions.phpを読み込んで利用できるようにする
// ・h関数：XSS対策用関数
// ・v関数：デバッグ表示用関数
// require_once：読み込み失敗時にFatal_Errorで処理を停止させる
// →once・・・同じファイルを複数回読み込みさせない
// ・・・うっかり複数回読み込んでも2回目以降は無視
// dirname(__FILE__)→＿DIR__
// ↑上記はどちらも同じ意味
// 今動いているファイルのフォルダまでの絶対パスが返ってくる
// __FILE__:PHPがあらかじめ用意している定数
// マジカル定数
// 今動いているファイルまでの絶対パス
// dirname関数:引数で指定したファイルパスからファイル名を除いてディレクトリまでの
// 絶対パスを返す関数
// データベースの接続
// ORの特殊な使い方
// 第一条件：mysqli_connect関数の戻り値を変数dbobjに代入して
// 変数dbobjの値で真偽値の判断
// 接続ok:mysqliオブジェクトがあるので「true」
// 第二条件は見ない
// 接続NG：falseなので「false」
// 第二条件を見る
// 第二条件：die関数は引数を出力してPHP処理を停止
$dbobj = mysqli_connect(
'Tanaka', //DBユーザ名
'Manager' //DBパスワード
)
or die('接続不可');
mysqli_select_db($dbobj, 'practice');
mysqli_set_charset($dbobj, 'utf8');
// 実行するSQL文を変数に代入
// $sql = 'SELECT*FROM stationery';
// mysqli_query関数でSQL文を実行
// 戻り値としてstationeryテーブル情報が返る
// 変数resultSetに代入
// ORの特殊な使い方
// 第一引数：SQL文の結果を変数resultSetに代入
// 変数resultSetの値で真偽値判定
// SQL文実行okでテーブル情報あり「true」
// SQL文実行NGで「false」
// 第二条件を見る
// 第二条件：die関数の実行
// die関数の引数に「mysql_error関数」
// mysql_error関数：DBエラーメッセージをDBから取得して返す関数
or die(mysqli_errnor($dbobj));
//mysqli_affected_rows関数
// 直前に実行したSQL文の結果を返す
// 直前に実行したSQL文がSELECT文だった場合、取得したレコードの件数を返す
// 変数名bl（bool値の意味）はHTML側でこの値を真偽値がわりに使っているので
// あまりよくないかも
// 数値が入っていることがわかる変数名の方がよい
$bl = mysqli_affected_rows($dbobj);
v($bl);
?>
<!DOCTYPE html>
<html>
<head>
<title>商品管理システム</title>
</head>
<body>
<div class="debug">
</div>
<div id="container">
<div id="head">
</div>
<div id="content">
<table>
<tr>
<th>ID</th>
<th>商品名</th>
<th>価格</th>
<th>在庫</th>
<th>キーワード</th>
<th>メーカー</th>
<th>電話番号</th>
<th>編集</th>
<th>削除</th>
</tr>
<tr>
<td>編集</td>
<td>削除</td>
</tr>
</table>
<p>商品がありません</p>
<!--#content-->
</div>
<!--#container-->
</div>
<?php
$str = '<h1>てすと</h1>';
echo $str;
echo htmlspecialchars($str);
// htmlspecialchars()関数
// HTMLで意味がある記号を実態参照に置き換える
// →XSS攻撃を防ぐ
// XSS（クロスサイトスプリクッティング）：scriptタグを使ったJSによる攻撃
// 対策としてHTMLタグを無効化して防ぐ。
// 第一引数(必須)：変数対象文字列
// 第二引数：クォートを実態参照にするか
// ダブルクォートは指定なしでも実態参照にする
// scriptタグ内で出力した際にJSの文字列を無効化するため
// 第三引数：文字コードを指定
// 戻り値：タグを無効化した文字列
// htmlspecialchars()でユーザ入力値を無害化（サニタイジング）する
// タイミングは出力直前で行う。
// 複数サニタイジングはNG
?>
</body>
</html>
functions.phpより
<?php
// HTMLでのエスケープ処理をする関数
// 引数に変数も配列も両方受け取って
function h($var)
{
if (is_array($var)) {
// 配列を受け取った時の処理
return array_map('h', $var);
} else {
// 配列じゃないときの処理
}
}
// デバック用関数
function v($val)
{
echo '<pre>';
var_dump($val);
echo '<?pre>';
}
20200928 授業メモ
授業内容
〇コマンドプロンプトとは
文字ベースでコンピュータとやりとりするツール
※SQL=structure query lunguage(要求分)
作成に必要なファイル
practice.sql
user.sql
上記2点をザンプフォルダ内に作成
■データベースに接続する手順（シェル）
1.ユーザ名とパスワードを指定してmysqlにログイン
mysql -u root -pack
2.データベース領域の選択
use practice
----------ここまでが接続----------
3.テーブルの表示
select * from stationery;
--practice.sql--
#データベース領域の作成
create database practice;
#データベース領域の選択
use practice
#テーブル作成
create table stationery(
id int primary key auto_increment,
item char(10),
price int,
stock int default 0,
keyword text,
maker int
);
#stationeryテーブルにレコードを挿入
INSERT INTO stationery (item, price,stock,keyword,maker) VALUES
('万年筆', 19000,10,'逸品',1),
('鉛筆', 60,22,'文具',2),
('クレヨン', 120,8,'絵画',3),
('色鉛筆', 200,15,'絵画',3),
('消しゴム', 90,26,'事務',2),
('コンパス', 160,0,'事務',1);
#traderテーブル作成
create table trader(
m_id int primary key auto_increment,
company char(10),
address text,
tell char(13)
);
#traderテーブルにレコードを挿入
INSERT INTO trader (company, address,tell) VALUES
('ペン工房', '東京都','03-0000-0000'),
('小鳥文具', '栃木県','028-111-1111'),
('黒木屋', '島根県','0853-55-5555');
--user.sql--
#ユーザの作成
grant all
on practice.*
to Tanaka@localhost identified
by 'Manager';
#ユーザの確認
select user,host from mysql.user;
#ユーザの詳細確認
show grants for Tanaka@localhost;
--select_test.php--
<!DOCTYPE html>
<html>
<head>
<title>レコードを取得する</title>
</head>
<body>
<div>
<?php
// mysqli_connect:DB接続関数
// 第一引数:DBサーバの場所
// 第二引数:ユーザ名
// 第三引数:パスワード
// 戻り値:接続ok→接続情報をもったオブジェクト
// 接続NG→false
or die(mysqli_error($dbobj));
mysqli_select_db($dbobj, 'practice');
// USE practice と同じ処理
// mysqli_select_db：DB領域選択
// 第一引数：DB接続許可証（オブジェクト）
// 第二引数：選択するDB領域
mysqli_set_charset($dbobj, 'utf8');
// mysqli_set_charset：文字化け対策保険
// 文字コード変換
// 第一引数：DB接続許可証（オブジェクト）
// ▲--ここまでDB接続処理--▲
$resultSet = mysqli_query($dbobj, 'select * from stationery')
// mysqli_query：SQL文をDBに渡す関数
// 第一引数：DB接続許可証（オブジェクト）
// 第二引数：SQL文
// 戻り値：select文の結果のテーブル情報
// テーブル情報を変数resultSetに代入
// +----+----------+-------+-------+---------+-------+
// | id | item | price | stock | keyword | maker |
// +----+----------+-------+-------+---------+-------+
// | 1 | 万年筆 | 19000 | 10 | 逸品 | 1 |
// | 2 | 鉛筆 | 60 | 22 | 文具 | 2 |
// | 3 | クレヨン | 120 | 8 | 絵画 | 3 |
// | 4 | 色鉛筆 | 200 | 15 | 絵画 | 3 |
// | 5 | 消しゴム | 90 | 26 | 事務 | 2 |
// | 6 | コンパス | 160 | 0 | 事務 | 1 |
// +----+----------+-------+-------+---------+-------+
or die(mysqli_error($dbobj));
$data = mysqli_fetch_assoc($resultSet);
echo $data['item'];
?>
</div>
</body>
</html>
--select_test.php--
<!DOCTYPE html>
<html>
<head>
<title>レコードを取得する</title>
</head>
<body>
<div>
<?php
// mysqli_connect:DB接続関数
// 第一引数:DBサーバの場所
// 第二引数:ユーザ名
// 第三引数:パスワード
// 戻り値:接続ok→接続情報をもったオブジェクト
// 接続NG→false
or die(mysqli_error($dbobj));
mysqli_select_db($dbobj, 'practice');
// USE practice と同じ処理
// mysqli_select_db：DB領域選択
// 第一引数：DB接続許可証（オブジェクト）
// 第二引数：選択するDB領域
mysqli_set_charset($dbobj, 'utf8');
// mysqli_set_charset：文字化け対策保険
// 文字コード変換
// 第一引数：DB接続許可証（オブジェクト）
// ▲--ここまでDB接続処理--▲
$resultSet = mysqli_query($dbobj, 'select * from stationery')
// mysqli_query：SQL文をDBに渡す関数
// 第一引数：DB接続許可証（オブジェクト）
// 第二引数：SQL文
// 戻り値：select文の結果のテーブル情報
// テーブル情報を変数resultSetに代入
// +----+----------+-------+-------+---------+-------+
// | id | item | price | stock | keyword | maker |
// +----+----------+-------+-------+---------+-------+
// | 1 | 万年筆 | 19000 | 10 | 逸品 | 1 |
// | 2 | 鉛筆 | 60 | 22 | 文具 | 2 |
// | 3 | クレヨン | 120 | 8 | 絵画 | 3 |
// | 4 | 色鉛筆 | 200 | 15 | 絵画 | 3 |
// | 5 | 消しゴム | 90 | 26 | 事務 | 2 |
// | 6 | コンパス | 160 | 0 | 事務 | 1 |
// +----+----------+-------+-------+---------+-------+
or die(mysqli_error($dbobj));
$data = mysqli_fetch_assoc($resultSet);
// mysqli_fetch_assoc
// DBから取得した外部リソースを連想配列に変換する関数
// ポインタ位置を次に動かす
// 第一引数：連想配列に変換する外部リソース
// 戻り値：ポインタ位置のレコードを連想配列にして返す。
// 戻り値の連想配列を変数dataに代入
echo $data['item'];
echo $data['price'];
echo '<pre>';
var_dump($data);
echo '</pre>';
// 繰り返し分を使って各項目を表示させる。
while ($data = mysqli_fetch_assoc($resultSet)) {
// mysqli_fetch_assoc関数の結果を変数dataに代入
// 代入された変数dataを繰り返し条件の判定に使用
// 変数dataに連想配列があれば「true」
echo 'ID:';
echo $data['id'];
echo '<br>';
echo '商品名:';
echo $data['item'];
echo '<br>';
echo '価格:';
echo $data['price'];
echo '<br>';
echo '在庫数:';
echo $data['stock'];
echo '<br>';
echo 'キーワード:';
echo $data['keyword'];
echo '<br>';
echo 'メーカー:';
echo $data['maker'];
echo '<br>-------------------<br>';
}
?>
</div>
</body>
</html>
20200925 授業メモ
授業内容
〇DBについて
・CRUD
レビューサイト等の制作時に確認する4項目の頭文字
()内はSQL文
C create (insert 追加)
R read (select 読み出し)
U update (update 更新)
D delete (delete 削除)
〇データをグループ化する
select
表示したいフィールド名をカンマ区切りで入れる
計算関数
FROM テーブル名
GROUP BY フィールド名;
3グループの結合
MariaDB [lesson]> select * from quantity join sales on quantity.sales_id = sales.sales_id
-> join commodity on quantity.item_id = commodity . id;
結果
+----------+---------+-------+----------+-------------+------------+----+----------------------+
| sales_id | item_id | count | sales_id | customer_id | date | id | newitem | price | maker |
+----------+---------+-------+----------+-------------+------------+----+----------------------+
| 1001 | 1 | 10 | 1001 | 1 | 2020-03-09 | 1 | おいしい水 | 190 | 3 |
| 1001 | 6 | 1 | 1001 | 1 | 2020-03-09 | 6 | 米 | 2000 | 2 |
| 1002 | 5 | 3 | 1002 | 2 | 2020-04-10 | 5 | チョコパン | 240 | 1 |
| 1003 | 1 | 2 | 1003 | 3 | 2020-04-10 | 1 | おいしい水 | 190 | 3 |
| 1003 | 2 | 5 | 1003 | 3 | 2020-04-10 | 2 | ポテトチップバターし | 120 | 4 |
| 1003 | 3 | 1 | 1003 | 3 | 2020-04-10 | 3 | カフェ'チョコ | 150 | 4 |
| 1004 | 1 | 3 | 1004 | 5 | 2020-06-11 | 1 | おいしい水 | 190 | 3 |
| 1005 | 5 | 1 | 1005 | 1 | 2020-06-11 | 5 | チョコパン | 240 | 1 |
| 1006 | 2 | 3 | 1006 | 6 | 2020-06-14 | 2 | ポテトチップバターし | 120 | 4 |
+----------+---------+-------+----------+-------------+------------+----+----------------------+
MariaDB [lesson]> select newitem ,sum(count) from quantity join sales on quantity.sales_id = sales.sales_id
-> join commodity on quantity.item_id = commodity . id group by newitem;
結果
+----------------------+------------+
| newitem | sum(count) |
+----------------------+------------+
| おいしい水 | 15 |
| カフェ'チョコ | 1 |
| チョコパン | 4 |
| ポテトチップバターし | 8 |
| 米 | 1 |
+----------------------+------------+
5 rows in set (0.002 sec)
MariaDB [lesson]>
〇HAVING 条件文
HAVINGは、GROUP BYを行った後に条件を設定したときに使う
GROUP BYを行った後ににWHERE 条件分と記述するとエラーになる。
20200924 授業メモ
〇授業内容
〇DB
前準備
# mysql -u root -p
パスワード入力
USE DB名（今回はlesson）
ファイル読み込み方法
￥.半角スペース（ファイルをドロップ）
SELECT * FROM ファイル名
・複数の条件を全て満たす検索
SELECT フィールド名 FROM テーブル名
WHERE 条件1 AND 条件2;
・複数条件をどれか満たす検索
SELECT フィールド名 FROM テーブル名
WHERE 条件1 OR 条件2;
・部分検索
SELECT フィールド名 FROM テーブル名
WHERE フィールド名 LIKE 部分一致検索;
・検索件数の制限 LIMIT
SELECT フィールド名 FROM テーブル名 LIMIT 検索件数;
・開始行と検索件数の指定
SELECT フィールド名 FROM テーブル名 LIMIT 開始位置,検索件数;
・並べ替え ORDER BY
SELECT フィールド名 FROM テーブル名
ORDER BY フィールド名;
※降順にする場合は
SELECT フィールド名 FROM テーブル名
ORDER BY フィールド名 DESK;
・合計値の出力
SELECT SUM（合計値を出力するフィールド名）
FROM テーブル名
・平均値の出力
SELECT AVG（合計値を出力するフィールド名）
FROM テーブル名
・フィールド名に別名をつける
SELECT フィールド名 AS 別名 FROM テーブル名;
phpでデータを送られた際にわかりやすく表示させるための記述
・フィールドの追加
ALTER TABLE テーブル名 ADD フィールド名 型 DEFAULT 値;
・フィールドのデータ型の変更
ALTER TABLE テーブル名 MODIFY フィールド名 新しい型;
・フィールド名とデータ型の変更
ALTER TABLE テーブル名 CHANGE 旧フィールド名 新フィールド名 新データ型;
.テーブル名の変更
ALTER TABLE テーブル名 RENAME AS 新テーブル名;
・テーブルの結合
SELECT フィールド名 FROM テーブル名1 JOIN テーブル名2 ON テーブル名1
照合用フィールド名＝テーブル2照合用フィールド名;
・新規ユーザの追加
GRANT 権限1、権限2・・・
ON データベース領域名.テーブル名
TO ユーザ名@ホスト名 IDENTIFIED BY パスワード;
20200917 【要復習】 CSS positionについて・定義リストとは
○positionについて
「position」は、CSSで使うプロパティの一つです。特に要素の「配置」を決めるのが「position」の役割です。基本的な使い方として、以下のように書きます。
|
1
2
3
|
.要素セレクタ{ position: static/relative/absolute/fixed/stickyをここに配置する。;} |
ここで、英語のカタカナ表記に苦手意識を持つ人もいるかもしれませんね。そこで、簡単におさらいしておきましょう。プロパティとは、以下のCSSの要素を指します。
「配置」を決めるプロパティ
ところで「配置」を決めるプロパティは、「position」だけではありません。今回は「position」を説明しますが、「position」以外にも「floatプロパティ」や「displayプロパティ」があることを知っておいてください。デザインの目的に沿って使い分ける必要があります。
| メリット | デメリット | |
| positionプロパティ | 配置の細かな指定に向いている。要素を重ねたりする場合には特に向いている。 | 画面サイズの変更による調整が難しい。設計に失敗すると画面の大きさの違いにより要素同士が重なることもある。 |
| floatプロパティ | 横並びなど単純なレイアウト作成、小さな変更などに向いている。要素の重なりなどの心配はない。 | レイアウトやページの構成に影響する複雑な配置には向かない。 |
| displayプロパティ | 横並び、縦並びなど単純なレイアウト作成、小さな変更などに向いている。floatに比べて、様々な値のオプションが用意されており、使用の幅がある。 | 複雑な配置には向かない。 |
「position」で取れる値の種類
「position」を理解する上で、以下の区別は重要です。まず、「position」は、何もしなければ、「static」という値をとりますが、これは、位置の指定ができない値です。「position」という割に、何もできない値もあることは覚えておいてください。つまり、実務上は、特別な理由がない限り、「static」以外の値を取ります。
| 位置指定の有無 | 区別 | 値 |
| 位置指定無効 | – | static |
| 位置指定有効 | 相対配置 | relative |
| 絶対配置 | absolute | |
| fixed | ||
| sticky |
値の特徴
「position」の理解をややこしくするのは、値が多様であり、その値ごとに特徴を正確に把握していないと、思い通りの挙動にならない点です。そこで、「relative」と「absolute」はよく使うプロパティですので、全部は無理という方は、最低限、ここだけ読んでおいてください。この場合、positionでは、「配置の種類（相対か絶対か）」と「どの程度距離をとるか」の2つを考えます。まず、以下は「配置の種類」です。
| 値 | 特徴 | 説明 |
| static | 位置指定ができない。 | top,right,bottom,left,z-indexgが使えない。位置を変えたいときはrelativeやabsoluteにしなければならない。 |
| relative | 現在の位置を起点に要素の位置が動く。 | relativeの指定だけではなく、同時に、この時、top、right bottom、leftという値も指定する。つまり、値の組み合わせで配置を行うことに注意する。 |
| absolute | 最も近い「relative」(親や先祖の要素)を起点に要素の位置が動く。 | absoluteだけでは具体的な位置が指定できないため、「relatvie」同様にtop、bottom、left、rightプロパティを指定する。relativeを指定していなければ起点はページ全体となる。 |
| fixed | 基準位置は常にブラウザウィンドウ領域（一旦はbody要素と考える） | どこかの要素が基準にはならない。relativeと同様に、top、bottom、left、rightプロパティが使われる。navbarやmenuバーなど常に画面に固定したいものがある場合に使う。 |
| sticky | スクロールに応じて要素を固定する。 | 指定した値を超えるまではrelative、その後はfixedの特徴となる。位置や重なり順の指定も可能。 |
positionプロパティと一緒に使う位置指定のプロパティ「top」「right」「bottom」「left」
次に、「どの程度距離をとるか」ですが、左右上下で距離の設定ができます。
| top | 基準となる位置の上からの距離を指定する。 |
| right | 基準となる位置の右からの距離を指定する。 |
| bottom | 基準となる位置の下からの距離を指定する。 |
| left | 基準となる位置の左からの距離を指定する。 |
以下が起点から指定する値のイメージです。
○定義リストとは
<dl>タグの使い方
<dl>タグを使ってQ&Aページをつくってみましょう。
<dl>
<dt>質問1</dt>
<dd>答え1</dd>
<dt>質問2</dt>
<dd>答え2</dd>
<dt>質問3</dt>
<dd>答え3</dd>
</dl>
<dd>タグでかこまれた答えの部分がインデント（字下げ）され、質問に対する答えのリストができました。
他に、<dl>タグを使って用語集をつくることもできます。
例えばこのように書きます。
<dl>
<dt>HTML</dt>
<dd>Webブラウザに文字を表示させるための言語</dd>
<dd>文書の構造を示すために書かれる</dd>
<dt>CSS</dt>
<dd>文書の見た目を決めるために書かれるもの</dd>
<dd>デザインを決める役割をもつ</dd>
</dl>
すると、<dd>タグで囲まれた部分がインデント（字下げ）されました。
ブラウザ上の見た目は「項目名に、字下げされた内容が表示されたもの」ですが、コンピューター上では<dl>タグでかこまれた部分がまとまりを持った一つのコンテンツとして意味を持つものになります。
見た目が変わらないからといって<p>タグや<br>タグを使ってリストをつくるよりも、タグを正しく使い分けたほうが、ページがすっきりして管理がしやすくなる上に、Web上でもきちんと整理された質の高いページだと認識されます。
項目(dt)と内容(dd)がセットになっているリスト(dl)として覚えておきましょう。
20200923 授業メモ DBとは
授業内容
ーー
ーー
〇DBとは
・データベース領域一覧を表示する記述
cmpにおいて→SHOW DATABESES;
・CREATE DATABASE データベース領域名：
Ex)CREATE DATABASE lesson;
・データベース領域の選択
USE データベース領域;
Ex)USE lesson;
・現在利用しているデータベース領域を確認
SELECT database();
・テーブルの作成
CREATE TABLE テーブル名(
フィールド名1 フィールドの型1 属性1,
フィールド名2 フィールドの型2 属性2,
フィールド名X フィールドの型X 属性X
<!-- 最後の行カンマ「,」が あるとエラーになる-->
)
☆フィールドの型の一覧
TINYINT:8ビット整数
SMALLINT:16ビット整数
INT:32ビット整数
BIGINT:64ビット整数
FLOAT:単精度の浮動小数点
DOUBLE:倍精度の浮動小数点
CHAR:固定長文字（最大255バイト）
VARCHAR:可変長文字列（64キロバイト）
TEXT:可変長文字列（64キロバイト）
DATE:日付
DATETIME:日付と時間
BLOB:バイナリデータ
☆フィールドの属性の一覧
PRIMARY KEY:主キー：ユニーク値でありNULL値を許さない
AUTO_INCREMENT:自動連番をふる
UNIQUE:別レコードに同じ値を持つことはできない
NOT NULL:必須項目（省略不可）NULL値を許さない
DEFAULT:値が入らなかった場合のデフォルト値を指定する
ON UPDATE:自レコードを更新したときに指定した値を入力する。
・フィールドの構成を調べる
SHOW COLUMNS FROM テーブル名;
・フィールドの構成を調べる(簡易的に)
DESC テーブル名;
・レコードを追加する
書式１
INSERT INTO テーブル名;
(フィールド名1,フィールド名2,...)VALUES(値1,値2...);
書式2
INSERT INTO テーブル名 SET
フィールド名1＝値1
・データを取得する
SELECT フィールド名1,フィールド名2,・・・FROM テーブル名[WHERE 条件];
.データを変更する
UPDATE テーブル名 SET フィールド名1＝値1, フィールド名2＝値2
・・WHERE 条件文;
注意：WHEREを忘れると全部のデータが更新されてしまう
・データ削除
DELETE FROM テーブル名 WHERE 条件文;
