カテゴリー: PC

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

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 < 768pxは768px > widthでもいい。

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

CSSWeb制作

フォント周りの指定

今指定している仕様。

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

てがろぐでPhotoSwipeを使う

てがろぐの画像拡大表示にPhotoSwipe v5を使う。

  • 投稿内の複数画像をスワイプで切替
  • 「画像クリックで閉じる」オプション
  • 余計なフレームやアニメーション無し
  • △ data属性で画像サイズ指定必須
    • JSで自動付与対応
  • △ マウスホイールで画像切替非対応
    • スクリプト改変で実装

動作サンプル(稼働中のてがろぐ)

続きを読む てがろぐでPhotoSwipeを使う
JSWeb制作てがろぐノート

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

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

のでStylusで消す。

適用前
適用後

CSS適用

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

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

CSSStylusWebブラウズ拡張機能

Calckey小規模サーバ その後

非公開モードで身内用SNSとして快適に運用中。
細かい問題とメンテは、

  • プッシュ通知が来ない
    • 通知設定にプッシュ有効化のボタンが無い。β版インスタンスにはあるので更新を待つ。
  • iOSで撮った動画がPCやAndroidで再生出来ない
    • Misskey同様。.movから.mp4に変換されない為。Calckeyで対応されるかは不明。とりあえずUP前にmp4に変換してもらう。
  • オブジェクトストレージ用サブドメインのSSL証明書更新
    • 一旦手動更新したので以下に記録。次回自動更新に設定。
続きを読む Calckey小規模サーバ その後
CalckeyWeb制作

キーボードとマウスについての所見

思想。

キーボード

  • 入力方式
    • かな入力
      • 一択。外国語2字で母国語1字を出したいと思った事が人生で一度も無い
  • 配列
    • JISかな
      • AHKで記号入力等の弱点を補いつつ使用中
    • 薙刀式
      • 設計思想に共感出来るがまだ実装に支障あり
  • IME
    • ATOK
      • 買い切りが無くなったのでGoogle日本語入力に移行したいが、単体でのカタカナ語英語変換機能が無く断念
  • キー
    • 左右スペースキー必須
      • クソデカスペースキーの意味が分からない。親指の無駄。何軸だろうと最悪の打鍵感
    • かな刻印必須
      • 必要な情報は見えているべき
    • Fキー列必須
      • ほとんどのFキーをよく使う。キーは多い程いい
      • マイナー配列も自作キーボードもタッチタイプの為に使用キーを絞る方向性だが、そもそもキー間隔を狭くして楽に届くようにしたい
  • スイッチ
    • 茶軸→赤軸
    • まだ理想形なし
  • テンキー
    • 分割キーボードの間に24キーマクロキーボード設置
続きを読む キーボードとマウスについての所見
入力機器文章入力

JISかな配列のShiftキー活用

分割キーボードで得たスペースキー2個をAHKでSandS・EandSに設定し、楽にShift入力出来るようになった。
更にShift同時押しが未割当のキーを活用して文字を割り当てる。

Shift割当を変更するキー

ぬふぁぅぇぉゃゅょをほゑー
たてぃすヵんなにらせ゛「
ちとしゎきくまのりれヶ」
っさそゐこみも、。・ろ
  • Shift無しと同じ文字が出るキー
  • 実用度の低いヵ,ゎ,ヶ,ゐ,ゑ
  • 使用頻度が高いが押しにくいっ
続きを読む JISかな配列のShiftキー活用
AHK入力機器文章入力