CSS3

read the font file

@font-face { font-family: '{font_name}'; src: url('/fonts/{font_file.otf}'); } .body{ font-family: '{font_name}'; }

@media

メディアの形態(横が◯◯px以下の画面に適用、画面の向きが変わったら、解像度が◯◯以下になったら)によって適用させたいCSSを記述できます。 max-width min-width @mediaを使う場合、viewportを指定しなければなりません。 viewportはスマホなど画面サイズが…

ツールチップ ポップオーバー カルーセル bootstrap

<html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </link></meta></meta></meta></head></html>

ナビゲーションバー bootstrap

<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">toggle nav</span> <span class="icon-bar"></span> <span class="icon-bar"><…</span></button></div></div></nav>

ボタンやドロップダウン bootstrap

<div class="btn-group"> <button class="btn btn-primary"><i class="glyphicon glyphicon-heart">about</i></button> <button class="btn btn-success"><i class="glyphicon glyphicon-heart">main</i></button> <button class="btn btn-info"><i class="glyphicon glyphicon-heart">sub</i></button> </div>

offsetでカラムの間に空間を入れる

<form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-2" for="postcode">郵便番号</label> <div class="col-sm-4"> <input type="text" id="postcode" class="form-control" placeholder="郵便番号"> </div> </div> <div class="form-group"></div></form>

sr-only Bootstrap

sr-onlyクラス (screen reader-only) 音声読み上げのみで、画面には表示しないクラスです。 <form class="form-inline"> // フォーム全体をインラインに <div class="form-group"> // フォームをグループに <label class="sr-only control-label" for="postcode">ここが表示されない</label> <input type="text" id="postcode" class="form-control" placeholder="郵便番号"> </div> </form>

画面幅が変わった際、カラムを表示したり消したりする Bootstrap

<html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </link></meta></meta></meta></head></html>

画面幅が変わる度、カラム構成を変える Bootstrap

smの時は3:9、xsの時は5:7という風にレイアウト構成を画面の大きさによって変えられます。 <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> </meta></meta></meta></head></html>

画面幅に合わせてカラムの幅を調節する Bootstrap

横幅を全部で12のカラムに分割し、col-sm-3,col-sm-9などとクラスで指定してそれぞれの横幅が全部で12になるよう調節する。 xs:extra small ~ 767px sm:small 768 ~ 992px md:medium 992 ~ 1200px lg:large 1200 ~ CSS · Bootstrap CSS · Bootstrap smと…

padding border margin の役割

margin marginを設定することにより、borderより外側に背景や画像を適用させない。 上下の要素間にmarginを設定し、相殺させてより広い方を適用させる。 負の数値が使用できる。 margin-right:auto;``margin-left:auto;を利用することにより、中央に配置でき…

opacityが子要素にも透過が効いてしまい、opacity:1;を指定しても反映されない場合

