KinutaHandicraft - ヒント集 - ヒントだよ！HTML & CSS -

■ CSS その4

{displayディスプレイ:表示型;}、ボックスの表示型を指定する。 → displayの例を表示する。

{positionポジション:配置方法;}、ボックスの配置方法を指定する。
ボックスの配置位置を指定する。
- {topトップ:位置;}
- {rightライト:位置;}
- {bottomボトム:位置;}
- {leftレフト:位置;}

{floatフロート:回り込み位置;}、ボックスの回り込み位置を指定する。
回り込み位置:
- none = 回り込みなし
- right = 右に寄せます
- lelft = 左に寄せます
- inlin-start / inline-end = 省略
{clearクリア:解除位置;}、ボックスの回り込みを解除する。

{clip-pathクリップ-パス:切り取り領域;}、クリッピング(抜き出す)領域を指定する。
切り取り領域の例:
- 円で切り取る = Ccorcle(半径 at 中心のx 中心のy)
- 長方形で切り取る
  - inset(左幅上幅)
  - inset(左幅上幅下幅)
- 楕円で切り出す = ellipe(横半径縦半径 at 中心x 中心y)
- 多角形で切り出す = poligon(点1x 点1y , 点2x 点2y , …)
※切り出した画像を作るのではだめなのでしょうか？

{box-shadowボックス-シャドウ:オフセット(水平右方向) オフセット(垂直した方向) ぼかし半径広がり固定値;}、
ボックスの影を指定する。
{box-decoration-breakボックス-デコレーション-ブレーク:表示方法;}、分割されたボックスの表示方法を指定する。
{box-sizingボックス-サイジング:算出方法;}、ボックスサイズの算出方法を指定する。

{z-indexゼット-インデックス:表示方法;}、ボックスの重ね順を指定する。
{visibilityビジビリティ:表示方法;}、ボックスの可視、不可視を指定する。

{table-layoutテーブル-レイアウト:レイアウト方法;}、
表組みのレイアウト方法を指定する。 → 設定例を見る。
border-collapseボーダー-コラプス:表示方法、
表組みにおけるセルの境界線の表示形式を指定する。→ 設定例を見る。
{border-spacingボーダー-スペーシング:間隔;}、
表組みにおけるセルのボーダーの間隔を指定する。 → 設定例を見る。
{enpty-cellsエンプティ-セル:表示方法;}、
空白のセルのボーダーと背景の表示方法を指定する。 → 設定例を見る。
{caption-sideキャンプション-サイド:表示位置;}、
表組みのキャンプションの表示位置を指定する。 → 設定例を見る。

スクロール関係
- {scroll-behaviorスクロール-ビヘイビア:動き;}、省略。
- {scroll-snap-typeスクロール-スナップ-タイプ:合わせ方;}、省略。
- {scroll-snap-alignスクロール-スナップ-アライン:位置;}、省略。
- {scroll-margin-topスクロール-マージン-トップ:幅;}、省略。
- {scroll-margin-rightスクロール-マージン-ライト:幅;}、省略。
- {scroll-margin-bottomスクロール-マージン-ボトム:幅;}、省略。
- {scroll-margin-leftスクロールマージン-レフト:幅;}、省略。
- {scroll-marginスクロール-マージン:-top -right -bottom -left;}、省略。
- {scroll-padding-topスクロール-パディング-トップ:幅;}、省略。
- {scroll-padding-rightスクロール-パディング-ライト:幅;}、省略。
- {scroll-padding-bottomスクロール-パディング-ボトム:幅;}、省略。
- {scroll-padding-leftスクロール-パディング-レフト:幅;}、省略。
- {scroll-paddingスクロール-パディング:-top -right -bottom -left;}、省略。
- {scroll-margin-block-startスクロール-マージン-ブロック-スタート:幅;}、省略。
- {scroll-margin-block-endスクロール-マージン-ブロック-エンド:幅;}、省略。
- {scroll-margin-inline-startスクロール-マージン-インライン-スタート:幅;}、省略。
- {scroll-margin-inline-endスクロール-マージン-インライン-エンド:幅;}、省略。
- {scroll-padding-block-startスクロール-パディング-ブロック-スタート:幅;}、省略。
- {scroll-padding-block-endスクロール-パディング-ブロック-エンド:幅;}、省略。
- {scroll-padding-inline-startスクロール-パディング-インライン-スタート:幅;}、省略。
- {scroll-padding-inline-endスクロール-パディング-インライン-エンド:幅;}、省略。
- {scroll-margin-blockスクロール-マージン-ブロック:幅;}、省略。
- {scroll-margin-inlineスクロール-マージン-インライン:幅;}、省略。

{scroll-padding-block-startスクロール-パディング-ブロック-スタート:幅;}、省略。
{scroll-padding-block-endスクロール-パディング-ブロック-エンド:幅;}、省略。
{scroll-padding-inline-startスクロール-パディング-インライン-スタート:幅;}、省略。
{scroll-padding-inline-endスクロール-パディング-インライン-エンド:幅;}、省略。
{scroll-padding-blockスクロール-パディング-ブロック:-start -end;}、省略。
{scroll-padding-inlineスクロール-パディング-インライン:-start -end;}、省略。

{column-countカラム・カウント:列数;}、段組のレスウスを指定する。
{column-widthカラム-ウィズ:列幅;}、段組の列幅を指定する。
{columnsカラム:-width -count;}、段組の列幅と列数をまとめて指定する。
{column-gapカラム-ギャップ:間隔;}、段組の間隔を指定する。
{column-spanカラム-スパン:表示方法;}、段組をまたがる要素を指定する。
{column-fillカラム-フィル:表示方法;}、段組の内容を揃える方法を指定する。

{column-rule-styleカラム--ルール-スタイル:スタイル;}、段組の罫線のスタイルを指定する。

{column-rule-widthカラム-ルール-ウィズ:幅;}、段組みの罫線のスタイルを指定する。
{colume-rule-colorカラム-ルール-カラー:色;}、段組の罫線の色を指定する。
{colume-ruleカラム-ルール:-style -width -color;}、段組の罫線とスタイルと色をまとめて指定。

{windowsウィンドウズ:行数;}、先頭に表示されるブロックコンテナの最小行数を指定する。
{orphansオーファンズ:行数;}、末尾に表示されるブロックコンテナの最小行数を指定する。

{break-beforeブレイク-ビフォアー:区切り位置;}、ボックスの前後での改ページや区切りを指定する。

{break-afferブレイク-アフター:区切り位置;}、ボックスの前後での改ページや区切りを指定する。

{break-insideブレイク-インサイド:区切り位置;}、ボックス内のカイベージや段区切りを指定する　　。