検証・解説

(テンプレート兼sandbox)
追加は自由、他の人が書いたものを消すのは×

---

目次

---

CSSの検証

CSSの概要

https://wikiwiki.jp/sample/cssbox　より
wikiwikiは一部のCSSボックスを使用することができる。
使用できるもの・使い方は以下
使用できないもの、使用できるが意味の無いものは省いている。

＃⁠cssbox("第一引数",第二引数){{
内容
}}

で使用できる(ダブルクオーテーションに注意)

第一引数でcssの枠の状態を設定することができる。基本的に
「プロパティ名:項目1 項目2 項目3 ... ;」
というように、設定したい項目を置き、コロンの後に半角スペースで区切りながら色や大きさなどを指定していく

使用できるcssプロパティと記載方法は以下

(CSSの中身を第２引数にテキストを置くことで表示させることもできる。ほぼ使わない)

数値について

length値(percentage値)

px(絶対)...ディスプレイの画素「ピクセル」を基準
rem(相対)...デフォルトのフォントサイズ分(??px)
%(相対)...親要素の幅 or 高さを基準

活用できるかもしれないもの(そもそも使える？要検証)
vw...画面の横幅を基準。1vwで画面の横幅の1%
vh...画面の縦幅を基準
vmin...画面の横幅と縦幅、狭い方を基準
vmax...画面の横幅と縦幅、広い方を基準
ch...'0'の幅を基準

基準

枠(形はsolid)で囲うプロパティを設定した。これを基準とする(水平線で挟んだ中に置く)

---

---

以下書式

#cssbox("border:solid;"){{
ログが建てたログハウスでアルカイドが食べてたパラが作ったパラパラチャーハンまだアルカイ？
}}

また、ボックスは基本的に外側から、
margin(外側の余白)→border(枠)→padding(内側の余白)→contents(要素)
で構成されている

margin

margin重要度☆3

外側の余白の大きさに関する設定。この数字をいじるとcssを重ねることができる

---

---

以下第一引数

border:solid; margin:20px;
(4辺に20pxの空白を枠の外に設定する)

項目には開けたい寸法を入力する

margin-bottom　(※下)
margin-left　(※左)
margin-right　(※右)
margin-top　(※上)
で個別に設定もできる

その他

• margin-trim
  隣接する別のボックスの空白を切り取る？
  実装方法不明がよく分からないのでわかる人教えてください

padding

padding重要度☆3

枠と内側のコンテンツの間の余白。余白を作る位置が違うだけで"margin"と"padding"はほぼ同じ

---

---

以下第一引数

border:solid; padding:20px;
(4辺に20pxの空白を設定する)

項目には開けたい寸法を入力する

padding-bottom　(※下)
padding-left　(※左)
padding-right　(※右)
padding-top　(※上)
で個別に設定もできる

その他

• padding-trim
  隣接する別のボックスの空白を切り取る？
  実装方法不明がよく分からないのでわかる人教えてください

border-枠-

border重要度☆3

枠の線。幅,形,色を決めることができる

---

---

以下第一引数

border:medium dotted red;
(普通の太さの赤色の点線を設定する)

項目には幅,形,色を入力する。

border-bottom (※下)
border-left (※左)
border-right (※右)
border-top (※上)

位置で個別に設定もできる。

border-width (※幅)
border-style (※種類)
border-color (※色)
で種類ごとに個別に設定もできる。

数が多いため一つずつ解説する

border-width重要度☆3

枠線の幅。

幅(width)の場合の項目

→さらに個別に設定もできる
border-top-width (※上)
border-right-width (※右)
border-left-width (※左)
border-bottom-width (※下)

border-style重要度☆3

形(style)の場合の項目

→さらに個別に設定もできる
border-top-style (※上)
border-right-style (※右)
border-left-style (※左)
border-bottom-style (※下)

border-color重要度☆3

色(color)の場合の項目

→さらに個別に設定もできる
border-top-color (※上)
border-right-color (※右)
border-left-color (※左)
border-bottom-color (※下)

border-radius重要度☆2

角丸処理。値を大きくする程丸くなる

---

---

以下第一引数

border:solid; border-radius:10px;
(4辺に10pxの半径の円の角ができるように設定する)

項目には円の半径の大きさを入力する

スラッシュ(/)で区切ることで、値1で横のサイズ、値2で縦のサイズを指定することができる。

border-top-left-radius (※左上)
border-top-right-radius (※右上)
border-bottom-left-radius (※左下)
border-bottom-right-radius (※右下)
で個別に設定もできる