opacity:0.3;などを指定し、子要素にそれが効かないようopacity:1;などしてテキストをはっきりと表示させたい場合、子要素のopacity:1;が効きません。 そういう場合は、親要素のopacityをbackground: rgba(50,50,50,0.3);に置き換えます(red,green,blueは適…

box-sizing boxの幅を、widthの設定以外無視する

実際に表示されるboxのwidthは、padding+border-widthも合わせて表示されてしまいます。 box-sizingはpaddingとborder-widthを無視し、widthのみ適用してくれる優れもの。 リセットスタイルに反映させると便利そう。 * { -webkit-box-sizing: border-box; -m…

IE8へのレスポンシブ対応

media queryへの対応 header内に以下を記述する。 importは使わない @media screen and (max-width:1180px){foo}

大きさを変更する #transform #ベンダープレフィックス

<html lang="ja"> <head> <meta charset="utf-8"> <style> div { width: 50px; height: 50px; padding: 10px; margin: 30px; background-color:orange; border-top:solid 10px #0000ff; border-radius:10px; } .b { transform:scale(1.2, 1.5); } </style> </head> <body> <div class="a">foo</div> </body></html>

対象の大きさを変える transform-origin #transform-scale

.a { border-top:solid 10px #0000ff; border-radius:10px; } .b { transform-origin:10px 20px; transform:scale(2, 1.5); } transform-originは、起点を表します。 transform-orign: 10px 20px;を指定した場合は、右(X)へ10px、上(Y)へ20px移動します。 tr…

translate 対象を移動させる

translateはtransformという要素の値として、どのくらいどこへズラすかを指定できます。 translateで右へ、X座標上で50px移動させます。 .a { transform-origin:top left; transform:translateX(50px); } 右へ50px、下へY座標上30px移動させます。 .a { tran…

対象にマウスが当たった時の挙動を変える #hover #transition

transition-propertyは、対象のプロパティ(要素)を指定できます(width,height,allなど)。 transition-durationは、アニメーションの動作がどのくらいのスピードで完了するか指定できます(3s:3秒掛かるなど)。 transition-timingは、アニメーションの動…

各動作の段階毎の挙動を指定する #keyframes #animation

animationでアニメーションの動作を指定し、各動作の段階毎の挙動をkeyframesで指定できます。 <html lang="ja"> <head> <meta charset="utf-8"> <style> .a { width: 50px; height: 50px; padding: 10px; margin: 30px; background-color:#ff0000; animation: test 10s ease 1s infinite alternate; } @keyfram</meta></head></html>…

マウスを乗せたときの対象の挙動を指定する #hover

<html lang="ja"> <head> <meta charset="utf-8"> <style> .a { width: 50px; height: 50px; padding: 10px; margin: 30px; background-color:#ff0000; border-top:solid 10px #0000ff; border-radius:10px; } .a:hover { width: 100px; height: 100px; } </style> </head> <body> <div class="a">foo</div></body></html>

対象を斜めに傾ける #transform:skew

{ transform-origin:top left; transform:skew(10deg); } 対象を右へ10度ずらします。 { transform-origin:top left; transform:skewY(10deg); } 対象をY軸上の縦に10度ずらします。 { transform-origin:top left; transform:skew(10deg, 20deg); } 対象のX…

rotate 斜めへ傾ける

transrate:rotateは、対象の傾きを指定できます。 { transform-origin:top left; transform:rotate(30deg); } 左上を中心に30度回転します。 { transform-origin:top left; transform:rotate(60deg); } 60度回転します。

input type #text #radio #password #checkbox #submit #table #tr #td

<body> <form action="#" method="post"> <table> <tr> <td>name:</td> <td><input type="text" name="name" size="20" maxlength="10"></td> </tr> <tr> <td>password:</td> <td><input type="password" name="pass" size="10" maxlength="6"></td> </tr> <tr> <td>grade:</td> <td> </td></tr></table></form></body>

CSS3 役立つサイト

http://www.colorzilla.com/gradient-editor/ http://www.css3maker.com/index.html http://border-radius.com/ http://css3button.net/ http://caniuse.com/

要素のn番目を変更する

<html lang="ja"> <head> <meta charset="utf-8"> <style> div p:nth-of-type(2) { color:red; } </style> </head> <body> <div> <p>a</p> <span>b</span> <p>c</p> <h3>d</h3> <p>e</p> <p>f</p> </body> </html> セレクタ:nth-of-type(2)で、2番目のdivの子要素であるp要素を赤くします。 <html lang="ja"> <head>…</head></html>

指定した値やステータスを持つ要素を影響させる

<html lang="ja"> <head> <meta charset="utf-8"> <style> input[type="text"]:disabled { color:orange; } input[type="password"]:enabled { border:5px solid blue; } input[type="radio"]:checked + label { color:pink; } </style> </head> <body> <form action="#" method="post"> <table> <tr> <td>…</td></tr></table></form></body></html>

何番目かの要素を指定して適用する #nth-child

<html lang="ja"> <head> <meta charset="utf-8"> <style> div p:nth-child(6) { color:red; } div *:nth-child(2) { color:yellow; } div *:nth-child(odd) { color:green; } div *:nth-child(9n) { color:blue; } div *:last-child { color:pink; } ul :only-child { color:coral; } </style> </head> </html>

transform-scale

transform-scaleは、指定した軸の大きさを変えます。 <html lang="ja"> <head> <meta charset="utf-8"> <style> .a { width: 50px; height: 50px; padding: 10px; margin: 30px; background-color:#ff0000; border-top:solid 10px #0000ff; border-radius:10px; transform-origin:top left; transform:scaleX(2)</style></meta></head></html>…

ボタンの結合 bootstrap

<div class="btn-group"> <button class="btn btn-success"><i class="glyphicon glyphicon-heart">Top</i></button> <button class="btn btn-info"><i class="glyphicon glyphicon-heart">Info</i></button> </div> i 要素でアイコンを指定できます。 Components · Bootstrap Components · Bootstrap btn-groupクラスでボタンをグループ化できます。