■ CSS入門
・Html CSSの使用を調べるときは
www.w3c.org/
* {color:skyblue;}
h1 { color: skyblue:}
h1, p { }
a b …aより下にある
a > b … aの直下のb
a + b … aの次のbに適用
a.class名
a[title]{}…タイトル属性があるものに適用
a[href="http://google.com"]{}
a[class ~="これを含むクラス名に適用"]{}
ul li:first-child {}
・擬似クラスの順番はこの順位しなければ動かな
い。
a:link {}
a:visited{}
a:hover{}
a:active{}
input:focus {}
07擬似要素
p:first-line {}
p:first-letter{}
p:before {
content: /*コンテントプロパティが必須*/
}
p:after {}
08セレクタの詳細度 (適用される優先順位)
(a) style=""
(b) id
(c)属性/擬似クラス
(d)要素/擬似要素
同じ詳細度だと後に書いたものが優先される。
a{color:skublue !important;} …詳細度にかか
わらず最優先される。
09プロパティ値
font-size: 2em;…親要素のピクセルに対して何倍
か
font-size:150%;…親要素のピクセルに対して何
倍か
color:blue;
color:#00f;
color:#0000ff;
color:rgb(0,0,255);
color:rgb(0%,0%,100%);
10ボックスモデル
・height width padding border margin
div{
background:silver;
width:50%;
height:50%;…高さに関しては親要素の高さ
を明示的に示さないとうまくいかない。(親要素
にheight:○の記述があること。)
}
11borderプロパティ
border-color:
border-width:
border-style:solid / dotted / dashed / double /
inset / outset
div{
border-color:orange;
border-width:10px;
border-style:dotted;
}
border: orange 4px dotted;でもいい。
border-top:
12padding
body { margin:0}
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding:10px 50px; 上下 左右
●borderはstyleを明示しないと出てこない。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="default.css">
<title>タイトル </title>
</head>
<body>
</body>
</html>
プロパティ名 値 説明
13marginの相殺
margin:10px 20px 30px;
marginの
14文字に関するプロパティ
color:
font-size:14px;
font-weight:bold/nomal;
text-align:right/center/left;
text-decoration:underline/line-through/none;
15リストのスタイル
ul{
list-style:inside decimal;
list-style-type:disc/circle/square/decimal/loer-
alpha;
list-style-image:
list-style-position:inside/outside;
list-style:url('smile.png');
}
16カーソルの計上
17背景のスタイリング
background-color:slver;
background-image:url('bg.png');
background-repeat:no-repeat/repeat-
x/repeat-y;
background-position:10px 10px/top center;
background-attachment:scrol/fixed;
background:値は順不同;
18diplayプロパティ
display:block/inline/list-item/inline-block;
inline要素を指定するとwidthが無視される。
inline-blockにすると大丈夫。
diplay:none;で非表示になる。
19 diplay:table
.container{
display:table;
width:300px;
}
.box{
display:table-cell;
width:100px
}
.row{
display:table-row;
}
<div class="container">
<div class="row">
<div class=“box XXX"></div>
<div class=“box YYY"></div>
</div>
<div>
<div class=“box ZZZ"></div>
<div class=“box WWW"></div>
</div>
</div>
20position
基本はstatic。relativeはstaticからどのくらいずれ
るかを指定する。
#box1{
position:relative;
top:10px;
left: 10px;
}
position
static 通常の位置に配置 (初期値)
relative 通常の位置を基準とした相対的な配置
absolute ウィンドウまたは親ボックスを基準と
した絶対的な配置
fixed ウィンドウを基準とした絶対的な配置
+ 位置の固定
(例)position:relative;
21 z-index, overflow
後ろに書いたものほど上にになる。
z-index:3;
z-indexが大きいほど上に来る。
position:static以外の要素に有効
overflow:visible/hidden/scroll.
22 line-height vertical-align
line-height:行ボックスの高さ
font-size:文字の高さ
vertical-aling:画像の高さを合わせる
baseline/top/bottom/middle/?px/?em
23 float, clear
float:right;…画像を横にフローとさせたいとき。
行ボックスはフロートを避けて配置する。
floatを指定したときはwidthを付けることを忘れな
い。
■CSS3入門 (全19回)
01 CSS3とは
caniuse.com
CtrlKで画面を分割して見れる。(atomの場合)
02 rem
px, em, &, rem
html{
font-size:32px;
}
h1{
font-size:2em;→親要素の2倍 64px
}
rem…htmlを基準にして何倍か。
caniuse.com remがどのブラウザで使えるか、と
か。
remはほとんどのブラウザで使うことができる。
03 rgba() hsla()
alpha(0-1) 1…不透明
Hue 0-360
Saturation 0-100% 彩度
Lightness 0-100% 明るさ
Alpha 0-1
04 opacity
要素全体を透明にしたい場合。
(例)img{opacity:0.3;}
05 属性セレクタ
a[href^="foo"] fooから始まる。
a[href$="foo"] fooで終わる。
a[href*="foo"] fooを含む
a[]{ }
06 nth child
li:last-child{}
li:nth-child(3){ }//3番目の要素のスタイリング
li:nth-child(ever/odd){}も使用可
li:nth-child(3n+1){}//4,7,…
li:nth-last-child(4){}//最後から4番目
li:only-child{}//子要素が一つしかないリストに適
用
07 nth-of-type
p:first-of-type{}
p:last-of-type{}
p:nth-of-type{}
p:nth-last-of-type(k){}//最後から数えて何番目
か。
h2:only-of-type{}//一つしかないときに適用。
08 その他の擬似クラス
li:not(.クラス名){}//クラス名以外の要素を指定
li:empty{}//中身がブランクの要素を指定
input[type="text":disabled/enabled
input[type="checkbox"]:checked + label {}//
チェックがつけられたラベルを指定
09 border-raduis
border-raduis:30px;//30pxの半径の円で角丸に
する。
border-radius:30px/15px;//楕円
border-bottom-right-radius:30px://個別に角丸
にする場合
border-radius:10px 20px 30px;//個別に設定す
る場合
border-radius:50%;//正円
background:url('xxx.jpg');とすれば画像を丸く切
り出すことができる。
10 background-size
backgroun-size:50%;//一つ指定すれば横幅。縦
幅は縦横比を保持するように計算される。
2つ指定すると画像の縦横比が変わる。
background-size:cover;//縦横比を保持しつつ、
領域を埋める。
background-size:contain;//画像全体を表示し、
縦横があまる。
background-position:50% 50%;画像を調整する
支点を調整する。
11 複数の背景画像
background:url('xxx.gif') no-repeat 0
0,url('yyy.gif') no-repeat 30px
30px,url('zzz.gif') no-repeat bottom right;
後ろに書いたものほど後ろに重なっていく。
12 linear-gradient()
background-image:linear-
gradient(skyblue,blue);
background-image:linear-gradient(to
top/45,degskyblue,blue);
background-image:linear-gradient(lightgreen
10%,skyblue 70%,blue);
repeating-background-image:linear-
gradient(lightgreen ,skyblue 20%;
13 radial-gradient()
radial-gradient(skyblue,blue);//円形のグラデー
ション
radial-gradient(at 30px 40px,skyblue,blue);//
始点を背ってする。
//グラデーションサイズを指定、繰り返しも可。
gradientと同じ感じ。
14 box-shadow、text-shadow
box-shadow:10px 20px rbga(0,0,0,0.4);//影の
色と位置
box-shadow:10px 20px 4px rbga(0,0,0,0.4);//
色をぼかす
box-shadow:10px 20px 4px 10px
rbga(0,0,0,0.4);//影のサイズ指定
box-shadow:10px 20px 4px 10px
rbga(0,0,0,0.4);//影のサイズ指定
tex-shadow:2px 2px 0 rgba()://テキストに影を
付ける。4つ目のpxはつけられない。
15 transformで要素を変形させてみよう
#box2{
background:orage;
opacity:.5;
transform:translate(20px,40px);//20px 40px
ずらす
transform:scale(0.5,1.5);//x0.5,x1.5
transform:skew(10dg,20dg);
transform:rotate(30dg);
transform-origin:0 0;//起点を変えたい場合
16 ベンダープレフィックスを使おう
-webkit-chrome
-ms-IE
-moz-Firefox
-webkit-transform:scale(…)//などとして表示
できないブラウザに対応。
17 transitionを使ってみよう
transition-property:all;
transition-duration:2s;//2秒
transition-timing-function:ease/linear/ease-
in/ease-out/ease-in-out;//
transition-delay:
一括で指定
transition:all 2s ease 0.8s;
18 animationを使ってみよう
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
@-webkit-keyframes slidein{
0% {
margin-left:100%;
background:white;
}
70%{
margin-left:50%;
background:blue;
}
100%{
margin-left:0%
background:skyblue;
{
}
19 box-sizingを使ってみよう
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
.box{
box-sizing:border-box;//パディングやボーダー
が変わっても、幅と高さを一定に保つ。
width:100px;
height:100px;
background:#eee;
float:left;
padding:10px;
boder-bottom:10px solid #ccc;
}
■CSS レイアウト入門 (全 15 回)
01 CSSでレイアウトを組み上げよう
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title></title>
</head>
<body>
<h1>HELLO</h1>
<p>wolrd</p>
</body>
</html>
02 reset.css、normalize.cssを使おう
- reset.css //ほぼすべてのスタイルをリセット
- normalize.css // user agenet styleの残すと
ころは残す。
←ググってソースを張り付けて保存。
<link rel="stylesheet" href="reset.css">//自分
で作ったスタイルシートより先に書いておく。
03 Developer Toolsを使ってみよう
Ctrl Shift iでdeveloper toolを起動できる。
要素にカーソルを当て右クリックで詳細が見れ
る。
04 ワンカラムレイアウトを作ろう
05 アイキャッチ画像を配置してみよう
06カラムレイアウトを作ってみよう
<header>
<div class="container">
</div>
</header>
<div id="eyecatch">
</div>
<main>
<div class="container">
<div id="left">Left</div>
<div id="right">Left</div>
<div style="clear:both;"></div>//フロートの
解除をしておく、
</div>
</main>
<footer>
<div class="container">
</div>
</footer>
body{ background-color:footerの色;}
#left{
float:left;
width:200px;
}
#eyecatch{
background:url('eyecatch.jpg') no-repat;
background-size:cover;
background-position:50% 20%;
height:100px;
}
#right{
float:left;
width:300px;
}
footer{
clear:both;
}
07 clearfixを使ってみよう
①clearfix
<div class="container clearfix">
<div id="left">Left</div>
<div id="right">Left</div>
</div>
.clearfix::after{
content:'';//after擬似要素にはコンテントプロパ
ティが必須
display:block;
clear:both;
}
②簡易的な方法
<div class="container clear">
<div id="left">Left</div>
<div id="right">Left</div>
</div>
.clear{
overflow:hidden;
}
08 カラムに余白をつけてみよう
#lefft,#right{
padding:10px;
box-sizing:border-box;
}
09 3カラムレイアウトを作ってみよう
10 可変幅のカラムを作ってみよう
#left{width:20%;}
#center{width:60%;}
#right{width:20%;}
フロートする要素はそうでない要素より先に書か
なければならない。
①3カラムの場合
#left{
width:100px;
float:left;
}
#right{
width:100px;
float:right;
}
#center{margin:0 100px;}
②2カラムの場合
#left{
float:left;
width:100px;
}
#right{
margin-left:100px;
}
11 リストでメニューを作ってみよう
12 メニューを完成させよう
<ul id="menu">
<li></li>
<li></li>
<li></li>
</ul>
ul#menu{
padding:0;
margin:0;
list-style-type:none;
font-size:0;
}
ul#menu > li {
dsplay:inline-block;
}
ul#menu > li > a {
width:80px;
height:40px;
line-height:40px;
font-size:16px;
text-decoration:none;
text-align:center;
}
ul#menu > li > a:hover{
opacity:0.5;
transition:0.8s;//ゆっくり色が変わる。
}
■実践!ウェブサイトを作ろう (全16回)
03 2カラムのレイアウト (可変幅)
#main{
overflow:hidden;//中のleftとrightの間にfooter
が入ってこない。
}
#left{float:left;}
#right{margin-left:XXXpx;}
04 2カラムのレイアウト (固定幅)
#main{
overflow:hidden;//余った間に入り込んでこない
}
#left{
float:left;
width:200px:
}
#right{float:right;
width:500px;}
#right{float:left;
width:500px;
margin-left:XXXpx;}も可
05 3カラムのレイアウト (可変幅)
06 3カラムのレイアウト (固定幅)
07 文書の構造を作っていこう
08 2カラムレイアウトを作ろう
09 背景を設定しよう
背景の設定//★…container領域がぐっと下まで伸
びる。あら不思議。
html{
background-image:url('xxx.jpg');★
height:100%;★
}
body{
height:100%;★
}
body> #container{
height:auto;★
}
#container{
min-height:100%;★
height:100%;★
width:NNNpx;
margin:0px auto;
background-color:#fff;
box-shadow:0 0 3px rgba(0,0,0,0.5);
}
10 ヘッダーとフッターを作ろう
11 メニューを作ってみよう
12 見出しと本文を作ってみよう
h2,h3{
font-weight:bold;
}
h2{
font-size:16px;
border-left:5px solid #ccc;
padding:3px 0 3px 10px;
margin-bottom:10px;
}
h3{
border-bottom:1px solid #ccc;
padding:3px 0;
margin-bottom:10px;
}
13 画像付きリストを作ってみよう
<ul class="products">
<li>
<img src="dummy.png" width="60"
height="60">
<p>xxx</p>
</li>
ul.products{
margin-bottom:15px:
}
ul.products>li{
overflow:hidden;
argin-bottom:10px;
padding-bottom:10px;
border-bottom:1px dotted #ccc;
}
ul.products>li:last-child{
border:none;
}
ul.products>li>img{
float:left;
width:60px;
}
ul.products>li>p{
margin-left:70px;
font-size:13px;
}
14 キャプション付き画像を作ろう
div.sample{
float:right;
width:60px;
margin-left:10px;
position:relative; ※⑮
}
div.sample>P{
font-size:10px;
}
div.sample>img{
padding:2px;
background:#fff;
border:1px solic #ccc;
}
15 バッジを付けてみよう
<span class="badge">new!</span>
.badge{
background:red;
color:white;
font-size:10px;
padding:2px 4px 3px;
position:absolute;
top:-5px;
right:-5px;
}
親要素…position:relative;
子要素…position:absolute;
16 アイコン付きリストを作ろう
<ul class="submenu">
<li><a href="">menu 1</a></li>
<li><a href="">menu 2</a></li>
<li><a href="">menu 3</a></li>
■menu1
■menu2
■menu3
ul.sabumenu > li{
background:ulr('dotinstall.png') no-repeat;
padding:0 0 5px 20px;
}
■レスポンシブなウェブサイトを作ろう (全11回)
<div id="header">
<div id="footerNavLink"><a
href="#footerNavLink">+</a></div>
</div>Header<!--/#header-->
<div id="headerNav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
<div id="container">
<div id="main">
<h2>Main</h2>
<img src="cafe.jpg">
<p>Hello.Hello.Hello.Hello.</p>
</div><!--/#main-->
<div id="sub">
<h2>Hello.Hello.Hello.Hello.</h2>
</div><!--/#sub-->
</div><!--/#container-->
<div id="footer">
<div id="FooterNav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div><!--/#footer-->
04 CSSファイルを作ろう
05 スタイルを振り分けよう
07 スマートフォン向けのスタイル
※css reset と検索し、yahooが提供してるものを
使う。
/*
スマホ:320-480px;
タブレット:480-768px;
PC:それ以上
*/
@charset "utf-8"
/*共通の設定*/
body{
font-family:Arial,Verdana,sans-serif;
width:95%;
margin:0 auto;
}
#header{}
#footer{}
#container{}
#main{}
#sub{}
#footerNavLink{
float:right;
}
#headerNav ul{
list-style:none;
overflow:hidden;
}
#headerNav li{
float:left;
width:33%;
text-aling:center;
}
img{
max-width:100%;//はみ出なくなる。
}
#headerNav{
display:none;
}
//画面サイズの小さい順に読み込んでいく
/*スマホのスタイル*/
/*タブレットのスタイル*/
08 タブレット向けのスタイル
@media all and (min-width:480px){
#footerNavLink{
display:none:
}
#headerNav{
display:block;//表示される
}
#footerNav{
display:none;
}
}
/*PCのスタイル*/
@media all and (min-width:768px){
#container{
cpmtaomer{
overflow:hidden;
}
#main{
float:left;
width:78.0406122345%;
}
#sub{
float:right;
width:20.4081633%;
}
}
}
-iOSシミュレータでスマホ画面は確認できる。
<head>
<meta name="viewport"
content="width=device-width, initial=1.0">
<head>
10 iframeを埋め込もう (1)
11 iframeを埋め込もう (2)
youtubeの埋め込みで幅がきちんとなるようにす
る方法。
ハック的な感じ。
<div style="width:marign:0 auto;">
<div class="movie">
<iframe …
</div></div>
.movie{
position:relative;
height:0;
padding-top:56.25%;
}
ifame{
height:100%;
position:relative;
left:0;
top:0;
width:100%;
}
■JavaScript入門 (全24回)
リファレンスについては mdn javascriptで検索
「https://developer.mozilla.org/ja/docs/Web/J
avaScript」
01 JavaScriptとはなにか?
02 はじめてのJavaScript
<body>
<script src="myscript.js"></script>//外部から
読み込む。
<script>
/*
複数行書きたい場合のコメントアウト
*/
//一行だけコメントアウト
var msg;
msg = "hello world!";
//(var msg = "hello world!";という書き方もでき
る。)
console.log(msg);
</script>
</body>
03 変数を使ってみよう
データ型
-文字列
-数値
-真偽値(true/false)
-オブジェクト
-配列
-関数
-組み込みオブジェクト
-undefined 定義されていない
-null 何もない
04 数値を使ってみよう
演算子 + - * / %
代入を伴う演算子 +=
++ -- 単項演算子// ++x x++ どちらでもOK
var x;
x = 10 * 2;
05 文字列を使ってみよう
var s;
s = "hello";
console.log();
\n 改行
\t タブ
\" 「”」
s = "文字列を" + "くっつける";
06 if文を使ってみよう
var score = 80;
if (score > 60) {
console.log("OK!");
}else if(score > 40){
console.log("SOSO");
}else{
console.log("NG!");
}
比較演算子
> <
>= <=
=== == 「===」は厳密に比較をするので使う
ことがおススメ
!== !=
AND &&
OR ||
NOT !
07 真偽値と三項演算子を使おう
真偽値
文字列:から文字以外だったらture
数値:0からNaN以外だったらtrue
object:null以外だったらtrue
undefined, null -> false
if (x){
}
if(x !== ''){
}
三項演算子
a = (条件) ? b : c;
max = (x > y) ? x : y;
8 switch文を使ってみよう
<body>
<script>
var signal = "red";
switch(signal){
case "red":
console.log("stop!");
break; //終わったら必ずbreakを書く。
case "green":
case "blue": //連続して書いてもいい。
console.log("go!");
berak;
case "yellow":
console.log("slow down!");
break;
default:
console.log("wrong signal");
break;
}
</script>
</body
09 while、do ... whileを使ってみよう
var i = 0;
while ( i < 10){
console.log(i);
i++;
}
do {//条件判定を後に行う場合
...
} while (i < 10);
10 for文を使ってみよう
for ( var i = 0; i < 10; i ++){
console.log(i);
}
break ループ処理を抜ける命令
continue ループ処理を1回スキップ
if( i ===5){
continue;
}
11 alert、confirm、promptを使おう
alert("hello"); //ダイアログボックス
var answer = confirm("are you sure?");//OKと
キャン
//true / false が帰ってくる。
if(confirm("XXますか"){
}
var name = prompt("お名前は?");
var name = prompt("XXX?","初期値");
//キャンセルではnullが帰ってくる。
12 関数を使ってみよう
function 関数名(){
処理
return 返り値;//返り値を設定する場合
}
function hello(){
console.log("hello");
}
hello();
13 ローカル変数を使おう
function hello(name){
var msg = "hello" + name;
return msg; //msgは関数内でしか有効では
ない。
}
var hello = function(name){
};//セミコロンを忘れない。こういう書き方
もできる。
14 即時関数を使ってみよう
(function hello(){
console.log("Hello");
})();//関数を即時で呼び出す場合
(function(){
})();//関数名を省略してもいい。引数もとれる。
(function()){
var x = 10, y = 20;
console.log(x + y);
}();//ローカル変数にすることができるため安全。
15 setInterval、setTimeout
setInterval
setTimeout
var i = 0;
function show(){
console.log(i++);
}
setInterval(function(){
show();
},1000);//1秒ごとに関数を実行
setInterval…前の処理にかかわらず等間隔で実行
setTimeout…前の処理が関係
・setTimeoutで等間隔を実現する。
function show(){
console.log(i++);
setTimeout(function(){
show();
},1000);
}
show();
・timerを途中で止める。
var i = 0;
function show(){
console.log(i++);
var tid = setTimeout(function(){
show();
},1000);
if (i > 3){
clearTimeout(tid);
}
}
show();
16 配列を使ってみよう
var score = [100,300,500,"taguchi"];
console.log(score[0]);//0から始まる。
score[2]=400;//要素は書き換えられる。
var m = [
[1,2,3],
[4,5,6],
]
console.log(m[1][1]);//5を表示する
17 オブジェクトを使ってみよう
18 メソッドを使ってみよう
var user = {
email:"[email protected]",//プロパティ
score:80
greet:function(name){//関数もOK。メソッ
ド
console.log("hello," + name +
"from" + this.email);//メソッドでthisをつかう
ことで自分にアクセスできる。
}
};
consoloe.log(user["tacughi"]);
console.log(user.email);
user.score = 100;//値も書き換えられる。
user.greet("Tom");
19 Stringオブジェクトを使おう
組み込みオブジェクト
-Stirng
-Array
-Math
-Date
var s = new String("taguchi");
console.log(s.length);
console.log(s.replace("t","T");
console.log(s.substr(1,3));//agu
// vas s = "taguchi";と書いても同じ結果が得ら
れる。「文字列リテラル」
20 Arrayオブジェクトを使おう
var a = new Array(100,200,300);
var a = [100, 300, 200];//配列リテラル
console.log(a.length);//3
unshift…戦闘に追加
push…最後に追加
shift…先頭を削除
pop…最後尾を削除
a.splice(1,2);1番目から2つ削除する(0から始ま
る)
a.splice(1,2,800,1000);2つ削除して同じ場所か
ら800,1000を追加する。
a.push(500);
21 Math、Dateオブジェクトを使おう
console.log(Math.PI);
console.log(Math.seil(5.3));
console.log(Math.floor(5.3));
console.log(Math.round(5.3));
console.log(Math.random());
var d = new Date();
var d = new Date(2014,1,11,10,20,30);//2
月。月は0から始まる。
consolo.log(d.getFullYear(());//
console.log(d.getMonth());
consoloe.log(d.getTime());経過ミリ秒
22 DOMとは何か?
console.dir(window);
console.log(window.outerHeight);//328
window.location.href="http:/www..." //ページ
を移動する
window.document - 今開いているページ。
windowは省略可能
document object model (DOM)
23 DOMを操作してみよう
<script>
var e =
document.getElementById('msg');
e.textContent = 'hello!';
e.style.color = 'red';
e.className = 'myStyle';
var greet =
document.createElement('p'),
text =
document.creatTextNode('hello world');
document.body.appendChild(greet).appe
ndChild(text);
24 イベントを設定してみよう
<button id = "add">Click!</button>
--
document.getElementById('add').addEventList
ener('click',function(){
//命令文
});
■jQuery入門 (全20回)
01 jQueryとはなにか?
JavaScriptを便利に扱うためのライブラリ
公式サイト…jquery.com
02 はじめてのjQuery
<body>
<script
src="http://code.jquery.com/jqueryx.x.x.min.
js"></script>
<script>
//$(document).ready(function()){}ページが読
み込まれたら実行する。$( function()){}と書き換
え可
$('p').css('color','red');
//セレクタ:処理対象となるDOM要素を指定する
記法
//メソッド:処理
$('p').css('color','red').hide('slow');
セレクタ.メソッド.メソッド/.… めっそっどチェ
ーン
</script>
</body>
03 idやclassを指定してみよう
04 もっとセレクタを使ってみよう
05 フィルタを使ってみよう
<ul id ="main">
<li>0/li>
<li class="item">1</li>
<li>2</li>
<li>3
<ul id ="sub">
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
</ul>
</li>
</ul>
----
$(function()){
$("#sub").css('color','red');
$(".item").css('color','red');
$("#main > .item").css(...);
$("p, .item").css(..);
$(".item + .item").css(..);//隣接する要
素。cssのスタイリングと同じ?
$("#sub > li:eq(2)").css(...); //「:」セレ
クタ。2番目の要素
}
・フィルタ
:eq()
:gt(), :lt()
:even, :odd
:contains()//li:contains('4') …<li>4</li>
:first, :last
06 メソッドを使ったDOM要素指定
$("#sub").parent().css(....);subの親要素全体に
適用
$("#sub").children().css(...);//subの子要素すべ
て
$("#sub >
li:eq(2)").next().css(...);//previous()…前の,
siblings()…同列の
07 属性セレクタを使ってみよう
<a href="http://xxxx.com">Dotinstall></a>
---
$(function(){
$('a[href="http://..."]').css('background',
'red');
// =/!=/*=(含まれる)/^=(で始まる)
/$=(で始まる)
}
08 css、addClass/removeClassを使おう
$('p').css('color','red).css('backgounr','blue');/
/メソッドチェーン
console.log($('p').css('color'););//値の取得をす
る場合
$('p').addClass('mystyle');//クラスを追加する場
合
$('p').removeClass('mystyle');//クラスを外す場
合
09 attr、dataを使ってみよう
<a href="http://www.google.com" data-
sitename="google">Google</a>
---
console.log($('a').attr('href'));//"http://www.g
oogle.com"を子ソールに表示
('a').attr('href','http://xxx.com');//http://xxx.c
omにリンクを変更
console.log($('a').data('sitename'));//
「google」を取得
10 タグの中身を操作してみよう
$(function(){
$('p').text('just changed');//pタグの中身を書き
換える
$('p').html('<a href="">click me!</a>')
console.log($('input').val());inputboxの中身を
取得
$('input').val('hello again!').;inputboxの中身を
書き換え
$('p').remove();//p要素を削除
});
11 要素を追加してみよう
var li = $('<li>').text('just added');
$('ul > li:eq(1)').before(li);リストの2番目の前に
追加//※
//※li.insertBefore($('ul > li:eq(1)'));と書いて
も同じ
$('ul').prepend(li);//最初に追加
$('ul').append(li);//最後に追加
li.appendTo($('ul'))//※上に同じ
li.prependTo($('ul'))
12 エフェクトを使ってみよう
<div id="box"
style"width:200px;height:200"><div>
$('#box').hide('slow');ゆっくり消
す。.hide(800)時間いて胃ができる
$('#box').fadeOut(800);//ふわっと消す
$('#box').toggle(800);//消えていたら出す。出
ていたら消す。
$('#box').fadeOut(800,function(){//消えたとき
に関数を実行する。
alert("gone");
});
13 イベントを使ってみよう
$(function(){
$('#box')
.click(function(){
alert("hi");
})
.mouseover(function(){
$(this).css('background','green');
})
.mouseout(function(){
$(this).css('background','red');
});
.mousemove(function(e){
$(this).text(e.pageX);//x座標を表示する。
});
});
14 focus、blur、changeを使おう
<input type="text" id="name">
<select id = "members" name="members">
<optsion>taguchi</option>
<optsion>fkoji</option>
</select>
---
$('#name")
.focus(function(){
$(this).css('background','red');//フォーカ
スが当たったら
})
.blur(function(){
$(this).css('background','white');//フォー
カスが外れたら
});
$('#members').change(function(){
alert('changed!');//地神のをが選ばれたら。
});
15 onメソッドを使ってみよう
$('button').click(function(){
var p =
$('<p>').text('vanish!').addClass('vanish');
$(this).before(p);
$('.vanish').click(function(){
$(this).remove();//これだとうまくいかな
い。
});
$('body').on('click','vanish',function(){
$(this).remove();//これでうまくいく。
});
});
16 Ajaxとはなにか?
17 loadメソッドを使ってみよう
Asynchronous JavaScript + XML
//サーバーと通信 + ページの書き換え
・ローカル開発環境
$('button').click(function(){
$('#result').load('more.html');
});
18 非同期通信とはなにか?
Asynchronous = 非同期:処理が終わる前に次の
処理に移る
$('#result').load('more.html');
$('#message').css('color'),'red');
//この書き方だたと赤くならない。
$('#result').load('more.html',function(){
$('#message').css('color'),'red');
});//コールバック関数。こうすると赤字になる。
19 $.getを使ってみよう
20 JSONで値を返してみよう
phpの知識要
■ Bootstrap 3.0入門 (全18回)
01 Bootstrapとはなにか?
Bootstrap
- CSSフレームワーク
公式サイト:http://getbootstrap.com
02 開発の準備を整えよう
GettinstartedからDL
css/fonts/js
htmlのベーシックテンプレートがあるのでコピー
して使う。
<html> -> <html lang="ja">
<meta charset="utf-8">を追加。
コメントをとる
jQueryのsrcにhttpを付与。
03 Gridシステムを使ってみよう
04 レスポンシブWebデザインを使おう
getbootstrap.com css gridの説明を読む。
<div id="header" class="container"
style="background:red">header<div>
<div class="container">
<div class="row">
<div class="col-sm-3 hidden-xs"
style="background:pink;">Side1</div>
<div class="col-sm-6 col-xs-6"
style="background:green;">Main</div>
<div class="col-sm-3 col-xs-6"
style="background:orange;">Side3</div>
段組みをしたい場合はrowで囲む。
余白を使う場合はcontainerクラスで囲む
</div>
</div>
<div id="footer"class="container"
style="background:red">header<div>
05 tableのスタイリングをしよう
<div class="conteiner" style="padding:20px
0">
<table class="table table-striped table-
bordered table-hover table-condensed">
<thead>
<tr><th>ID</th><th>Score></th></tr>
</thead>
<tbody>
<tr><td>taguchi</td><td>200</td></tr>
</tbody>
</table>
06 formのスタイリングをしよう (1)
<form>
<div class="form-group has-error">
<label class="control^abel"
for="email">Email</label>
<input type="text" di="email" class="form-
control" placeholder="email">
<span class="help-block">Error!</span>
</div>
<div class="form-group">
<input type="submit" value="submit"
class="btn btn-primary">
</div>
//このまま書けばうまいことスタイリングしてくれ
る。
07 formのスタイリングをしよう (2)
formを縦に揃えたい場合。
formを横に揃えたい場合。
08 Glyphiconsとボタンを使ってみよう
<p><i class=".glyphicon .glyphicon-
book">Book</i></p>
<button class="btn btn-primary">Push
Me!</button>青いボタンができる。
cssのbuttonでアイコンの種類を調べることができ
る。
<div class="btn-group">//ボタンをくっつけた
い場合。
<button class="btn btn-primary">Push
Me!</button>青いボタン
<button class="btn btn-success">Push
Me!</button>緑のボタン
<button class="btn btn-info">Push
Me!</button>
</div>
09 dropdownメニューを使おう
<div class="btn-group">
<button class="btn btn-primary dropdown-
toggle" data-
toggle="dropdown">Action<span
class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">Action></a></li>
<li><a href="">Action></a></li>
<li><a href="">Action></a></li>
<li class="devider"></a></li>//仕切りを入れ
る場合
</ul>
</div>
10 breadcrumb、pagination、pagerを使おう
<ul class="breadcrumb">
<li><a href="">home</a></li>
<li><a href="">Users</a></li>
<li class="active"><a
href="">thispage</a></li>
</ul>
<ul class="pagination">
<li class="disabled"><a
href="">«</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li class="active"><a href="">3</a></li>
<li><a href="">»</a></li>
</ul>
<ul class="pager">//ブログとかで使う。
<li class="previous"><a href="">前
へ;</a></li>
<li class="nest"><a href="">次へ</a></li>
</ul>
11 Navbarを使ってみよう
12 Navbarをスマホ対応にしよう
<nav class="navbar navbar-default navbar-
fixed-top">
<div class="navbar-header">
<button class="navbar-toggle" data-
toggle="collapse" data-target=".target">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"
href="">Dotinstall</a>
</div>
<div class="collapse navbar-collapse target">
<ul cass="nav navbar-nav">
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
</ul>
</div>
</nav>
13 label、badge、alert、panelを使おう
<p>Product A<span class="label label-
primary">NEW!</san><p>
<p>Inbox<span
class="badge">5</span></p>//何も入ってい
ない場合はバッジを非表示にしてくれる。
<div class="alert alert-info">
<button class="close" data-
dismiss="alert">×</button>
おしらせ!</div>
<div calss="panel panel-primary">
<div class="panel-heading">
おしらせ
</div>
<div calss="panel-body">
こんにちは。
</div>
</div>
14 progress-barを使ってみよう
<div class="progress">
<div class="progress-bar progress-bar-infro"
stlule="width:40%">
<div class="progress-bar progress-bar-
primary" stlule="width:30%">
<div class="progress-bar progress-bar-
warning" stlule="width:40%"></div>
</div>//ストライプ、アニメーションにもでき
る。
15 Modalウィンドウを使ってみよう
//日経のニュースとかで出てくるやつ?
<a data-toggle="modal" href="#myModal"
class="btn btn-primary">Show Me!</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-
dismiss="modal">×</button>
<h4 class="modal-title>My Modal</h4>
</div>
<div class="modal-body">
こんにちは
</div>
<div class="modal-footter">
</div>
</div>
</div>
</div>
16 Tabメニューを使ってみよう
<ul class="nav nav-tabs">
<li><a href="" data-
toggle="tab">Home</a></li>
<li class="active"><a href="" data-
toggle="tab">Home</a></li>
<li><a href="" data-
toggle="tab">about</a></li>
<div class="tab-content">
<div class="tab-pane active" id="home">ほー
むだよー<div>
<div class="tab-pane" id="about">あばうとだ
よー<div>
</div>
</ul>
17 tooltip、popoverを使おう
<p>< href="#" data-toggle="tooltip" title="
説明">this</a>and <a hret="#" data-
toggle="popover" title="説明" data-content="
さらに説明">that.</p>
<script>
$(function(){
$("[data-tggle=tooltip]").tootltip({
placement:'bottom'
});
$("[data-toggle=popover]").popover();
});
</script>
18 カルーセルを使ってみよう
①コピーする
②imgフォルダを痛る。
③キャプションを付ける。
■jQuery UI入門 (全19回)
01 jQuery UIとは何か
公式サイト。jqueryui.com
03 Draggableを使ってみよう
04 Draggableを設定してみよう
05 イベントを設定してみよう
<div id="box">box</div>
<style>
#box{
width:100px;
height:100px;
background:green;
}
</style>
<script>
$(function(){
$('#box').draggable({
//axis:'x' //x方向のみ
opacity:0.5 ,// ドラッグしている間の
透明度
handle: '.クラス名'//このクラス名の上
でドラッグできる
cancel: '.クラス名' //このクラス名以外
の部分でドラッグできる
drag: function(event,ui){
console.log(ui.position);
}
});
});
</script>
06 Droppableを使ってみよう
07 Droppableで要素を追加する
<body>
<div class="box">box</div>
<div class="target">target</div>
<style>
.box{
width:50px;
height:50px;
background:#ccc;
margin-bottom:20px;
}
.target{
width:100px;
height:100px;
background:pink;
}
.hover{
background:red;
}
</style>
<script>
$(function(){
$('.box').draggable({
helper:'clone',
});
$('.target').droppable({
accept:'.box',
hoverClass:'hover',
tolerance:'fit',
drop:function(event,ui){
ui.draggable.clone().appendTo(this);
console.log('dopped');
}
});
});
</script>
08 Resizableを使ってみよう
<div class="box">box</div>
<style>
.box{
width:100px;
height:100px;
background:#ccc;
}
</style>
<script>
$(function(){
$('.box').draggable().resizable({
handles:'all',//全方向に伸縮
aspectRatio:true,//縦横比を保つ
stop: function(event,ui){
console.log(ui.size.height,ui.size.width);
}
}); a
});
</script>
09 Selectableを使ってみよう (1)
10 Selectableを使ってみよう (2)
<ul id="selectable">
<li id="item_1">item1</li>
<li id="item_2">item1</li>
<li id="item_3">item2</li>
<li id="item_4">item3</li>
<li id="item_5">item4</li>
</ul>
<style>
.ui-selected{
background:red;
}
</style>
<script>
$(function(){
var selected = new Array();
$('#selectable').selectable({
selected:function(event,ui){
if(selected.indexOf(ui.selected.id)==-
1){selected.push(ui.selected.id)};
console.log(selected);
},
unselected:function(event,ui){
var id = ui.unselected.id;
selected.splice(selected.indexOf(id),1);
console.log(selected);
}
});
});
</script>
11 Sortableを使ってみよう
<ul id ="sortable">
<li id="item_1">item1</li>
<li id="item_2">item2</li>
<li id="item_3">item3</li>
<li id="item_4">item4</li>
<li id="item_5">item5</li>
</ul>
<script>
$(function(){
$('#sortable').sortable({
cursor:'move',
opacity:0.5,
update:function(event,ui){
console.log($(this).sortable("serialize"));
}
});
});
</script>
12 Accordionを使ってみよう
<div id ="accordion">
<h3><a href="">TITLE</a></h3>
<div>あいうえお</div>
<h3><a href="">TITLE</a></h3>
<div>あいうえお</div>
<h3><a href="">TITLE</a></h3>
<div>あいうえお</div>
<h3><a href="">TITLE</a></h3>
<div>あいうえお</div>
</div>
<script>
$(function(){
$('#accordion').accordion();
});
</script>
13 Autocompleteを使ってみよう
<input type="text" id="langs">
<script>
$(function(){
var langs = ["ja","en","cn","fr","sp","田中","田
口"];
$('#langs').autocomplete({
source:langs
});
});
</script>
14 Buttonを使ってみよう
<button>click</button>
<input type="checkbox"
id="check"><label
for="check">check!</label>
<div id="set">
<input type="radio" name="radio"
id="radio1"><label for="radio1">1</label>
<input type="radio" name="radio"
id="radio2"><label for="radio2">2</label>
<input type="radio" name="radio"
id="radio3"><label for="radio3">3</label>
</div>
<script>
$(function(){
$('button').button();
$('#check').button();
$('input[type=radio]').button();
$('#set').buttonset();//くっつく
});
</script>
15 Datepickerを使ってみよう
<input type="text" id="datepicker">
<script>
$(function(){
$('#datepicker').datepicker({
dateFormat:"yy-mm-dd",
numberOfMonths:3,//3か月分表示
minDate:-2,//2日前から
maxDate:"+1M"//1か月先しか選べない
});
});
</script>
16 Dialogを使ってみよう
<button>OPEN!</button>
<div id="msg">
こんにちは!
</div>
<script>
$(function(){
$('button').click(function(){
$('#msg').dialog('open');
});
$('#msg').dialog({
autoOpen:false,
buttons:{
"OK":function(){
$(this).dialog('close');
}
},
title:"title",
modal:true //ダイアログ中は操作がで
きなくなる
});
});
</script>
17 ProgressbarとSliderを使ってみよう
<div id="bar"
style="width:200px"></div>
<div id="slider"
style="width:200px;margin-
top:20px"></div>
<script>
$(function(){
$('#bar').progressbar({
value:33
});
$('#slider').slider({
slide:function(event,ui){
console.log(ui.value);
$('#bar').progressbar('option','value',ui.v
alue);
}
});
});
</script>
18 Tabsを使ってみよう
<div id="tabs">
<ul>
<li><a
href="#menu1">Menu1</a></li>
<li><a
href="#menu2">Menu2</a></li>
<li><a
href="#menu3">Menu3</a></li>
</ul>
<div id="menu1">menu 1</div>
<div id="menu2">menu 2</div>
<div id="menu3">menu 3</div>
</div>
<script>
$(function(){
$('#tabs').tabs({
selected:1 //エラー出てないけど、うまくい
っていない?
});
});
</script>
19 Effectを使ってみよう
<div id="box">box</div>
<style>
#box{
width:100px;
height:100px;
background:green;
}
</style>
<script>
$(function(){
$('#box').click(function(){
$(this).effect("explode",{
pieces:4
});
});
});
</script>