チュートリアル
エラスティック・ボックス
CSS3 Elastic Boxes は、ページが異なる画面サイズやデバイスタイプに適応する必要がある場合に、要素が適切な動作をするようにするレイアウトです。フレックスボックスのレイアウトモデルを導入した目的は、コンテナ内の子要素に整列、両端揃え、空白を割り当てる、より効率的な方法を提供することです。
- dispaly: flex/inline-flex フレキシブルコンテナとして定義。
- flex-direction: row/row-reverse/column/column-reverse
- justify-content: flex-start/flex-end/center/space-between/space-around
- align-items: フレックススタート/フレックスエンド/センター/ベースライン/ストレッチ(アイテムはストレッチされます)
- flex-wrap: nowrap/wrap/wrap-reverse
弾性ボックス要素の属性
- オーダー: 0/1/-1...値が小さいほど次数が高くなります。
- margin: auto; 完全に中央揃えになります。伸縮性のあるコンテナの残りのスペースを自動的に取得し、autoに設定された要素は自動的に上下左右に整列されます。
マルチメディアクエリ
- @media not|only mediatype and {css code..}
- @media all and {css}
- すべて/印刷/画面/音声（スクリーンリーダー） css3 マルチメディア・デバイス・タイプ
- border-shadow:
<offset-x><offset-y><blur-radius><spread-radius>insetrgb(number,number,number,0.1)
ボーダー
url("/images/border.png") 30 30 repeat;border-shadow: オプションの挿入 div.card { width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; }- border-radius: 5px 1つの値は四隅に、2つの値は左上、右下、右上、左下に、3つの値は左上、右上、左下、右下に設定します。
- バーダー・イメージ
@font-face{ font-famliy:name; src:url("url"); font-stretch:normal; font-weight:normal; font-style:normal; unicode-range:((オプション）文字範囲を示す }
背景
- barder-image:
url("/images/border.png") 30 30 repeat; - background-image:liner-gradient(red,green); 上から下へ
グラデーション効果 グラデーション
直線勾配
- background-image:liner-gradient(red,green); top-to-bottom
- background-image:liner-gradient(red,green); 上から下へ
使用角度
透明性の利用
- background-image:liner-gradient(to right,red,green); 左から右へ
線形グラデーションの繰り返し
ラジアルグラデーション
- background-image: radial-gradient(red, yellow, green);
- background-image: radial-gradient(circle/ellipse, red, yellow, green); default ellipse, ellipse
- background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); closest-side/farthest-side/closest-corner/farthest-corner
テキスト効果
- テキストまたは絵カードの効果：
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
2つのボックスシャドウを設定し、2つ目のボックスシャドウはより下方にオフセットし、ぼかし半径を大きくし、透明度を高くします。
- word-wrap:break-wrapは直接改行します。
- word-break:keep-all/break-all 単語を保持するか改行します。
フォント
こ の フ ォ ン ト フ ァ イ ルは次の よ う に し て イ ン ポー ト す る こ と がで き ます。
@font-face{
font-famliy:name;
src:url("url");
font-stretch:normal;
font-weight:normal;
font-style:normal;
unicode-range:((オプション）文字範囲を示す
}
D/3D
2D
- transform:translate(50px,100px) 要素を左から50ピクセル、上から100ピクセル移動します。
- transform: rotate(30deg); 要素の中心から時計回りに回転させる角度 transgorm-origin:20% 40%; 回転後の要素の位置 x,y
- 要素の幅は元の幅の2倍に、高さは元の高さの3倍に変更されます。
- transform:skew(30deg,20deg);要素のX軸とY軸の傾き角度
- transform:matrix(); matrixメソッドは6つの引数をとり、回転、拡大縮小、シフト、傾斜の関数を含みます。
3D
- transform:rotateX(130deg)/rotateY(130deg)
トランジション効果
div{
transition:width 2s ease;
width:100px;
}
div:hover{
width:300px;
}
アニメーション
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
<div></div>
複数の列
- column-count:4; 要素を分割する列数を指定します。
- column-fill:auto/balance; 列の塗りつぶし方法を指定します。
- column-gap:40px; カラム間のギャップを指定します。
- column-rule: すべての column-rule-* 属性の省略記法。
- column-rule-color:red;2つの列の間の境界線の色を指定します。
- column-rule-style:solid;2つの列の間の境界線のスタイルを指定します。
- column-rule-width:20px; 2つの列の間の境界線の太さを指定します。
- column-span:all; 要素がまたがる列数を指定します。
- column-width:40px; カラムの幅を指定します。
- columns: column-width column-count
ユーザーインターフェース
- resize:none/both/vertical/horizontal(水平)
イメージ
JSを組み合わせてイメージモーダルを実装する
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初心者チュートリアル (.com)</title>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>イメージモーダルボックス</h2>
<p>この例では、CSSとJavaScriptを組み合わせてイメージをレンダリングする方法を示している。</p><p>
まず、CSS を使用してモーダルウィンドウを作成する。<p>
<p>次に、JavaScriptを使ってモーダルウィンドウを表示し、イメージがクリックされるとポップアップウィンドウにイメージが表示される：</p>
<img id="myImg" src="//www..com/wp-content/uploads//img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// モーダルウィンドウを取得する
var modal = document.getElementById('myModal');
// イメージモーダルボックス、alt属性をイメージポップアップの説明として取得する。
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// <span> 要素で、モーダルボックスを閉じるボタンを設定する
var span = document.getElementsByClassName("close")[0];
// <span> 要素で、モーダルボックスを閉じる
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
ボタン
矢印でボタンをアニメーションさせる
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初心者チュートリアル (.com)</title>
<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
border:1px solid black;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
border:1px solid black;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<h2>ボタンアニメーション</h2>
<button class="button" style="vertical-align:middle"><span>Hover </span></button>
</body>
</html>
em rem vw vh vmax vmin 単位なし
emは相対サイズ
ルート要素のfont-size = 1emの場合、ページのフォントサイズはデフォルトの16pxであることを意味します；
通常の要素が font-size = 1.2em を持つ場合、それは親要素のフォント・サイズの1.2倍を継承することを意味します；
通常要素の他の属性がemを単位として使っている場合、その要素のフォント・サイズを継承していることを示します；
注意: 要素が入れ子になっていて、font-sizeの単位として1emではなくemが使われている場合、段階的にフォントが縮小または拡大されることがあります。
remはまた、相対的な大きさを示します。
通常要素のfont-size = 1.2remは、常にルート要素のフォントサイズを継承し、親要素とは無関係にルート要素の1.2倍のサイズになることを意味します。
たとえば、次のようになります： root{font-size=1.2em} p{font-size=1.1rem}
vw:ビューポートの幅のパーセンテージ vh:ビューポートの高さのパーセンテージ vmin:ビューポートの高さまたは幅の最小値のパーセンテージ vmax:ビューポートの高さまたは幅の最大値のパーセンテージ
要素のfont-sizeをvmに設定した場合、フォントサイズはページサイズに追従しますが、場合によってはパーセンテージの変化が望ましい効果をもたらさないことがあります。
calc()関数
今回はiphon6の11.75pxからブラウザの横幅1200pxのフォントの20pxの間でフォントサイズが変化し、ビューポートの変化に応じてフォントがスムーズに変化する、メディアクエリの代わりに使えるものです。
inline-height が line-height を持たない場合、子要素はこの値を継承して
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div{font-size = 2em}のようにすると、このときdivのフォント・サイズは32px、行の高さは32 * 1.2pxになります。
親要素の行の高さが1.2emなどの単位を持つ場合、子要素のフォントが重なるフォントの行の高さよりも大きい場合、それは、もはや再計算され、直接結果の値を継承します。
要素位置の取得 ページサイズ ビューポートサイズ
- 関数 this.getBoundingClientRect（）を介して要素の位置を取得するには、ビューポートの位置にページ上の相対的な、次のようなオブジェクトを返します。
{ x: 要素の左外枠からページの左端までの距離。
y: 要素の上部外枠からページの最上部までの距離。
width: 要素の幅を示す。 border+padding+content
height: 要素の高さを示す すべての可視部分 border+padding+content
top: y
right: 要素の右外枠からページの左端までの距離。
bottom: 要素の外枠からページの上端までの距離を示す。
left: x
}
DOM
読み取り専用プロパティ
- clientWidth clientHeight
直接呼び出される要素で、ボーダーとパディングを含む可視部分の幅と高さを示します。スクロールバーがスクロールバーの幅の一部を隠している場合は、スクロールバーの幅を削除します。
- offsetWidth offsetHeight
border,padding,contentを含め、要素に元々設定されている幅と高さを取得し、コンテンツが要素のサイズを超えないようにします。
- clientTop clientLeft
borderdの幅と高さを読み込みます。
- offsetLeft offsetTop
この距離は、body要素にはない、位置決めされた最も近い親要素の境界からの要素の距離です。
- scrollHeight scrollWidth
スクロールバーなしで、スクロールが発生したときの実際のコンテンツのサイズ。スクロールバーなしで、スクロールが発生しない場合の実際のコンテンツのサイズ。
読み取り可能なプロパティと書き込み可能なプロパティ
- scrollTop scrollLeft
要素の内容が幅を超えた場合にロールアップされる幅を示します。スクロールバーのスクロールに合わせて増減します。
obj.style.* プロパティはインライン・スタイルを取得しますが、計算されたプロパティ値は取得しません。
イベントオブジェクト
- clientX clientY
マウスクリックイベントが発生したときの、ブラウザの左上隅からの相対的なクリック位置を示します。
- screenX screenY
画面の左上隅を基準としたクリックイベントの位置を示します。
- offsetX offsetY
イベントソースの左上隅からの相対的なクリックイベントの位置を示します。fireFoxはこれをサポートしていないので、代わりにevent.layerXとevent.layerYを使用してください。
- pageX pageY
ページの左上隅に対するクリックの位置は、スクロールがないときはclientX Yと同じで、スクロールが発生すると大きくなります。
