li::after でマーカー変化他

li 要素に疑似要素 ::after を付けてマーカーを出現させるだけでなく、他の要素や :hover 疑似クラスとも組み合わせ、変化させてみた。

dl/dt/dd 要素で表作成

table 要素を使って表を作成するのは当たり前である。しかし、項目と値のペアが短い場合と長い場合が混在する場合、１行に th 要素が複数あるのは何か変である。しかも table 要素では、スマホ用表示の際に行の中のセルの数を減らすわけにはいかない。

そこで dl/dt/dd 要素で表を作成し、メディアクエリーでの項目・値のセット減少に対応させた。

氏名

R. Daneel Olivaw

性別

無性

〒

100-0000

都道府県

東京都

住所

千代田区○○○１－１－１

ちなみに上の表は次のように変形する（スマホで見た場合、画像が小さくなって見にくいが......）。

transform: translate(値) で中央配置

親要素の中央に子要素を配置する方法はいくつかあるが、transform: translate(値) での方法を試してみた。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

条件は、

• skyblue の太枠の横幅は 90%、本来の高さ 50vh（このページで作図する都合で実際には 300px に設定）。
• slategray の部分の高さは 50px。
• figure 要素で作成する内側の黒枠の幅は skyblue の枠の 80%。
• 内側の枠をページュの部分の上下左右の中央に配置。

この条件では、ベージュ部分の本来の高さは calc(50vh - 50px) であり、vh なので端末によって高さが変わるが、ベージュ部分の上端、下端とのマージン、左端、右端とのマージンを等しくするというお題である。

そこで考えたのが次のソース。

• div class="outer" に position: relative
• figure lass="inner" に position: absolute

を適用するのは当然として、子要素に top: calc(25vh + 25px)、left: 50% で端との距離を指定しただけでは figure 要素として X軸（左右）、Y軸（上下）の中央にはならない。左上が中央になってしまうのである。それを補整するのが、

• transform: translate(-50%,-50%)

である。translate 関数の値を % で指定した場合は、要素自身の大きさに対するパーセンテージ となる。なお、translate 関数には translateX、translateY、translateZ、translate3d という兄弟が存在する。

ul/li 要素で細い罫線の枡目

ul/li 要素で表を作成し、しかもその内側の罫線を細く表示する、というお題（下の表）で CSS を考えてみた。

• ul 要素に対して 左右の margin を auto、padding は 0、マーカー無し、flexbox 適用（改行可）
• li 要素に対して padding が 0、太さ 1 px の黒の実線で border、おまじないの box-sizing: border-box

まではすぐにわかった。しかしそのままでは内側の罫線が太くなってしまう。その対策は......

１列目と２列目の li 要素の border-right を対象にするセレクタは ～:nth-of-type(3n+○)であろう。

問題は３番目の li 要素までを対象とするセレクタである。:nth-of-type の引数をどう記述したら良いのだろうか？　思い浮かばなかったのでネット検索したら、なんと「(-n+3)」が答えであった。こんな指定の仕方があったとは......３番目以降ならば (n+3) だから、その逆という訳か(^^;;;

hover すると沈むハイパーリンク・ボタン

ボタンの上にマウスカーソルを hover するとそのボタンが沈み込むようにするにはどうしたらよいか？、という質問が某 Q&A サイトに投稿されたので調べてみた（私が食事をしたり少し調べている間になぜか質問が削除されてしまった）。

• Yahoo!
• Google

ボタンはおそらくハイパーリンクの a 要素を display: block でボタン化したものであろう。ボタン化することにより、文字のない padding 領域をクリックしてもハイパーリンクが機能するようになる。「hover すると」は「:hover」疑似クラスの利用であろう。そこまではすぐにわかったが、どうやったらボタンが沈むのか？

ネット検索した結果、タネ明かしは

• box-shadow プロパティによる影
• transition プロパティによる遅延
• transform: translate3d(～) プロパティによる変形

の利用であった。解説したサイト（複数）では影の色は常識的に「#000（black）」であったが、私は「transparent（透明）」に変えてみた。

counter-increment プロパティの利用

ol/li 要素での番号付リストの場合、text-align: center でセンタリングすると、マーカーとの間に異様な隙間ができてしまう。ul/li 要素での番号なしリストでも同じである。

1. テキストテキストテキスト
2. テキストテキストテキストテキストテキスト

counter-increment プロパティを使うとその問題を解決できる。数字の前や後ろに文字を付加することも出来る。

ポイントは、

1. 準備として li 要素のマーカーを消し、幅（width）を fit-content にしておく。
2. counter-increment と counter 関数の値に共通の適当な名前を付ける。ここでは「eel」にしたが、全角文字でも構わない。
3. 疑似要素「::before」を利用し、content プロパティの値である counter 関数の前後にダブルクォテーションで括って付加したい文字列を指定する。

複合 counter-increment プロパティ

目次での利用を想定して counter-increment プロパティを複合して使えないかと考えた。ネットを検索して二重利用は見つけたが、外側の ol 要素の値を継承して１番目の値とする用法は見つけられなかった。そこでごちゃごちゃやっていたら......成功してしまった(^^;;;

ポイントは、

1. 外側のol 要素に対しては、counter-increment プロパティと counter 関数、::before 擬似要素で連番を作成する（「counter-increment プロパティの利用」参照）。
2. 内側の ol 要素に対して counter-increment プロパティを２つ定義、１つ目の値を外側のと同値＋「0」（数字のゼロ）にする。
3. 内側 ol 要素の li::before に対して、「-」を挟んで counter 関数を２つ使用する。

• 結果の表示に関しては、スマホでの表示スペースの都合で counter-increment に関係ないレイアウト系 CSS を追加した。

table 要素の列固定

表を作成しているときに、セルの横幅の合計が、main 要素の横幅よりも大きくなってしまった！なんて時に、昔は JavaScript を使っていたそうである。しかし、position: sticky というへんてこりんな宣言（プロパティ＋値）が使えるようになったおかげで、私にも列固定ができるようになった。

なお、この宣言を使った場合、left: 0 も指定しないと、縦スクロールに追随してくれないので注意。

• CSS の最後にある疑似要素 ～::before 以下が無くても列固定としては動作するが、これを付けないと、左罫線がチラチラすることを教えてくれたサイトがあった。