目次(クリックでジャンプ)
2020春
標準コンテナに入れることを想定(フレックスの中央寄せ)。幅は未設定左右のマージンを画面vwに応じて変化させる(N-boxのパディングと同数値)。フォントの大きさも画面vwに応じて変化させる(N-boxよりも傾きを大きく切片を小さく)
2020晩秋
デフォルトのテーブル
角丸、幅の調整、フォントの調整を行った状態
| 1 | 2 | 3 | 4 | |
| A | A1 | A2 | A3 | A4 |
| B | B1 | B2 | B3 | B4 |
カスタムテーブル
CSSで「D-tbl1」を設定。
行に上下のボーダーのみ設定。はじめの行とおわりの行はボーダーを調整
奇数行(nth-of-type(2n+1))の背景とボーダー色を変える。はじめの行はさらに背景とボーダー色を変える。
セル(td,th)のボーダーをクリア。左右のみにボーダーを設定して、左右両端のセルはボーダーを調整
配置した例
| 主格 (～が) |
所有格 (～の) |
目的格 (～を) |
所有代名詞 (～のもの) |
|
| 私 | I (アイ) |
my (マイ) |
me (ミー) |
mine (マイン) |
| あなた | You (ユー) |
your (ユア) |
you (ユー) |
yours (ユアーズ) |
| 彼 | He (ヒー) |
his (ヒズ) |
him (ヒム) |
his (ヒズ) |
| 彼女 | She (シー) |
her (ハー) |
her (ハー) |
hers (ハーズ) |
後置の文章。後置の文章。後置の文章。後置の文章。後置の文章。後置の文章。
ハイライトしたい行にはクラス「Hi」設定(奇数処理は自動で)。2行目と3行目にハイライトを設定している。
| 主格 (～が) |
所有格 (～の) |
目的格 (～を) |
所有代名詞 (～のもの) |
|
| 私 | I (アイ) |
my (マイ) |
me (ミー) |
mine (マイン) |
| あなた | You (ユー) |
your (ユア) |
you (ユー) |
yours (ユアーズ) |
| 彼 | He (ヒー) |
his (ヒズ) |
him (ヒム) |
his (ヒズ) |
| 彼女 | She (シー) |
her (ハー) |
her (ハー) |
hers (ハーズ) |
イイネイイネ！
チョーキレイダ♪