border-image重要度☆1

枠線に画像(image)を貼ることができる。wikiwikiはurlに対応していないので、gradientのみ使用できる。
border-styleの指定が必須
border-radiusは同時に使用不可。

---

---

以下第一引数

border:solid 10px;border-image: radial-gradient(black, white) 20;
(枠は10pxの太さの四角形。枠線に黒から白へ変化する円形グラデーションを上下左右から20pxの位置で区切り貼り付ける)

項目には画像(グラデーション)、スライス位置、幅、画像がはみ出す幅、辺領域の表示方式を入力する

辺領域の表示方式項目は以下の4種類

スライス位置、幅、画像がはみ出す幅を一度に記述する場合スラッシュ(/)で区切る必要がある。
グラデーションの場合、画像の幅が不明なのでスライスがどこから切るのかは不明
横が切れないギリギリだと綺麗になる？

border-image-source (※画像(グラデーション))
border-image-slice (※スライス位置)
border-image-width (※幅)
border-image-outset (※画像がはみ出す幅)
border-image-repeat (※辺領域の表示方式)
で個別に設定もできる

その他

• border-collapse,border-spacing
  恐らく使えない
  実装方法不明がよく分からないのでわかる人教えてください

background-背景-重要度☆3

枠の中の背景。色、画像、原点と寸法、反復方法などを指定する。

---

---

以下第一引数

border:solid;background:#c9fcfc;
(背景を水色にする)

色、画像、原点と寸法、反復方法などを指定する。

background-attachment(画面スライドによる背景の移動)
background-clip(背景の適用範囲)
background-color(背景色の設定)
background-image(背景画像の設定)
background-origin(背景画像の表示領域の基準位置)
background-position(背景画像の基準位置)
background-repeat(背景画像の繰り返し)
background-size(背景画像の寸法調整)
で個別に設定もできる

background-positionはさらに、
background-position-x (背景画像の基準位置(座標指定))
background-position-y (背景画像の基準位置(座標指定))
で個別に設定もできる

数が多いため一つずつ解説する。

background-attachment重要度☆2

画面スライドによる背景の移動方式。

(※スクロール機構は使用できないためlocalとscrollは変わらない)

background-clip重要度☆1

背景がどこまで表示されるか。背景の適用範囲。

background-origin重要度☆1

背景がどこから表示されるか(左上の位置を指定する)。背景画像の表示領域の基準位置。
background-attachment が fixed のときは background-origin が無視される。

background-color重要度☆1

(背景色の設定)
色を指定する。以下のようなものが使用できる

background-image重要度☆5

背景画像を指定する。urlは使用できないためgradientのみ使用できる。
サンプルがネットにごろごろ転がっているので色々試してみよう

---

---

以下第一引数

border:solid ;background:linear-gradient(to right ,blue , white);
(左から右へ、青から白の線形グラデーションを作成する)

以下のようなものが使用できる

反復はボーダー柄を作ることができる

括弧の中身は、基本的には、(開始色,終了色)と記述する。
さらに、(色が変わっていく方向や角度, 開始色, 次の色, 次の色, ... , 終了色)のようにすることで細かく決めることもできる。

グラデーションの中で色が切り替わる位置を指定することができる
色の後ろに%やpxを指定すると、「色経由点」を変更できる。指定しない場合等間隔に変化する
最初が0%、最後が100%になるように調整する
放射・線形グラデーションの場合のみpxなどの絶対数値を指定できる

値が一つの場合

値が二つの場合、色の開始始点と終了地点を決めることができ、色の境目がはっきりと表示される方式になる

linear-gradientの場合色が変わっていく方向や角度を指定できる

radial-gradient、conic-gradientの場合、中心位置の指定・円の形・円の大きさを指定可能
(形状およびサイズ at 中心位置, 開始色, 次の色, 次の色, ...)となる

円の形・サイズ

中心位置の指定

conic-gradientの場合、開始角度を指定可能

また、通常はグラデーションの中間地点はそれぞれの色の中間がデフォルトだが、色の間に%割合を指定することで制御することができる。

また、グラデーションを重ねることもできる。(重ねる場合はbackground-blend-modeを要確認)

---

background-position重要度☆1

背景画像の基準位置を設定できる。位置は background-origin が考慮される
移動によって開いた部分の挙動はbackground-repeatによって決まる

---

---

以下第一引数

