確認しておきたいcssプロパティなど

Css

今後使う機会があったときのための、自分用備忘録。

text-shadow

テキストに影(ドロップシャドウ)をつけてくれるプロパティ

box-shadow

ボックスに影 (ドロップシャドウ) をつけてくれるプロパティ

border-image

画像ボーダーについてまとめて指定する際に使用する。直感的に使用することが難しい・手間がかかるため、 border-image.comなどを利用すると良い。

quotes

contentプロパティで引用符として挿入する記号を指定する。

指定できる値

  • none
    • contentプロパティでquotesを指定しても記号を表示しない。
  • 記号
    • contentプロパティで挿入する開始・終了記号を引用符(ダブルコーテーション)で囲み、半角スペースで区切って指定する。なお、記号は第2段階まで指定可能。
サンプル

CSS

q{quotes: "「" "」"; }
q::before {content: open-quote; }
q::after {content: close-quote; }

clip

clipプロパティは、ボックスを部分的に切り抜いて表示するプロパティ。

指定できる値(切り抜き位置)

  • auto
    • ボックスは通常通り表示される。
  • rect()
    • 関数型の値。4つの値をカンマで区切って切り抜く領域を指定する。値は単位付きの数値、または%値(要素の幅、高さに対する割合)で記述する。
      各値は 上端の切り抜き位置(上辺からの距離)、
      右端の切り抜き位置(左辺からの距離)、
      下端の切り抜き位置(上辺からの距離)、
      左端の切り抜き位置(左辺からの距離)
      に対応する。
  • inset()
    • 関数型の値。4つの値で切り抜く領域を指定する。 各値は確変からの距離に対応しており、上辺、右辺、下辺、左辺の順に適用される。
サンプル

CSS

img{
position: fixed;
top: 0px; right: 0px;
clip: rect(50px,220px,250px,30px);
border: gray dotted 4px;
}

※部分的に切り抜いて表示しているだけなので、データ上では切り抜いていない部分のデータも存在している。

z-index

ボックスの重ね順を指定するプロパティ。このプロパティはpositionプロパティによって配置を指定された要素のみに適用される。

指定できる値(重ね順)

  • auto
    • ボックスの重ね順は、HTMLソースに記述した順に適用される。
  • 任意の数値
    • ボックスの重ね順を数値で指定。数値が大きくなるほど前(上)に重ねられる。 負の数値も指定が可能。
サンプル

CSS

#nav{position: absolute;
top: 10px; left: 20px;
z-index: 3;
}
#content{position: relative;
top: 30px;
z-index: 0;
}
#footer{position: fixed;
bottom: 10px;
z-index: 5;
}

CSS Grid Layout

グリッドレイアウトを可能にする。 「display: grid;」もしくは「display: inline-grid;」が指定された要素が「グリッドコンテナ」となる。

  • grid-template-areas
    • 子要素に個別の名前を付け、グリッドコンテナの中でどのような並び方をするのかを、視覚的に定義するプロパティ。
      それぞれの行に表示する子要素に名前をつけて、「’ ‘」の中に記述していきますが、ここでつけた名前は、後述のgrid-areaと連動。
      デバイス幅600pxまでのスマホやタブレットの時は、行が5、列が1の表示になるので、すべての子要素が縦に並ぶ。
      デバイス幅600px以上の時は、行が3、列が3の表示になるので、「’ ‘」の中に、その行に表示されるすべての列の名前を、スペース区切りで記述。

CSS

 /* デバイス幅600px以下の時 */
grid-template-areas: 'header'/* 1行目 */
'nav'/* 2行目 */
'main'/* 3行目 */
'aside'/* 4行目 */
'footer'/* 5行目 */;

/* デバイス幅600px以上の時 */
grid-template-areas: 'header header header'/* 1行目 */
'nav main aside'/* 2行目 */
'footer footer footer';/* 3行目 */

同名の3列は連結された1列として表示される。

  • grid-template-rows
    • 行の高さを指定。 1行目から順に、スペース区切りですべての行の高さを記述。デフォルトは「auto」指定がない場合はautoで問題なし。

CSS

