Webクリエイターネタ -12ページ目

Webクリエイターネタ

いつのまにか、役に立つ情報を発信していこう!に変更したブログ

▼priceフィールドの180円未満を検索
SELECT * FROM my_items WHERE price=180;

▼LIKE検索(keywordフィールドの前後をあいまいにした検索)
SELECT * FROM my_items WHERE keyword LIKE '%甘い%';

・LIKE検索(keywordフィールドの後ろのみをあいまいにした検索:前方一致)
SELECT * FROM my_items WHERE keyword LIKE '赤い%';

▼AND,OR 複数の検索
・複数の条件を満たすデータの検索
SELECT * FROM my_items WHERE price>=50 AND price<150;

・複数の条件のどれかを満たすデータの検索(idフィールド)
SELECT * FROM my_items WHERE id=1 OR id=3;

▼複雑な条件での検索
IDが1または3で、150円未満でかつキーワードに
「甘い」が含まれる商品を検索
SELECT * FROM my_items WHERE (id=1 OR id=3) AND price<150 AND keyword LIKE '%甘い%';

▼OR条件の注意
ORとANDを組み合わせる時は「()」で囲む
以前書いたCSSスプライトですが、
もっと手短に、お手軽にしてみます。

Webクリエイターネタ

・マウスがのっていない時、画像上半分を表示

・マウスがのっている時、画像下半分を表示


▼▼▼テクニックの予備知識

・a要素はインライン要素なのでdisplay:blockでブロック要素にする
ブロック要素とは、見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素

単純に、ブロック要素にすることで画像上半分をリンクとして扱い、width、height指定で
画像上半分を表に表示させているだけです。

マウスがのった時、background-positionで、画像を上に移動させる。



▼▼実際のソース

■メッセージボード側


http://ameblo.jp/musix-designWebクリエイターネタ


■CSS

.bannerAreaSub{
margin:0 0 10px 0;
}

.bannerAreaSub ul{
padding:0px;
margin:0px;
}
.bannerAreaSub ul li{
list-style:none;
padding:0px;
margin:0px;
}

.bannerAreaSub ul li a{
background:url(http://stat.ameba.jp/user_images/20120427/15/musix-design/88/7b/p/o0330024011938916135.png) no-repeat;
width:330px;
height:120px;
display:block;
text-indent:-9999px;
}

.bannerAreaSub ul li a:hover{
background-position:0 -120px;
}

▼DEMO
http://ameblo.jp/musix-design
▼デーブルを参照する
SELECT * FROM テーブル名;

▼テーブルにデータを挿入する
INSERT INTO テーブル名 SET ID=100, name='商品100';

▼テーブルをつくる
CREATE TABLE テーブル名 (id INT, item_name TEXT, price INT);
└(フィールド 型,カンマで区切る)

▼データを挿入するSQL
└INSET文
INSERT INTO テーブル名 SET id=1, item_name='アイテム名' proce=200;

▼データを変更する
└UPDATE上記priceの値を変更する
UPDATE テーブル名 SET price=180 WHERE id=1;

▼データの削除
└DELETE
DELETE FROM my_items WHERE id=1;

▼データの検索
└idが1のデータを検索する
SELECT id, item_name FROM my_items WHERE id=1;

▼データのすべてを検索
└*アスタリスク
SELECT * FROM my_items WHERE id=1;