横や縦に長いデータなどに利用。
普通は縦の処理が多いか。
overflow-y を使う。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HEAD>
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
<title>縦横のスクロール設定</title>
<style type="text/css">
.yoko {
width: 500px;
height: 120px;
overflow-x: auto;
white-space: nowrap;
background-color: #ffffff;
border: 1px #c0c0c0 solid;
}
.tate {
width: 500px;
height: 120px;
overflow-y: auto;
background-color: #DCDCDC;
border: 1px #c0c0c0 solid;
}
</style>
</head>
<body>
横のスクロール
<div class="yoko">
横方向のスクロール横方向のスクロール横方向のスクロール横方向のスクロール
</div>
<br><br>
縦のスクロール
<div class="tate">
<p>縦方向のスクロール</p>
<p>縦方向のスクロール</p>
<p>縦方向のスクロール</p>
<p>縦方向のスクロール</p>
<p>縦方向のスクロール</p>
<p>縦方向のスクロール</p>
</div>
</body>
</html>
参考ページ
http://www.tagindex.com/stylesheet/box/overflow2.html
2013年9月17日火曜日
2013年9月12日木曜日
MySQL クロス集計
知っていれば便利。
つい忘れがち
年度ごとの男女データ件数を出力。
●クロス集計
SELECT year,
SUM(CASE
WHEN sex = '男' then 1
ELSE '0'
END
) as 男,
SUM(CASE
WHEN category = '女' then 1
ELSE '0'
END
) as 女
FROM `table`
GROUP BY year DESC
つい忘れがち
年度ごとの男女データ件数を出力。
●クロス集計
SELECT year,
SUM(CASE
WHEN sex = '男' then 1
ELSE '0'
END
) as 男,
SUM(CASE
WHEN category = '女' then 1
ELSE '0'
END
) as 女
FROM `table`
GROUP BY year DESC
2013年9月11日水曜日
jQueryで、ボタンの有効化
初期設定でクリック出来ないボタンをjQueryで有効化。
#id=setb を有効化
$('#setb').attr('disabled', false); //ボタンの有効化 */
無効にする場合は、
$('#setb').attr('disabled', true); //ボタンの無効化 */
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HEAD>
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
<title>ボタンの有効化</title>
<script type="text/javascript" src="../jquery/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$(":checkbox").click(function() {
$('#setb').attr('disabled', false); //ボタンの有効化 */
});
});
</script>
</HEAD>
<body bgcolor='#ffffff' topmargin="2" leftmargin="5" rightmargin="5">
<br>
<h1>ボタンの有効化</h1>
初期設定でクリックボタンは無効。<br>
チェックすると、有効化。
<br><br>
<input type="checkbox">チェック<br><br><br>
<input type="submit" name="click" value=" クリック " id="setb" disabled>
</body></html>
#id=setb を有効化
$('#setb').attr('disabled', false); //ボタンの有効化 */
無効にする場合は、
$('#setb').attr('disabled', true); //ボタンの無効化 */
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HEAD>
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
<title>ボタンの有効化</title>
<script type="text/javascript" src="../jquery/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$(":checkbox").click(function() {
$('#setb').attr('disabled', false); //ボタンの有効化 */
});
});
</script>
</HEAD>
<body bgcolor='#ffffff' topmargin="2" leftmargin="5" rightmargin="5">
<br>
<h1>ボタンの有効化</h1>
初期設定でクリックボタンは無効。<br>
チェックすると、有効化。
<br><br>
<input type="checkbox">チェック<br><br><br>
<input type="submit" name="click" value=" クリック " id="setb" disabled>
</body></html>
2013年9月6日金曜日
CSS Divを使った基本レイアウト
ウェブレイアウトの基本。
上、左、右、下 をボックス表示。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HEAD>
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
<title>DIV基本レイアウト</title>
<STYLE TYPE="text/css">
#contents {
width : 850px;
border: 2px dotted #FF9900;
margin: 0; #auto → 中央表示。
}
#box-u {
background-color: lightblue;
}
#box-l {
float: left;
width: 600px;
background-color: lightgreen;
}
#box-r {
float: right;
width: 250px;
background-color: orange;
}
#box-b {
clear: both;
width: 850px;
background-color: #FFFF99;
}
</STYLE>
</HEAD>
<body>
<div id="contents">
<h1>DIV基本レイアウト</h1>
<div id="box-u">上ボックス</div>
<div id="box-l">左ボックス</div>
<div id="box-r">右ボックス</div>
<div id="box-b">下ボックス</div>
</div>
</body>
</html>
上、左、右、下 をボックス表示。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HEAD>
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
<title>DIV基本レイアウト</title>
<STYLE TYPE="text/css">
#contents {
width : 850px;
border: 2px dotted #FF9900;
margin: 0; #auto → 中央表示。
}
#box-u {
background-color: lightblue;
}
#box-l {
float: left;
width: 600px;
background-color: lightgreen;
}
#box-r {
float: right;
width: 250px;
background-color: orange;
}
#box-b {
clear: both;
width: 850px;
background-color: #FFFF99;
}
</STYLE>
</HEAD>
<body>
<div id="contents">
<h1>DIV基本レイアウト</h1>
<div id="box-u">上ボックス</div>
<div id="box-l">左ボックス</div>
<div id="box-r">右ボックス</div>
<div id="box-b">下ボックス</div>
</div>
</body>
</html>
2013年9月5日木曜日
htmlタグ altとtitle
htmlタグ、あまり使わないがうまく使いたいタグ。
alt：画像の代わり
http://www.tagindex.com/html_tag/img/img_alt.html
title：補足情報
http://www.tagindex.com/html_tag/attribute/title.html
ちょっと前のブラウザではaltもツールチップのように表示されたが最近は非表示となっ
ている。
ツールチップのように使いたいならtitleを使うべし。
titleはほとんどの要素で使えるらしい。
a hrefリンク
テキストフィールド
ボタン
などもOK。
alt：画像の代わり
http://www.tagindex.com/html_tag/img/img_alt.html
title：補足情報
http://www.tagindex.com/html_tag/attribute/title.html
ちょっと前のブラウザではaltもツールチップのように表示されたが最近は非表示となっ
ている。
ツールチップのように使いたいならtitleを使うべし。
titleはほとんどの要素で使えるらしい。
a hrefリンク
テキストフィールド
ボタン
などもOK。
2013年9月4日水曜日
CSS テーブル、線を消すには？
CSSでテーブルの縦線、横線を消す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HEAD>
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
<title>CSSテーブルの枠線を消す</title>
<STYLE TYPE="text/css">
/*縦の線を消す*/
.TABLE1 {
border-collapse: collapse;
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 2px; /* 枠の幅 */
}
.TABLE1 TH {
color: #ffffff; /* 文字の色 */
background-color: #99cc99; /* 背景の色 */
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 2px 0px; /* 枠の幅 */
}
.TABLE1 TD {
color: #000; /* 文字の色 */
background-color: #EEE; /* 背景の色 */
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 2px 0px; /* 枠の幅 */
}
/*横の線を消す*/
.TABLE2 {
border-collapse: collapse;
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 2px; /* 枠の幅 */
}
.TABLE2 TH {
color: #ffffff; /* 文字の色 */
background-color: #99cc99; /* 背景の色 */
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 0px 2px; /* 枠の幅 */
}
.TABLE2 TD {
color: #000; /* 文字の色 */
background-color: #EEE; /* 背景の色 */
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 0px 2px; /* 枠の幅 */
}
</STYLE>
</HEAD>
<body bgcolor='#ffffff' topmargin="2" leftmargin="5" rightmargin="5">
<br>
<h1>CSSテーブル 縦横の線を消す</h1>
▼テーブル１ 縦の線を消す
<table width="500" border="1" cellspacing="0" cellpadding="5" class="TABLE1">
<tr><th width=420>フルーツ</th><th>個数</th></tr>
<tr><td>バナナ</td><td>2</td></tr>
<tr><td>梨</td><td>4</td></tr>
<tr><td>いちご</td><td>2</td></tr>
</table>
<br><br>
▼テーブル２ 横の線を消す
<table width="500" border="1" cellspacing="0" cellpadding="5" class="TABLE2">
<tr><th width=420>フルーツ</th><th>個数</th></tr>
<tr><td>バナナ</td><td>2</td></tr>
<tr><td>梨</td><td>4</td></tr>
<tr><td>いちご</td><td>2</td></tr>
</table>
</body></html>
参考ページ
http://css.eweb-design.com/1502_ty.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HEAD>
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
<title>CSSテーブルの枠線を消す</title>
<STYLE TYPE="text/css">
/*縦の線を消す*/
.TABLE1 {
border-collapse: collapse;
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 2px; /* 枠の幅 */
}
.TABLE1 TH {
color: #ffffff; /* 文字の色 */
background-color: #99cc99; /* 背景の色 */
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 2px 0px; /* 枠の幅 */
}
.TABLE1 TD {
color: #000; /* 文字の色 */
background-color: #EEE; /* 背景の色 */
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 2px 0px; /* 枠の幅 */
}
/*横の線を消す*/
.TABLE2 {
border-collapse: collapse;
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 2px; /* 枠の幅 */
}
.TABLE2 TH {
color: #ffffff; /* 文字の色 */
background-color: #99cc99; /* 背景の色 */
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 0px 2px; /* 枠の幅 */
}
.TABLE2 TD {
color: #000; /* 文字の色 */
background-color: #EEE; /* 背景の色 */
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 0px 2px; /* 枠の幅 */
}
</STYLE>
</HEAD>
<body bgcolor='#ffffff' topmargin="2" leftmargin="5" rightmargin="5">
<br>
<h1>CSSテーブル 縦横の線を消す</h1>
▼テーブル１ 縦の線を消す
<table width="500" border="1" cellspacing="0" cellpadding="5" class="TABLE1">
<tr><th width=420>フルーツ</th><th>個数</th></tr>
<tr><td>バナナ</td><td>2</td></tr>
<tr><td>梨</td><td>4</td></tr>
<tr><td>いちご</td><td>2</td></tr>
</table>
<br><br>
▼テーブル２ 横の線を消す
<table width="500" border="1" cellspacing="0" cellpadding="5" class="TABLE2">
<tr><th width=420>フルーツ</th><th>個数</th></tr>
<tr><td>バナナ</td><td>2</td></tr>
<tr><td>梨</td><td>4</td></tr>
<tr><td>いちご</td><td>2</td></tr>
</table>
</body></html>
参考ページ
http://css.eweb-design.com/1502_ty.html
登録:
投稿 (Atom)