20200406のCSSに関する記事は5件です。

100日後にエンジニアになるキミ - 17日目 - CSS - CSSの基礎4

今日もCSSの続きをやっていきましょう。

前回のはこちら
100日後にエンジニアになるキミ - 16日目 - CSS - CSSの基礎3

CSSのプロパティの続きです。

ポジション

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_HcJKKSOXMw

Twitter:
https://twitter.com/otupython

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

検索機能で検索boxの下に候補を出す方法

0 はじめに

 今回は以下の写真のように、ユーザーが検索する時の助けになるように、boxの下に候補を出す方法を記述します。
 もっといい方法があるとは思いますが、今の私の理解力と技術ではこれがベストです。

バージョンです

 version ruby 2.5.1p57
          Rails 5.2.4.1

1 実装の流れ

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.rb
class 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
end

b) 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.js
 var 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.js
 function 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.js
 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);
  }

候補をクリックするとその商品のページに移動するためリンクを作成しています。その時にproduct.idが必要なめviewから取得しました。

 

3 最後に

今回のポイントは
・商品のデータをビューからjsに渡す
・検索ワードを入力している途中でスペースが入った時にすべての商品名がヒットしてしまうので、スペースには ^ マークを付けない
・JSON.parseでobjectに変換する
・検索ワードを正規表現にして該当するものだけヒットするようにする

以上です。
最後までご覧いただきありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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条」のように長い条項が続く文章も番号を意識せず作れますし、ほかにも連番が必要な時にプログラムに頼らず表示することができます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初心者によるプログラミング学習ログ 282日目

100日チャレンジの282日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
282日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む