HTML5プロフェッショナル認定試験の勉強(自分用)

風見聡 @kazami7

CSS3勉強中。領域残し不可視 visibility:hidden リスト項目 display:list-item、インラインの表 :inline-table,table-cell =td,table-row =tr フレキシブルボックスレイアウト＝floatなしで横並びボックス

風見聡 @kazami7

CSS3勉強中。(訂正)フレキシブルボックスは縦並びも可能。→親要素にdisplay:flex + flex-direction:column ※フレキシブルボックスでは親要素にflexを設定するだけで子要素の設定なく容易にボックスレイアウトを作れる。

風見聡 @kazami7

CSS3勉強中。ボックス均等整列 justify-content:space-between 均等整列で左右余白 :space-around 左詰め :flex-start 右詰め :flex-end 中央寄せ :flex-center はみ出し改行 flex-wrap:wrap

風見聡 @kazami7

CSS3勉強中。ボックスレイアウト。縦方向の上付き配置 align-items:flex-start 下付き配置 :flex-end 中間寄せ :flex-center ベースライン配置 :baseline ※以上の文法は旧版ブラウザに対応するにはベンダープレフィックスが必要

風見聡 @kazami7

CSS3勉強中。単位rem＝html要素を基準 ※ emは親要素を基準 font-familyにはsans-serifを入れる。 スモールキャピタル＝小文字の大きさの大文字 font-variant:small-caps Webフォント＝サーバ上のフォントデータを参照させる。

風見聡 @kazami7

CSS3勉強中。Webフォント読込 @ font-face {font-family:'***'; src:url('***');} テキスト均等割付 text-align:justify 大文字化 text-transform:uppercase 小文字 :lowercase

風見聡 @kazami7

CSS3勉強中。折り返し無効 white-space:nowrap さらに改行反映 :pre-line さらにtab反映 :pre 全部有効 :pre-wrap 初期値:normal 。字間調節 letter-spacing 単語間調節 word-spacing

風見聡 @kazami7

CSS3勉強中。text-decoration-***はCSS3で追加。文字の影 text-shadow:水平px 垂直 ぼかし 広がり 色指定; 。右横書き unicode-bdi:bidi-override + direction:rtl ※ bdi,bfiと同効果？

風見聡 @kazami7

CSS3勉強中。はみ出し部分にスクロールバー表示 overflow:auto。画像の重ね表示=直近親要素にposition設定+重ねる要素に position:absolute top: **px left:**px。スクロールしても動かないボックス position:fixed

風見聡 @kazami7

CSS3勉強中。ボックス内を縦に4分割 column-count:4 +column-width:**px +カラム間隔 column-gap:**px +カラムの区切り線 column-rule:1px solid 色指定。カラム横断の行 column-span:all

風見聡 @kazami7

CSS3勉強中。画像切り抜き position:absolute,fixed + clip:rect(上方px,右方px,下方px左方px)。背景中央配置 background-position:center center; 又は:50%。

風見聡 @kazami7

CSS3勉強中。境界線にも背景表示 background-origin:border-box。画面サイズに合わせ背景画像可変 background-size:contain ※縦幅合わせ :cover 。背景画像を複数設定 background-image:url(),(),()

風見聡 @kazami7

CSS3勉強中。複数の背景画像の繰り返し設定 background-repeat:repeat-x, no-repeat,repeat-y ※background:a,b,cで一括設定も可。スクロールしても背景固定 background-attachment:fixed

風見聡 @kazami7

CSS3勉強中。背景グラデーション直線 background-image:liner-gradient(方向deg,始点色, 分岐色, 分岐位置%,終点色);。楕円形 :radial-gradient(始点上,始点下,始点色,終点色) 。正円形 (circle,始点色,終点色)

風見聡 @kazami7

CSS3勉強中。中央に円形グラデーション background-image:radial-gradient(center,circle,closest-side,始点色,終点色) 。周縁をホワイトアウト (center,circle,closest-corner,始点色,終点色)

風見聡 @kazami7

CSS3勉強中。ボックスに影設定 box-shadow:水平px 垂直px ぼかしpx 広がりpx 色指定;※内向きの影は insetを追記。複数の影指定はカンマ区切り。 リスト項目画像 ul{list-style-image:url(icon.gif); }

風見聡 @kazami7

CSS3勉強中。リスト項目のマーカーをABCに list-style-type:upper-alpha、abcに :lower-alpha、ローマ数字に upper-roman、漢数字に :upper-cjk-ideographic、カナに :katakana

風見聡 @kazami7

HTML5勉強中。caption-side:top,bottom,left,right 表のキャプションの位置。table-layout:fixed 表のセル幅を均等化。empty-cells:hide 空セルを非表示。transform 要素を拡大縮小、回転させる。

風見聡 @kazami7

HTML5勉強中。transform:translate(横方向,縦方向) 移動、:scale(横方向,縦方向) 拡大、:rotate(角度deg) 回転、:skewX,Y(角度deg) 剪断(歪み) matrix(1,1,2,2,3,4) 上記を一括設定

風見聡 @kazami7

HTML5勉強中。3D変形(遠近法)=transform-style:preserve-3d + transform:translateZ(X軸px,Y軸,Z軸) 3D移動、:scale3d(X軸,Y軸,Z軸) 3D拡大縮小、rotate X,Y,Z (角度) 各軸で3D回転。

風見聡 @kazami7

HTML5勉強中。遠近法実装＝transform scale3d(X軸,Y軸,Z軸) rotateX(角度deg) 。オンマウスアニメーション＝要素にtransition:width,height アニメ時間s 遅延開始時間s ease-in + hover{width指定 }

風見聡 @kazami7

HTML5勉強中。オンマウスアニメーション ease 初期値、ease-in ゆっくり開始、ease-out ゆっくり終了、ease-in-out ゆっくり開始終了 cubic-bezier(x1,y1,x2,y2) ペジェ曲線のコントロールポイント指定。※上記は要素の変化アニメ

風見聡 @kazami7

HTML5勉強中。アニメーション(移動、回転) animation:定義名 アニメ時間s 回数※無限はinfinite イージング※liner等 + @ keyframes 定義名 {0%{left:0; top:0;} 100%{left:100; top:100;}}

風見聡 @kazami7

HTML5勉強中。回転アニメーション＝要素にanimation:定義名 5s infinite linear; + @ keyframes 定義名 {0%{transform:rotate(0deg);} 100%{transform:rotate(180deg);}}

風見聡 @kazami7

HTML5勉強中。回転アニメーション続き。アニメした状態で停止＝要素にanimation-full-mode:forwards; ※:bothで開始状態を指定後、アニメした状態で停止。レスポンシブWebデザイン＝HTML共通でCSSのメディアクエリで画面サイズを判別しデザイン変更