- 投稿日:2020-04-06T19:00:12+09:00
100日後にエンジニアになるキミ - 17日目 - CSS - CSSの基礎4
今日もCSSの続きをやっていきましょう。
前回のはこちら
100日後にエンジニアになるキミ - 16日目 - CSS - CSSの基礎3CSSのプロパティの続きです。
ポジション
bottom
要素を配置する際に、下からの距離を指定するためのプロパティ
値 意味 長さ 「5px」「3em」のように、数値に単位を付けて指定 パーセント値 「100%」のように、数値に「%」の単位を付けて、他に対する割合で示す auto 値が自動的に計算(初期値) bottom: 10px; bottom: 10%; bottom: auto;clip
ボックスをクリッピングするためのプロパティ
値 意味 auto クリッピングされません。ボックス全体が表示(初期値) rect(上, 右, 下, 左) ボックスの左または上からの距離を「px」「%」などの単位を付けて、上→右→下→左の順にカンマで区切って指定 inset(上, 右, 下, 左) ボックスの四辺からの距離を「px」「%」などの単位を付けて、上→右→下→左の順にカンマで区切って指定 clip: auto; clip: rect(30px, 100px, 70px, 25px); clip: rect(30%, 100%, 70%, 25%); clip: inset(30px, 0px, 30px, 25px); clip: inset(30%, 0%, 30%, 25%);left
要素を配置する際に、左からの距離を指定するためのプロパティ
値 意味 長さ 「5px」「3em」のように、数値に単位を付けて指定 パーセント値 「100%」のように、数値に「%」の単位を付けて、他に対する割合で示す auto 値が自動的に計算されます。(初期値) left: 10px; left: 10%; left: auto;position
ボックスの配置を相対的にするか絶対的にするかを指定するプロパティ
値 意味 relative 要素の通常の位置から、top、right、bottom、leftで指定した分だけ相対的に移動 absolute 要素を、top、right、bottom、leftで指定した座標に絶対的に配置 fixed 要素をページ内に絶対的に配置この場合、スクロールしても要素の位置が固定されたまま static 要素を通常どおり配置し、top、right、bottom、leftを適用なし(初期値) position: relative; position: absolute; position: fixed; position: static;right
要素を配置する際に、右からの距離を指定するためのプロパティ
値 意味 長さ 「5px」「3em」のように、数値に単位を付けて指定 パーセント値 「100%」のように、数値に「%」の単位を付けて、他に対する割合で示す auto 値が自動的に計算されます。(初期値) right: 10px; right: 10%; right: auto;top
要素を配置する際に、上からの距離を指定するためのプロパティ
値 意味 長さ 「5px」「3em」のように、数値に単位を付けて指定 パーセント値 「100%」のように、数値に「%」の単位を付けて、他に対する割合で示す auto 値が自動的に計算されます。(初期値) top: 10px; top: 10%; top: auto;z-index
要素のスタックレベルを指定するプロパティ
値 意味 auto スタックレベルは「0」(初期値) 整数 スタックレベルを整数で指定「0」を基準として、値が大きいほど上。 z-index: auto; z-index: 3; z-index: 2; z-index: 1; z-index: 0; z-index: -1; z-index: -2; z-index: -3;画像
image-resolution
画像の解像度を指定するプロパティ
値 意味 解像度 数値に「dpi」を付けて指定 from-image 画像形式特有の解像度を指定 snap 「dpi」または「from-image」で指定した解像度とデバイスの解像度 image-resolution: 300dpi; image-resolution: from-image; image-resolution: 300dpi from-image; image-resolution: 300dpi snap; image-resolution: from-image snap;object-fit
オブジェクトをボックスにフィットさせる方法を指定するプロパティ
値 意味 fill オブジェクトはアスペクト比を変えながら、全体がコンテンツボックス内を満たすようにリサイズされます。(初期値) contain オブジェクトはアスペクト比を保ちながら、全体がコンテンツボックスに収まるようにリサイズ cover オブジェクトはアスペクト比を保ちながら、コンテンツボックスを完全に覆うようリサイズ none オブジェクトはリサイズしない scale-down 「none」か「contain」の小さい方を適用 object-fit: fill; object-fit: contain; object-fit: cover; object-fit: none; object-fit: scale-down;object-position
ボックス内のオブジェクトの位置を指定するプロパティ
値 意味 パーセント値 配置領域の幅または高さの相対位置と、オブジェクトの幅または高さの相対位置を合わせる。 長さ 「px」や「em」などのサイズで、水平または垂直方向の位置を指定 top 値が1個または2個の場合は上端を示す。それ以外は相対位置を示す基準としての上端を意味 right 値が1個または2個の場合は右端を示す。それ以外は相対位置を示す基準としての右端を意味 bottom 値が1個または2個の場合は下端を示す。それ以外は相対位置を示す基準としての下端を意味 left 値が1個または2個の場合は左端を示す。それ以外は相対位置を示す基準としての左端を意味 center 水平位置または垂直位置の数値が指定されない場合は、水平の位置が50%または垂直の位置が50% object-position: left 10px top 15px; object-position: right 3em bottom 10px; object-position: 100% 100%;マーキー
マーキーはテキストを流れるように動かす方法の指定です。
marquee-direction
マーキーのスクロール方向を指定するプロパティ
値 意味 forward マーキーの向きが水平の場合は「左から右」、垂直の場合は「上から下」に、コンテンツをスクロール(初期値) reverse マーキーの向きが水平の場合は「右から左」、垂直の場合は「下から上」に、コンテンツをスクロール marquee-direction: forward; marquee-direction: reverse;marquee-play-count
マーキーの再生回数を指定するプロパティ
値 意味 数値 マーキーの再生回数を、1以上の整数値で指定 infinite マーキーを無限に再生し続ける marquee-play-count: 5; marquee-play-count: infinite;marquee-speed
マーキーのスクロール速度を指定するプロパティ
値 意味 slow 遅めにスクロール normal 普通の速度でスクロール(初期値) fast 速めにスクロール marquee-speed: slow; marquee-speed: normal; marquee-speed: fast;marquee-style
マーキーの動き方を指定するプロパティ
値 意味 scroll コンテンツは、表示領域をスクロール(初期値) slide コンテンツは、表示領域内でスライドのように停止 alternate コンテンツは、表示領域内で往来 marquee-style: scroll; marquee-style: slide; marquee-style: alternate;マルチカラム
break-after
段組み表示するときに、特定の要素の後ろでの改段方法を指定するプロパティ
値 意味 auto ブラウザの設定に従う(初期値) column 特定の要素の後ろで、常に改段 avoid-column 特定の要素の後ろで、改段しない img { display: block; break-after: column; }break-before
段組み表示するときに、特定の要素の手前での改段方法を指定するプロパティ
値 意味 auto ブラウザの設定に従う(初期値) column 特定の要素の手前で、常に改段 avoid-column 特定の要素の手前で、改段しない img { display: block; break-before: column; }break-inside
段組み表示するときに、特定の要素内での改段方法を指定するプロパティ
値 意味 auto ブラウザの設定に従う(初期値) avoid-column 特定の要素内で、改段しない break-inside: auto; break-inside: avoid-column;column-count
段組みの段の数を指定するプロパティ
値 意味 auto 段の数は自動で算出(初期値) 整数 段の数を整数値で指定 column-count: auto; column-count: 2; column-count: 5;column-fill
段組み表示の際、各カラムのテキストを均等に分配し、カラムの高さを平均化するプロパティ
値 意味 balance 各カラムのテキストを均等に分配し、カラムの高さを平均化(初期値) auto 通常どおり、先頭のカラムから連続してテキストを満たす column-fill: balance; column-fill: auto;column-gap
column-gapは、段組みの段と段の間隔を指定するプロパティです
値 意味 normal ブラウザの設定に従います。通常、1emの間隔が空く(初期値) 長さ 数値に「px」「em」「ex」などの単位をつけて指定 column-gap: normal; column-gap: 10px; column-gap: 1.2em;column-rule
段組みの、段と段の間の境界線の「種類、色、太さ」をまとめて指定するプロパティ
値 意味 column-rule-width 境界線の「太さ」を指定 column-rule-style 境界線の「種類」を指定 column-rule-color 境界線の「色」を指定 transparent 境界線を透明にする column-rule: 1px solid #000; column-rule: 1em double black; column-rule: thin dashed rgb(255,0,0); column-rule: transparent;column-rule-color
段組みの、段と段の間の境界線の「色」を指定するプロパティ
colorと同等column-rule-color: #f00; column-rule-color: #ff0000; column-rule-color: rgb(255,0,0); column-rule-color: rgb(100%,0%,0%); column-rule-color: rgba(255,0,0,0.5); column-rule-color: rgba(100%,0%,0%,0.5); column-rule-color: hsl(0,255%,128%); column-rule-color: hsla(0,255%,128%,0.5); column-rule-color: red; column-rule-color: darkred; column-rule-color: transparent; column-rule-color: currentColor;column-rule-style
段組みの、段と段の間の境界線の「種類」を指定するプロパティ
値 意味 none 境界線を引かない。column-rule-colorやcolumn-rule-widthは無視(初期値) hidden 境界線を表示しません。noneとほぼ同等 dotted 点線 dashed 破線 solid 実線 double 二重線 groove 立体的に窪んだ線 ridge 立体的に隆起した線 inset ボックス全体が窪んだようにみえる線 outset ボックス全体が隆起したようにみえる線 column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset;column-rule-width
段組みの、段と段の間の境界線の「太さ」を指定するプロパティ
値 意味 数値 罫線の太さを「px」や「em」などで指定 thin 細い medium 中くらい(初期値) thick 太い column-rule-width: 1px; column-rule-width: thin; column-rule-width: medium; column-rule-width: thick;column-span
段組み表示の際、特定の要素を複数のカラムにまたがって表示させるプロパティ
値 意味 none 通常どおり、1つのカラムに収める(初期値) all 特定の要素は、すべてのカラムにまたがって表示 h2 { column-span: all; }column-width
段組みの段の幅を指定するプロパティ
値 意味 auto 段の幅は自動で算出(初期値) 長さ 数値に「px」「em」「ex」などの単位をつけて指定 column-width: auto; column-width: 100px; column-width: 20em;columns
段組みの段の幅と、段数をまとめて記述するためのプロパティ
値 意味 column-width 段の幅を指定 column-count 段の数を指定 columns: 3 30em; columns: 4 200px; columns: 5 auto; columns: auto 12em; columns: auto auto;音声
cue
cue-beforeとcue-afterをまとめて指定するためのショートハンドプロパティ
値 意味 cue-before 要素の前の合図音を指定 cue-after 要素の後の合図音を指定 cue: url("info.mp3"); cue: url("start.mp3") url("end.mp3"); cue: none;cue-after
要素の後ろの合図音を指定するプロパティ
値 意味 url 音声ファイルの場所を指定 デシベル 数値に「dB」をつけて指定します。指定する場合は、半角スペースで区切って「url」の後ろに置く none 合図音を指定しない(初期値) cue-after: url("end.mp3"); cue-after: url("end.mp3") -3dB; cue-after: url("end.mp3") 6dB; cue-after: none;cue-before
要素の前の合図音を指定するプロパティです
値 意味 url 音声ファイルの場所を指定 デシベル 数値に「dB」をつけて指定します。指定する場合は、半角スペースで区切って「url」の後ろに置く none 合図音を指定しない(初期値) cue-before: url("start.mp3"); cue-before: url("start.mp3") -3dB; cue-before: url("start.mp3") 6dB; cue-before: none;pause
pause-beforeとpause-afterをまとめて指定するためのショートハンドプロパティ
値 意味 pause-before 要素の前で音声を一時停止 pause-after 要素の後ろで音声を一時停止 pause: 1200ms; pause: none; pause: x-weak; pause: weak; pause: medium; pause: strong; pause: x-strong; pause: 1200ms 1500ms; pause: 1200ms none; pause: weak strong;pause-after
要素の後ろで音声を一時停止するプロパティ
値 意味 時間 一時停止の時間を指定します。数値に「s」(秒)または「ms」(ミリ秒)を付けて指定 none 一時停止しない、0msと同じ(初期値) x-weak かなり弱い区切り weak やや弱い区切り medium 中くらいの強さの区切り strong やや強い区切り x-strong かなり強い区切り pause-after: 1200ms; pause-after: none; pause-after: x-weak; pause-after: weak; pause-after: medium; pause-after: strong; pause-after: x-strong;pause-before
要素の前で音声を一時停止するプロパティ
値 意味 時間 一時停止の時間を指定します。数値に「s」(秒)または「ms」(ミリ秒)を付けて指定 none 一時停止しない、0msと同じ(初期値) x-weak かなり弱い区切り weak やや弱い区切り medium 中くらいの強さの区切り strong やや強い区切り x-strong かなり強い区切り pause-before: 1200ms; pause-before: none; pause-before: x-weak; pause-before: weak; pause-before: medium; pause-before: strong; pause-before: x-strong;rest
rest-beforeとrest-afterをまとめて指定するためのショートハンドプロパティ
値 意味 rest-before 要素内容を話す前の休符を指定 rest-after 要素内容を話した後の休符を指定 rest: 1200ms; rest: none; rest: x-weak; rest: weak; rest: medium; rest: strong; rest: x-strong; rest: 1200ms 1500ms; rest: 1200ms none; rest: weak strong;rest-after
要素内容を話した後の休符を指定するプロパティ
値 意味 時間 休符の時間を指定します。数値に「s」(秒)または「ms」(ミリ秒)を付けて指定 none 休符を指定しない、0msと同じ。(初期値) x-weak かなり弱い区切り weak やや弱い区切り medium 中くらいの強さの区切り strong やや強い区切り x-strong かなり強い区切り rest-after: 1200ms; rest-after: none; rest-after: x-weak; rest-after: weak; rest-after: medium; rest-after: strong; rest-after: x-strong;rest-before
要素内容を話す前の休符を指定するプロパティ
値 意味 時間 休符の時間を指定します。数値に「s」(秒)または「ms」(ミリ秒)を付けて指定 none 休符を指定しない、0msと同じ。(初期値) x-weak かなり弱い区切り weak やや弱い区切り medium 中くらいの強さの区切り strong やや強い区切り x-strong かなり強い区切り rest-before: 1200ms; rest-before: none; rest-before: x-weak; rest-before: weak; rest-before: medium; rest-before: strong; rest-before: x-strong;トランスフォーム
backface-visibility
要素の背面の表示/非表示を切り替えるプロパティ
値 意味 visible 背面を表示(初期値) hidden 要素ボックスを隠す backface-visibility: visible; backface-visibility: hidden;perspective
子要素に対して遠近効果を指定するプロパティ
値 意味 none 遠近効果は適用されない(初期値) 数値 奥行きを示す値を、単位なしのピクセル値で指定数値が0以下の場合、遠近効果は適用されない perspective: none; perspective: 300;perspective-origin
perspectiveでの遠近投影の基点となる位置を指定するプロパティ
値 意味 長さ 要素ボックスの左上隅からの距離を、数値に「px」「em」などの単位をつけて指定 パーセント値 要素ボックスの左上隅からの距離を、要素ボックスの幅または高さに対する割合で指定 left 要素ボックスの左端を示す center 要素ボックスの幅の中心または高さの中心を示す right 要素ボックスの右端を示す top 要素ボックスの上端を示す bottom 要素ボックスの下端を示す perspective-origin: left; perspective-origin: left top; perspective-origin: left 30%; perspective-origin: right bottom; perspective-origin: center top; perspective-origin: 20% 10%; perspective-origin: 50px 30px;transform
要素を変形させるプロパティ
2D変形関数 matrix(X軸方向への拡大縮小率, Y軸方向への傾斜角度, X軸方向への傾斜角度, Y軸方向への拡大縮小率, X軸方向への移動距離, Y軸方向への移動距離) translate(X軸方向への移動距離, Y軸方向への移動距離) translateX(X軸方向への移動距離) translateY(Y軸方向への移動距離) scale(X軸方向への拡大縮小率, Y軸方向への拡大縮小率) scaleX(X軸方向への拡大縮小率) scaleY(Y軸方向への拡大縮小率) rotate(角度) skewX(X軸方向への傾斜角度) skewY(Y軸方向への傾斜角度)
3D変形関数 matrix3d(数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値) translate3d(X軸方向への移動距離, Y軸方向への移動距離, Z軸方向への移動距離) translateZ(Z軸方向への移動距離) scale3d(X軸方向への拡大縮小率, Y軸方向への拡大縮小率, Z軸方向への拡大縮小率) scaleZ(Z軸方向への拡大縮小率) rotate3d(X軸の方向ベクトル数値, Y軸の方向ベクトル数値, Z軸の方向ベクトル数値, 回転の角度) rotateX(角度) rotateY(角度) rotateZ(角度) perspective(ピクセル値) /* 2D変形 */ transform: translate(100px, 50px) rotate(45deg); transform: skewX(15deg) skewY(15deg); /* 3D変形 */ transform: translate3d(100px, 50px, 20px) rotateX(45deg); transform: perspective(200) rotateY(25deg);transform-origin
要素を変形させる際の基準点を指定するプロパティ
値 意味 長さ 要素ボックスの左上隅からの距離を、数値に「px」「em」などの単位をつけて指定 パーセント値 要素ボックスの左上隅からの距離を、要素ボックスの幅または高さに対する割合で指定 left 要素ボックスの左端を示3個目には指定できない center 要素ボックスの幅の中心または高さの中心を示3個目には指定できない right 要素ボックスの右端を示3個目には指定できない top 要素ボックスの上端を示3個目には指定できない bottom 要素ボックスの下端を示3個目には指定できない transform-origin: left; transform-origin: left top; transform-origin: left 30%; transform-origin: left top 20px; transform-origin: right bottom 10px; transform-origin: center top 0; transform-origin: 20% 10% 5px; transform-origin: 50px 30px 5px;transform-style
3D変形が指定されている要素内での、子要素の表示方法を指定するプロパティ
値 意味 flat すべての子要素は、3D変形した親要素の2D平面内へ平面化されて表示(初期値) preserve-3d 子要素には、自信に指定された3D空間内の配置が適用 transform-style: flat; transform-style: preserve-3d;トランジション
transition
遷移関連プロパティをまとめて指定するショートハンドプロパティ
値 意味 transition-property 遷移させるプロパティを指定 transition-duration 変化にかける時間を指定 transition-timing-function 変化中の速度に緩急をつける transition-delay 遷移の開始を遅らせる transition: color 10s linear 5s; transition: background-color 20s ease-in 8s; transition: color 10s linear 5s, background-color 20s ease-in 8s;transition-delay
遷移の開始を遅らせるプロパティ
値 意味 時間を示す値 「10s」や「15ms」のように、数値に単位を付けて指定、単位は、秒「s」、ミリ秒「ms」 transition-delay: 5s; transition-delay: 300ms; transition-delay: 5s, 10s; transition-delay: 300ms, 120ms; transition-delay: 5s, 10s, 15s; transition-delay: 300ms, 120ms, 200ms;transition-duration
変化にかける時間を指定するプロパティ
値 意味 時間を示す値 「10s」や「15ms」のように、数値に単位を付けて指定、単位は、秒「s」、ミリ秒「ms」 transition-duration: 5s; transition-duration: 300ms; transition-duration: 5s, 10s; transition-duration: 300ms, 120ms; transition-duration: 5s, 10s, 15s; transition-duration: 300ms, 120ms, 200ms;transition-property
遷移させるプロパティを指定するプロパティ
値 意味 all 遷移可能な全てのプロパティを遷移対象として指定(初期値) none 遷移させるプロパティを指定しない プロパティ名 遷移させるプロパティ名を指定カンマで区切って複数のプロパティ名を指定 transition-property: all; transition-property: none; transition-property: color; transition-property: background-color; transition-property: color, background-color; transition-property: color, background-color, margin; transition-property: color, background-color, margin, width;transition-timing-function
変化中の速度に緩急をつけるプロパティ
値 意味 ease 遷移の始めは緩やかに、徐々に加速し、最後にスッと減速cubic-bezier(0.25, 0.1, 0.25, 1.0)と同じ(初期値) linear 遷移の始めから終わりまで一定の速度で変化cubic-bezier(0, 0, 1.0, 1.0)と同じ ease-in 始めは緩やかに、終わりにかけて加速し続けるcubic-bezier(0.42, 0, 1.0, 1.0)と同じ ease-out 始めから最大速度で、最後は緩やかに終わります。cubic-bezier(0, 0, 0.58, 1.0)と同じ ease-in-out 始めは緩やかに、途中で加速し、最後また緩やかに終わる step-start 始めから終了状態に一気に変化し、以後変化しないsteps(1, start)と同じ step-end 始めは変化せず、最後に終了状態に一気に変化steps(1, end)と同じです。 steps(ステップ数, startかend) プロパティの時間的変化を、複数の段階に分けて行う。1個目には、ステップ数を0以上の整数で指定2個目には、startかendを指定2個目を省略した場合は、endが適用される cubic-bezier(P1のX座標, P1のY座標, P2のX座標, P2のY座標) ベジェ曲線を描くためのP1、P2の座標を、0.0~1.0の範囲の4つの数値で指定 transition-timing-function: ease; transition-timing-function: linear; transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out; transition-timing-function: step-start; transition-timing-function: step-end; transition-timing-function: steps(1, end); transition-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0);アニメーション
animation
アニメーション関連プロパティをまとめて指定するショートハンドプロパティ
値 意味 animation-name 適用するアニメーションの名前を指定 animation-duration アニメーション1回分の再生時間を指定 animation-timing-function アニメーションの速度に緩急をつける animation-delay アニメーションの開始を遅らせる animation-iteration-count アニメーションの再生回数を指定 animation-direction アニメーションを逆方向に再生させる animation: anime1 10s linear 3s 2 normal; animation: anime1 10s linear 3s 2 normal, anime2 15s ease-in 4s 5 reverse;animation-delay
、アニメーションの開始を遅らせるためのプロパティ
値 意味 時間を示す値 「10s」や「15ms」のように、数値に単位を付けて指定、単位は秒「s」ミリ秒「ms」 animation-delay: 5s; animation-delay: 300ms; animation-delay: 5s, 10s; animation-delay: 300ms, 120ms; animation-delay: 5s, 10s, 15s; animation-delay: 300ms, 120ms, 200ms;animation-direction
アニメーションを逆方向に再生させるプロパティ
値 意味 normal アニメーションの繰り返し再生は、すべて通常方向に再生される(初期値) reverse アニメーションの繰り返し再生は、すべて逆方向に再生される alternate アニメーションの繰り返し再生は、奇数カウントで通常方向に再生され、偶数カウントで逆方向に再生される alternate-reverse アニメーションの繰り返し再生は、奇数カウントで逆方向に再生され、偶数カウントで通常方向に再生される animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse;animation-duration
アニメーション1回分の再生時間を指定するプロパティ
値 意味 時間を示す値 「10s」や「15ms」のように、数値に単位を付けて指定、単位は秒「s」ミリ秒「ms」 animation-duration: 5s; animation-duration: 300ms; animation-duration: 5s, 10s; animation-duration: 300ms, 120ms; animation-duration: 5s, 10s, 15s; animation-duration: 300ms, 120ms, 200ms;animation-iteration-count
アニメーションの再生回数を指定するプロパティ
値 意味 infinite アニメーションを無限に繰り返す 数値 再生回数を指定 animation-iteration-count: infinite; animation-iteration-count: 2; animation-iteration-count: 2, 5; animation-iteration-count: 2, 5, 10;animation-name
適用するアニメーションの名前を指定するプロパティ
値 意味 none アニメーションは適用されない(初期値) アニメーション名 @keyframesで設定したアニメーションIDを指定カンマで区切って複数のアニメーションIDを指定可能 animation-name: none; animation-name: anime1; animation-name: anime1, anime2;animation-timing-function
アニメーションの速度に緩急をつけるプロパティ
値 意味 ease 遷移の始めは緩やかに、徐々に加速し、最後にスッと減速cubic-bezier(0.25, 0.1, 0.25, 1.0)と同じです。(初期値) linear 遷移の始めから終わりまで一定の速度で変化cubic-bezier(0, 0, 1.0, 1.0)と同じです。 ease-in 始めは緩やかに、終わりにかけて加速し続けます。cubic-bezier(0.42, 0, 1.0, 1.0)と同じです。 ease-out 始めから最大速度で、最後は緩やかに終わります。cubic-bezier(0, 0, 0.58, 1.0)と同じです。 ease-in-out 始めは緩やかに、途中で加速し、最後また緩やかに終わります。cubic-bezier(0.42, 0, 0.58, 1.0)と同じです。 step-start 始めから終了状態に一気に変化し、以後変化しません。steps(1, start)と同じです。 step-end 始めは変化せず、最後に終了状態に一気に変化steps(1, end)と同じです。 steps(ステップ数, startかend) プロパティの時間的変化を、複数の段階に分けて行います。1個目には、ステップ数を0以上の整数で指定2個目には、startかendを指定2個目を省略した場合は、endが適用されます。 cubic-bezier(P1のX座標, P1のY座標, P2のX座標, P2のY座標) ベジェ曲線を描くためのP1、P2の座標を、0.0~1.0の範囲の4つの数値で指定 animation-timing-function: ease; animation-timing-function: linear; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: step-start; animation-timing-function: step-end; animation-timing-function: steps(1, end); animation-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0);フレキシブルボックス
align-items
フレキシブルボックス内でのボックスの揃え方を指定するプロパティ
値 意味 flex-start ボックスの先頭をフレックスボックスの斜め軸に沿った先頭位置に揃える flex-end ボックスの末尾をフレックスボックスの斜め軸に沿った末尾位置に揃える center ボックスをフレックスボックスの斜め軸に沿って中央で揃える baseline ボックスを基準となるフレックスボックスの斜め軸のベースラインに揃えて配置 stretch ボックスをフレックスボックスの斜め軸に沿って自動的に揃える(初期値) align-items: flex-start; align-items: flex-end; align-items: center; align-items: baseline; align-items: stretch;flex-direction
フレキシブルボックス内のボックスの配置方法を指定するプロパティ
値 意味 row 各ボックスをコンテンツの書字方向と流れに沿って、インライン要素の表示方向へ、フレキシブルボックスの開始側から末尾側へと配置(初期値) row-reverse rowと同じだが、フレキシブルボックスの末尾側から開始側へと逆向きに配置 column 各ボックスをコンテンツの書字方向と流れに沿って、ブロックレベル要素の表示方向へ、フレキシブルボックスの開始側から末尾側へと配置 column-reverse columnと同じだが、フレキシブルボックスの末尾側から開始側へと逆向きに配置 flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse;flex-flow
flex-directionとflex-wrapの値を、まとめて指定するためのショートハンドプロパティ
値 意味 flex-direction フレキシブルボックス内のボックスの配置方法を指定 flex-wrap フレキシブルボックスをマルチラインに flex-flow: row wrap; flex-flow: column wrap; flex-flow: row wrap-reverse; flex-flow: column wrap-reverse;flex-wrap
フレキシブルボックスをマルチラインにするプロパティ
値 意味 nowrap 通常どおり、フレキシブルボックスをシングルラインに(初期値) wrap フレキシブルボックスをマルチラインにコンテンツの書字方向に沿ってフレキシブルボックスの開始側から末尾側へと斜めにボックスの配置軸が設定 wrap-reverse wrapと同じだが、フレキシブルボックスの末尾側から開始側へと逆向きの斜めにボックスの配置軸が設定 flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse;justify-content
フレキシブルボックス内でのボックスの詰め方を指定するプロパティ
値 意味 flex-start 内部のボックスを、フレキシブルボックスの先頭に詰めて配置(初期値) flex-end 内部のボックスを、フレキシブルボックスの末尾に詰めて配置 center 内部のボックスを、フレキシブルボックスの中央に詰めて配置 space-between 内部のボックスを、フレキシブルボックス全体へ均等に配置先頭と末尾は詰めて配置 space-around 内部のボックスを、フレキシブルボックス全体へ均等に配置先頭と末尾にはスペースが入る justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-between; justify-content: space-around;order
フレキシブルボックス内のボックスの配置順序を指定するプロパティ
値 意味 整数 ボックスを配置する順番を整数で指定初期値は「0」 order: 1; order: 2; order: 3;まとめ
CSSで指定できることは幅が広く
試しながら覚えるしかないです。よく使うものは必ず覚えておきましょう。
君がエンジニアになるまであと83日
作者の情報
乙pyのHP:
http://www.otupy.net/Youtube:
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMwTwitter:
https://twitter.com/otupython
- 投稿日:2020-04-06T15:40:49+09:00
検索機能で検索boxの下に候補を出す方法
0 はじめに
今回は以下の写真のように、ユーザーが検索する時の助けになるように、boxの下に候補を出す方法を記述します。
もっといい方法があるとは思いますが、今の私の理解力と技術ではこれがベストです。バージョンです
version ruby 2.5.1p57 Rails 5.2.4.11 実装の流れ
a) controllerで候補に出すデータをインスタンス変数に入れる
b) viewにinputタグ(type:hidden)を記述。その中に1の変数を記述
c) 検索boxに入力されるたびに発火させ処理させる
d) 検索boxに入力された値をもとに正規表現を作成
e) インスタンス変数の値をeachで取り出して正規表現とマッチするか調べる
f) マッチしたものだけ関数を使って要素を作り、検索boxにappendする
2 コード・解説
a) controllerで候補に出すデータをインスタンス変数に入れる
jsサイドにデータを渡すためのコードです。
今回は「new.html.haml」 「edit.html.haml」以外に検索機能を実装します。productsコントローラーにbeforeアクションを設定しました。@wordに商品名を入れ、@id_boxにproduct.idを入れます。products_controller.rbclass ProductsController < ApplicationController before_action :set_product_name, except: [:new, :edit] ---省略--- def set_product_name @product_for_search = Product.all @wordbox = [] @id_box = [] @product_for_search.each do |product| @id_box << product.id @word_box << product.name end end endb) viewにinputタグ(type:hidden)を記述。その中に1の変数を記述
jsが発火した時にここから商品名及び、商品idを取得できるようにします。
一番下の#result-wordの下にliで候補を表示しますindex.html.haml= form_with(url: products_searches_path, local: true, method: :get, class: "search-form") do |form| .search-group = form.text_field :keyword, placeholder: "商品を検索する", class: "main-header__search-box", id: "_products_searches_keyword" = form.label :keyword, for: "search-btn", class: "search-label" do = form.submit "検索", class: "search-btn", id: "search-btn", style: "display: none" = image_tag 'icon-search 1.png',size: "30x25",class: "main-header__search-img" %input{name: "search-word-list", type: "hidden", value: @wordbox, class: 'search_word_list' } ←この行を入れる %input{name: "search-id-list", type: "hidden", value: @id_box, class: 'search_id_list' } ←この行を入れる %ul#result-word ←この下に候補用の要素を追加するc) 検索boxに入力されるたびに発火させ処理させる
jsファイル完全版
search.js$(document).on('turbolinks:load', function(){ var searchWordList = $('.search_word_list').val(); function appendList(word, number) { let item = $(` <li class="list result-list"> <a href = "/products/${number}" class="search-word-list"> <p>${word}</p> `); $("#result-word").append(item); } function editElement(element) { if (element != ""){ let result = "^" + element; return result; }else{ let result = "$^"; return result; } } $("#_products_searches_keyword").on("keyup", function() { let input = $("#_products_searches_keyword").val(); if (input==""){ $("#result-word").empty(); }else { let inputs = input.split(" "); let newInputs = inputs.map(editElement); let reg = RegExp(newInputs.join("|")); $.each( JSON.parse(searchWordList), function(i, word) { var searchIdList = $('.search_id_list').val(); searchIdList =JSON.parse(searchIdList) if (word.match(reg)) { appendList(word,searchIdList[i]); } }); }; }); });search.jsの詳細コード
search.jsvar searchWordList = $('.search_word_list').val(); ⬅️① $("#_products_searches_keyword").on("keyup", function() { ⬅️② let input = $("#_products_searches_keyword").val(); if (input==""){ $("#result-word").empty(); }else { let inputs = input.split(" "); let newInputs = inputs.map(editElement); let reg = RegExp(newInputs.join("|")); ---省略--- }); }; });① ページが読み込まれた時に商品の名前、idを取得する
② ↓入力されるたびに候補が出て欲しいので、keyupを使って発火させる。
↓発火すると検索boxに入れられた値を取得する
↓何も入力されていなければ候補用の要素を削除する
↓入力された検索ワードが複数ある場合はスペースで区切り、配列(inputs)にする
↓配列(inputs)をmapで新しい配列にする d)に飛ぶ
↓正規表現用の変数を用意し、先ほど ^ マークを付けた配列を"|"(「または」を意味する)を間に入れて合体させる。d) 検索boxに入力された値をもとに正規表現を作成
search.jsfunction editElement(element) { if (element != ""){ let result = "^" + element; return result; }else{ let result = "$^"; return result; } }inputで分けられた配列の中身があるときだけ検索ワードの先頭に ^ マークをつける。「test ␣」のようにスペースが空いている場合は「"^test", "^"」というふうに配列が作成されるので、すべての商品名がヒットしてしまう。「""」の時は ^ マークは付けないようにする。 b)に戻る。
e) インスタンス変数の値をeachで取り出して正規表現とマッチするか調べる
search.js$.each( JSON.parse(searchWordList), function(i, word) { var searchIdList = $('.search_id_list').val(); searchIdList =JSON.parse(searchIdList) if (word.match(reg)) { appendList(word,searchIdList[i]); } });一行目のJSON.parseはsearchWordListをobjectに変換するためのメソッド
jsのeachはobjectに対して処理を行うようでこの記述がないとエラーが表示される。(理解仕切れていません)Uncaught TypeError: Cannot use 'in' operator to search for 'length' in ["aa", "test", "選択してくださいテスト", "test-sample", "服"]
商品のidにも同じように記述する
はじめは商品のidを渡さずに、eachのindexを使ってリンクのURLを作成していたが、本番環境でエラーが出たので、書き換えました。f) e)のeachでマッチしたものだけ、関数を使って要素を作り、検索boxにappendする
search.jsfunction appendList(word, number) { let item = $(` <li class="list result-list"> <a href = "/products/${number}" class="search-word-list"> <p>${word}</p> `); $("#result-word").append(item); }候補をクリックするとその商品のページに移動するためリンクを作成しています。その時にproduct.idが必要なめviewから取得しました。
3 最後に
今回のポイントは
・商品のデータをビューからjsに渡す
・検索ワードを入力している途中でスペースが入った時にすべての商品名がヒットしてしまうので、スペースには ^ マークを付けない
・JSON.parseでobjectに変換する
・検索ワードを正規表現にして該当するものだけヒットするようにする以上です。
最後までご覧いただきありがとうございました。
- 投稿日:2020-04-06T13:14:43+09:00
CSSだけで数値をカウントする
サンプルはこちら。
See the Pen counter-increment test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
HTMLにもCSSにも数値は書いておらず、連番リスト(ol)も使っていません。
変数をカウントする
h2 { counter-increment: x; counter-reset: y; } h3 { counter-increment: y; }h2,h3 の見出しに
counter-increment
というプロパティを使っています。このプロパティはCSS内で変数を定義すると同時に、その変数を+1します。
上記の場合は h2 ごとにx
が、h3ごとにy
が1つ増える宣言をしています。また h2 には
counter-reset: y
も宣言しています。
これは指定した変数を0に戻すプロパティです。h3 ごとに増える
y
をリセットすることで、大見出し(h2)ごとに小見出し(h3)の番号を1から振り直す形になります。ちなみに
counter-increment: x y;
という形で複数の変数を同時にカウントすることもできます。変数を表示する
h2:before { content: "Part" counter(x) " : "; } h3:before { content: counter(x) "-" counter(y) " : "; }変数の表示ですが、現在
counter-increment
で作った変数は疑似要素:before
か:after
の、content
でしか表示できません。疑似要素に
content: counter(x)
で変数を表示することができますが、サンプルのように前後に文字を入れたり、複数の変数も表示できます。「X章Y条」のように長い条項が続く文章も番号を意識せず作れますし、ほかにも連番が必要な時にプログラムに頼らず表示することができます。
- 投稿日:2020-04-06T04:52:23+09:00
初心者によるプログラミング学習ログ 282日目
100日チャレンジの282日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
282日目は、
おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 5, 2020
282日目 6h
・xdデザインカンプからのwebサイト模写
・画像をpngではなくsvgに変更#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
- 投稿日:2020-04-06T00:46:17+09:00
CSSのみでタイムラインを制作する 自分用備忘録
自分用のCSS備忘録です。
本当に自分用なんで解説などは一切ありません。<div class="timeline RRR"> <div class="timeline__item"> <div class="maru"> <div class="m"></div> </div> <p class="name">題名<br>ダミーテキストダミーテキスト</p> </div> <div class="timeline__item"> <div class="maru"> <div class="m"></div> </div> <p class="name">題名<br>ダミーテキストダミーテキスト</p> </div> <div class="timeline__item"> <div class="maru"> <div class="m"></div> </div> <p class="name">題名<br>ダミーテキストダミーテキスト</p> </div> <div class="timeline__item"> <div class="maru"> <div class="m"></div> </div> <p class="name">題名<br>ダミーテキストダミーテキスト</p> </div> <div class="timeline__item"> <div class="maru"> <div class="m"></div> </div> <p class="name">題名<br>ダミーテキストダミーテキスト</p> </div> <div class="timeline__item"> <div class="maru2"> <div class="m"></div> </div> <p class="name">題名<br>ダミーテキストダミーテキスト</p> </div> </div>@charset "UTF-8"; *,*::before,*::after {box-sizing: border-box} html{font-size:62.5%;} body{font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;} a:link,a:visited,a:hover,a:active{text-decoration: none;} .RRR{ width: 1200px; margin: 0 auto; margin-top: 100px; } .timeline{ display: flex; justify-content: center; background-color: #eeeeee; } .timeline__item{ width: 180px; text-align: center; font-size:18px; } .name{ font-size:16px; width: 80%; margin: 0 auto; } .maru{ position: relative; margin-bottom: 10px; } .m{ width: 10px; height: 10px; border-radius: 50px; margin: 0 auto; border:1px solid #313131; } .maru:after { content: ''; position: absolute; top: 50%; margin-left: 5%; display: inline-block; width: 90%; height: 1px; background-color: #313131; } .maru2{ position: relative; margin-bottom: 10px; }