メディアクエリ範囲指定の新構文

CSSのメディアクエリを比較演算子での指定に更新。

  • 幅768px以上
    • 旧 @media (min-width: 768px)
    • 新 @media (width >= 768px)
  • 幅768px未満
    • 旧 @media (max-width: 767px)
    • 新 @media (width < 768px)
  • 幅768px以上1280px未満
    • 旧 @media (min-width: 768px) and (max-width: 1279px)
    • 新 @media (768px <= width < 1280px)

書きやすいし分かりやすい。width < 768px768px > widthでもいい。

対応が遅れていたSafariも2023年3月に対応した。
Media Queries: Range Syntax | Can I use

フォント周りの指定

今指定している仕様。

  • font-family (混植)
    • 和文フォントに游ゴシック、ヒラギノ
    • 欧文フォントにSegoe UI
    • 三点リーダに和文フォント
      • 欧文フォント指定で三点リーダが下付きになる対策
  • font-feature-settings: “palt”
    • 読みやすい文字詰め
  • letter-spacing: .5px
    • でも詰まりすぎなので少し空ける
    • NotoSansでは空きすぎるのでPCのみに適用
  • text-shadow: 0 0 #(淡色)
    • Winで游ゴシックが細くなる対策
  • word-break: break-all
    • 要素の右端でのみ自動改行する
続きを読む フォント周りの指定

プライムビデオの吹替版を非表示

  • 吹替は観ない
  • 一覧に同じ映画の字幕版と吹替版が出てくる
  • カーソルを合わせないと字幕か吹替か分からない

のでStylusで消す。

適用前
適用後

CSS適用

article[data-card-title$="(吹替版)"],
article[data-card-title$="(吹替版)"] {
    display: none;
}

単純にカード名を取っているので、表記無しや字幕・吹替の両対応は消さない。

class指定付きnth-child

指定クラスを持つ要素のn番目、奇数・偶数個などの条件で装飾する。

課題

SNSのTLで投稿の背景色を交互に変えたい。
兄弟要素が投稿のみの場合はdiv.xxx:nth-of-type(odd):nth-child(odd)で奇数の投稿を指定可能。
(odd又は2n+1で奇数、even又は2nで偶数)
投稿の間に何らかの要素が入る場合、カウントは兄弟要素全てが対象となりdiv.xxxの奇数は取れない。
(div.nth-of-typeは兄弟要素のdivがカウント対象、div:nth-childは全ての兄弟要素がカウント対象)

続きを読む class指定付きnth-child

Calckeyに全ユーザ用CSSを適用する

Calckey自鯖の全ユーザにカスタムCSSを反映させる。
コントロールパネルに機能追加されるまでの暫定対応。

自分のみ適用したいCSSはChrome拡張機能StylusやCalckeyユーザ設定のカスタムCSSを使用する

構築と基本設定 身内用Calckey鯖を無料で立てる

CSS作成

  • CalckeyのカスタムCSS機能はBetterDiscordの様にライブプレビュー出来ないので、Stylusで作成する
    • 適用URLを追加して他のCalckeyサーバにも使える (Misskeyには使用不可)
  • !importantをつけまくる
続きを読む Calckeyに全ユーザ用CSSを適用する

WordPressで定義リストdlを使う

2カラム・内容に応じてサイズ可変のリストを、スペース連打やテーブルを使わずに作りたい。

dl(定義リスト)のグリッド化で実装。

食べる
野菜
食べない
<dl class="grd">
  <dt>肉</dt>
  <dd>食べる</dd>
  <dt>野菜</dt>
  <dd>食べない</dd>
</dl>
dl.grd
	display: grid
	grid-template-columns: max-content 1fr
	column-gap: .5em

シンプルで理想的だが、WordPressで使えるリストブロックはolulのみ。
dlを作成出来るプラグインを探す。

続きを読む WordPressで定義リストdlを使う