border:solid ;background:radial-gradient(blue , white) bottom 20px right 100px;
(下から20px,右から100pxの位置を基準にする。(空白になった部分(右)は繰り返されている))

background-repeat重要度☆1

背景画像の繰り返し方式。グラデーションの場合、ボックス全体に表示されるのでこれを設定する必要は特にない？

値が二つの場合、水平方向-垂直方向と指定される

background-size重要度☆1

背景画像の寸法調整。

また、幅-高さと指定することもできる。(auto,%,pxなどが使用可能)

background-blend-mode重要度☆2

要素との色の混合方式背景画像(image)や背景色(color)とどのように混合されるかを指定する。全部で16種類と多いので以下のサイトを参考。
https://developer.mozilla.org/ja/docs/Web/CSS/blend-mode#normal
https://ics.media/entry/7258/

キーワード以下

normal,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity

その他

width,height重要度☆3

横幅、縦幅の設定。

---

---

以下第一引数

border:solid;width:200px;height:200px;
(横幅200px、縦幅200px)

値には%,pxなども使用できる

また、min-width(min-height)で最低幅(高さ)、max-width(max-height)で最大幅(高さ)を設定できる。

text-align,vertical-align重要度☆3

内部コンテンツの水平・垂直方向の位置を設定する。
(CENTER:でいつものように中央寄せできるのであまり関係ない)
vertical-alignを使うとborder-radiusが消える(なんで？)

text-align(水平方向)

vertical-align(垂直方向)

---

---

以下第一引数

border:solid;width:auto;height:100px;text-align:center;vertical-align:middle;
(上下中央に寄せる)

CSSの例

以下書式
margin: -6px auto auto auto; padding:1rem; border:inset 3px #5e79b6; border-radius: 0rem 0rem 1rem 1rem;background:radial-gradient(circle at 100% 100%, #330077, transparent), radial-gradient(circle at 0% 0%, #05f7f7, transparent) ;background-attachment:local;background-blend-mode:color-dodge;width:fit-content;height:auto;text-align:center;

• margin: -6px auto auto auto;
  上に-6px分ずらし(こうすることで章とくっつく)、左,右,下は自動
• padding: 1rem;
  内側のコンテンツ(今回は文章)を枠から1rem分開ける
• border:inset 3px #5e79b6;
  要素が埋め込まれて見える#5e79b6色の線を太さ3pxで表示
• border-radius: 0rem 0rem 1rem 1rem;
  枠の角を取る。 左上:0 右上:0 右下:1rem 左下:1rem
• background:radial-gradient(circle at 100% 60%, #330077, transparent),radial-gradient(circle at 0% 0%, #05f7f7, transparent);
  背景をグラデーションの画像を貼る。
  ①左から100%、上から100%の位置を中心に#330077→透明(transparent)の円形グラデーションを配置する。
  ②左から0%、上から0%の位置を中心に#05f7f7→透明(transparent)の円形グラデーションを配置する。
• background-attachment:local;
  要素の内容に対する相対位置で固定されるように設定
• background-blend-mode:color-dodge;
  色の混合方式をcolor-dodgeにする
• width:fit-content;
  幅を内容に合う大きさにする
• height: auto;
  枠の高さを要素がはみ出ない最低の高さにする
• text-align:center;
  テキストを中央寄せする

vote2検証

投票する？

容量の大きいgifを無理やり乗せる

活用方法は不明

直接添付だと動かない

table editの検証

• 実装されている全楽曲についての情報を記載しています。
• PCでの全画面表示・モバイルでの横画面表示を推奨します。
• ヘッダー横の二つの小さい三角のボタンを押すと、対応する項目を並び替えることができます。
• 空欄の情報は埋めて頂けると助かります。
• 譜面定数は以下の通りです。
• 小数点以下の値は9以上の難易度で確認されています。
  8から12までの難易度は.0と.5の2種類、
  13以上の難易度は.0から.9までの10種類確認されています。
  ‐現在対応バージョン:3.10
• 通常の並び方は全曲一覧でのデフォルトの並びです。
   

• 楽曲情報収集のお手伝い募集
  以下のリンクで、楽曲情報をまとめています。アップデートの際、楽曲情報の補完を手伝っていただける方は以下のリンクから編集申請して編集していただけると各楽曲ページの作成がスムーズになるため非常にありがたいです。
  https://docs.google.com/spreadsheets/d/17cZ63khqX81K0bQ98qSJpwWH_0aTgy5hzjrvp-CRemM/edit?usp=sharing

---

コメント