/* デバイス幅600px以下の時 */
grid-template-rows: 60px 50px 1fr auto 60px;/* 行の高さ */

/* デバイス幅600px以上の時 */
grid-template-rows: 60px 1fr 100px;/* 行の高さ */
  • grid-template-columns
    • 列の幅を指定。 左側から順に、スペース区切りですべての列の幅を記述。 デフォルトは「auto」指定がない場合はautoで問題なし。

CSS

/* デバイス幅600px以下の時 */
grid-template-columns: 1fr;/* 列の幅 */

/* デバイス幅600px以上の時 */
grid-template-columns: 20% 1fr 20%;/* 列の幅 */

(grid-template-rowsとgrid-template-columnsは、px、%、auto、frの単位で指定が可能。)

  • grid-row-gap/grid-column-gap
    • grid-row-gapは行と行の間の余白、grid-column-gapは、列と列の余白を指定。 ショートハンドの場合は、「grid-gap: 行 列;」の順に記述。

CSS

/* デバイス幅600px以下の時 */
grid-row-gap: 0; /*行と行の間の余白 */

/* デバイス幅600px以上の時 */
grid-row-gap: 10px;/* 行と行の間の余白 */
grid-column-gap: 10px;/* 列と列の間の余白 */
/* ショートハンドだと
grid-gap: 10px 10px;
*/

「グリッドコンテナ」直下の子要素が「グリッドアイテム」 グリッドコンテナ」で指定されたレイアウト通りに配置される。
「グリッドコンテナ」直下の子要素のみ「グリッドアイテム」となり、孫要素は「グリッドアイテム」として扱われない。

  • grid-area
    • 「グリッドコンテナ」のgrid-template-areasでつけた名前を、子要素に定義。これを設定しておかないと、想定通りのレイアウトにはできない。

