CSS入門 - FC2sendagies.web.fc2.com/morita/prog.pdfCSS3入門 (全19回) 01 CSS3とは caniuse.com CtrlKで画面を分割して見れる。（atomの場合） 02 rem px, em, &, rem

■ 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:○の記述があること。）

}

www.w3c.org/

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){ }//３番目の要素のスタイリング

li:nth-child(ever/odd){}も使用可

li:nth-child(3n+1){}//4,7,…

li:nth-last-child(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>



.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>

</header>

<div id="eyecatch">

</div>

<main>


<div id="left">Left</div>

<div id="right">Left</div>

<div style="clear:both;"></div>//フロートの

解除をしておく、

</div>

</main>

<footer>


</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>

.clearfix::after{

content:'';//after擬似要素にはコンテントプロパ

ティが必須

display:block;

clear:both;

}

②簡易的な方法

<div class="container clear">



</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 ２</a></li>

<li><a href="">menu ３</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

<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>

<div id="sub">

<h2>Hello.Hello.Hello.Hello.</h2>

</div>

</div>

<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>

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;

https://developer.mozilla.org/ja/docs/Web/JavaScript

https://developer.mozilla.org/ja/docs/Web/JavaScript

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').html('<a href="">click me!</a>')

console.log($('input').val());inputboxの中身を

取得

$('input').val('hello again!').;inputboxの中身を

書き換え

$('p').remove();//ｐ要素を削除

});

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

//サーバーと通信 + ページの書き換え

・ローカル開発環境


$('#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="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">

http://getbootstrap.com/

<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 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>



</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>



</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="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を使ってみよう


<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>





</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">






</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>







</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>





</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(){


$('#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


<li><a


</ul>

<div id="menu1">menu 1</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>

Documents

CSS入門 - FC2sendagies.web.fc2.com/morita/prog.pdfCSS3入門 (全19回) 01 CSS3とは caniuse.com CtrlKで画面を分割して見れる。（atomの場合） 02 rem px, em, &, rem