現段階ではIE11とEdgeが未対応のため実務で使用するのは厳しいと思われる。
参考リンク(https://www.tam-tam.co.jp/tipsnote/html_css/post12703.html

CSS Multi-column Layout Module

親要素にカラム数・幅を指定するだけで綺麗に並べてくれる

  • column-count
    • column-countは要素のカラム数を指定
  • column-width
    • column-widthプロパティ指定の値は絶対的ではなく、目安になるもの。正確な列幅を指定するためには、すべての長さが指定されている必要がある。
  • column-gap
    • column-gapプロパティは多段要素として表示されるよう指定されたブロック要素の段組みの間隔を指定する。 余白はカラムとカラムの真ん中からではなく、分けられたカラムの右端から、その右隣にあるカラムの、左端との間隔となる。
  • column-rule
    • olumn-ruleプロパティはカラムの区切り線のスタイル・幅・色を指定する。基本的にはboderプロパティと指定の仕方は同じ。

column-countとcolumn-widthが同時に指定されている場合はcolumn-widthがmin-widthのように扱われる。column-gapは30pxに指定されているため、この場合は(300px × 2) + 30px = 630pxとなり、ウィンドウサイズが630px以上になると2カラムに変化する。

サンプル

CSS

.column {
column-count: 2; /* 2カラムの場合 */
column-width: 300px; /* カラムの幅を指定 */
column-gap: 30px; /* カラム間の余白を指定 */
}

* { box-sizing: border-box; }
body { margin: 0; }

参考リンク(https://www.tam-tam.co.jp/tipsnote/html_css/post9538.html

CSS Flexible Box Layout Module

flexboxを使ったレイアウトとは、flexアイテムと呼ばれる複数の子要素を内包するflexコンテナの親要素で構成される。
flexboxレイアウトを使うには、HTMLの親要素のdisplayプロパティに「flex」を指定するだけ。インライン要素に使うのであれば「inline-flex」を指定。

上記は親要素に指定するプロパティ。自動的にflexコンテナとなる。子要素は自動的にflexアイテムとなる。

flexコンテナ

  • flex-direction
    • 「flex-direction」プロパティは、flexアイテムがflexコンテナでどのように配置されるか明示する。方向は2種類で、横列の水平、縦列の垂直に配置が可能。
  • flex-wrap
    • 「flex-wrap」プロパティは、flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールする。
  • flex-flow
    • 「flex-flow」プロパティは、「flex-direction」と「flex-wrap」を設定するショートハンド。
  • justify-content
    • 「justify-content」プロパティは、flexコンテナの主軸に沿ってflexアイテムを一行に配置。
  • align-items
    • flexアイテムはflexコンテナのクロス軸に垂直方向で配置することができる。「align-items」プロパティは、デフォルトで全てのflexアイテムを含める。
  • align-content
    • 「align-content」プロパティは「justify-content」と似ていますが、「align-content」プロパティはクロス軸の垂直方向に揃えて配置します。

flexアイテム

  • flex-grow
    • 「flex-grow」プロパティは、フリーのポジティブなスペースがある場合にflexアイテムが他のflexアイテムと比較してどのくらいの大きさになるかを指定。
  • flex-shrink
    • 「flex-shrink」プロパティは、フリーのネガティブなスペースにflexコンテナ内のflexアイテムが残りのアイテムと比較してどのくらい縮まるかを指定。
      デフォルトで全てのflexアイテムは縮小することができるが、「0」に指定した場合は、オリジナルのサイズを維持する。
  • flex-basis
    • 「flex-basis」プロパティは、flexアイテムの最初のメインとなるサイズを元に、幅と高さのプロパティを同じ値にする。
  • flex
    • 「flex」プロパティは、「flex-grow」「flex-shrink」「flex-basis」のショートハンド。「auto (1 1 auto) 」「(0 0 auto)」といった指定が可能。
  • align-self
    • 「align-self」プロパティは、flexアイテムの整列を前述の「align-items」での指定より優先される。

メモ

「float」や「clear」や「vertical-align」はflexアイテムに影響を与えない。
参考リンク(https://liginc.co.jp/web/html-css/css/21024

transform

生成されたボックスを変形、移動、回転などを指定できる。

指定できる値

  • rotate(deg)
    • 回転(deg で指定。10deg や -10deg など)
  • scale(xy[x,y])
    • 拡大・縮小(数値を指定。1 や 0.5 など)
  • skew(deg)
    • X軸,Y軸へのゆがみ(degで指定。10deg や -10deg など)
  • translate(xy[x,y])
    • (px で指定。10px など)

各プロパティはベンダープレフィックスをつけて指定する。

  • transform-origin
    • transform の基準点を指定。 (初期値は 50% 50% と要素の中心)

参考リンク(http://www.css-lecture.com/log/css3/css3-transform.html

Transitions

指定できる値

  • -webkit-transition-property
    • transition を適用するプロパティ(background-color など)を設定。
  • -webkit-transition-duration
    • transition の変化をどれくらいで表現するかを設定。単位はs。
  • -webkit-transition-timing-function
    • transition の変化の具合を設定。指定できる値は以下の通り。
      • default
      • linear(一定のスピード)
      • ease-in
      • ease-out
      • ease-in-out
      • cubic-bezier() 4つの数字をカンマ区切りで指定

参考リンク(http://www.css-lecture.com/log/css3/css3-transition.html

Animation

キーフレームアニメーションを適用できる機能。 細かい動きのアニメーションを実装する時に利用する。

キーフレームアニメーションとは

キーフレームアニメーションとはアニメーションの開始(0%)から終了(100%)までの任意の経過地点に プロパティを指定できるアニメーションのこと。(プロパティを指定した経過地点のことをキーフレームという)

Animationを利用するためには以下のプロパティを指定する。

  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

またCSS Animationを利用するためには 、適用するキーフレームアニメーションを@keyframesで定義する必要がある。

参考リンク(http://qiita.com/soarflat/items/4a302e0cafa21477707f#animation-name

object-fit

css画像の縦横比を保ちつつトリミングすることが可能。

サンプル

CSS

 img {
width: 250px;
height: 250px;
object-fit: cover; /* この一行を追加するだけ! */
}

↑ 画像の中央、wiidthとheightの範囲がトリミングされる。 画像の縦横比を維持したままボックスを埋めたい時は、

object-fit: cover; を使用する。画像のサイズは縦横のうち小さい方を基準にして自動的に拡大・縮小され、ボックスからはみ出した部分はトリミングされる。

画面幅に合わせてトリミング

縦の高さのみを固定して、横幅は画面や親要素いっぱいに表示させたい場面では、横幅を相対指定にしてobject-fit: cover;をかける。

サンプル

CSS

img {
width: 100%;
height: 400px;
object-fit: cover;
}

width: 100%; で横幅いっぱいに表示され、height の指定で高さを固定できるが、そのままでは画像がつぶれてしまう。object-fit: cover; を加えることできれいに可変になり表示される。

任意の部分をトリミング

毎回画像の中央にフォーカスしたいとは限りらない。中央以外の部分でトリミングしたい場合は、object-positionプロパティを設定する。 左上を基準にし、object-position: 横の位置 縦の位置; と記述する。

画像の左下でトリミングする時は object-position: 0 100%; を、右下でトリミングする時は object-position: 100% 100%; を記述する。パーセントで指定するのではなく、px での指定も可能。好みの位置にフォーカスされるよう調整ができる。

トリミングをせずに余白を表示

画像をトリミングせず、余白を表示してボックスの中央に画像を表示することも可能。object-fit: cover; ではなく、 object-fit: contain; に変更する。

サンプル

CSS

img {
width: 250px;
height: 250px;
object-fit: contain;
}

object-fit: cover; とは違い、画像の幅と高さのうち大きい方のサイズに合わせて比率を保持して画像が表示される。

指定できる値

  • fill(初期値)
    • ボックス内を満たすように縦横比を変えながらリサイズする。
  • cover
    • 縦横比を保持してボックスを完全に覆うようリサイズする。縦横のうち小さい方を基準にして自動的にリサイズし、ボックスからはみ出した部分はトリミングされる。
  • contain
    • 縦横比を保持し、ボックスに収まるようにリサイズする。幅と高さのうち大きい方のサイズに合わせて比率を保持してボックスにフィットさせる。
  • none
    • リサイズせず、そのまま表示。
  • scale-down
    • none と contain のうち、小さい方のサイズに合わせて表示。

※なお、IE/Edgeには対応していないので、 object-fit-imagesを使用して対応させる必要がある
参考リンク(http://www.webcreatorbox.com/tech/object-fit/

image-orientation

image-orientationプロパティは、画像の回転角度を指定する。レイアウト前に回転されるため、画像の領域となる幅や高さは回転後の状態が基準になる。

指定できる値

  • 任意の数値+単位
    • 回転角度を単位付きの数値で指定する。指定した値は、90度、180度、270度、360度の単位で四捨五入され適用される。
サンプル

CSS

img.layout{
background-color: #dcdcdc;
image-orientation: 45deg;
}

参考リンク(https://dekiru.net/article/13274/

font-variant

font-variantプロパティは、フォントのスモールキャップ(小文字の大きさの大文字)を指定する。

指定できる値

  • normal
    • 標準のフォントで表示
  • small-caps
    • 指定した要素内にある小文字がスモールキャップのフォントで表示される。スモールキャップのフォントがない場合は、大文字を縮小したものが表示される。

参考リンク(https://dekiru.net/article/13089/

target

targetプロパティは、リンク先の開き方・開く位置に関する target-nameプロパティ、target-newプロパティ、target-positionプロパティを一括指定する。

ただし、target-newプロパティ と target-positionプロパティによる指定は新しいタブまたはウィンドウが開かれた場合にだけ機能し、それ以外の場合には無効になる。

サンプル

CSS

セレクタ {
target: 値;
}

指定可能な値

  • target-name
    • リンク先を表示する場所(現存・新規のウィンドウ・タブ)を指定。
  • target-new
    • リンク先を開く新しい場所として,ウィンドウ,タブの別を指定。
  • target-position
    • 新しいタブ(ウィンドウ)を開く位置(前面・背後)を指定。

実際に使って覚えるまで

ずらずら文字が書いてあるだけだとどんな場面で使用できるか等わかりづらいので、「なんかこういうプロパティあったな…」程度でいいかも…。
使わないと覚えませんよね^^;

コメント