ゆう's Blog
stroke-width

指定しない場合 → 1px が自動適用される
SVG の仕様で、線幅はスケールに影響されません

width/height を変えても stroke-width は変わらない
viewBox を使っても stroke-width は変わらない
transform="scale()" を使っても stroke-width は変わらない
SVG の線幅は常に「画面上のピクセル基準」で描かれる

<line> を <rect> で代用すること自体は技術的には可能で、実際に UI デザインやアイコン制作の現場でも「線を太くしたい」「スケールに応じて線幅も変わってほしい」という理由で使われることがあります。

SVG はデフォルトで 中央寄せ & アスペクト比維持 の表示を行う

・viewBox と実際の width/height の比率が違うと、自然にセンタリングされたように見える

・挙動は preserveAspectRatio で自由に変更できる

font-family リスト

英語名だけで書く。
日本語環境でも英語名で問題なく動作する。

日本語名で書くのは良くない。
日本語名は OS 言語依存で、CSS が認識しないことが多い。
CSS が参照するのは「内部名(英語名)」であり、日本語名は一致しないことが多い。

font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", "Yu Gothic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

font-family に列記された候補のうち、どれが実際に描画に使われているか。

開発者ツールで確認する方法(Chrome / Edge / Firefox 共通)

1. 調べたい文字を右クリック →「検証」
ブラウザの開発者ツールが開きます。

2. Elements(要素)パネルで該当の要素を選択

3. Styles ではなく「Computed」タブを開く
ここに 実際に適用された CSS の最終結果 が表示されます。

4. 「Rendered Fonts(使用フォント)」を探す
Chrome / Edge / Firefox には 実際に描画に使われたフォント名 が表示される専用欄があります。

Chrome → Rendered Fonts
Firefox → Fonts
Edge → Rendered Fonts
Safari → Fonts(開発メニューを有効にすると表示)
ここに その要素の中で実際に使われたフォント名とフォントファイル が表示されます。

SVGをそのままファビコンとして埋め込む

<link rel="icon" href="data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='red'/></svg>" type="image/svg+xml">

<link rel="icon" href="data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='%23ff0000'/></svg>" type="image/svg+xml">

ポイント:
# → %23
" → %22(属性値の中で使うなら ' で囲むとエスケープ不要になることも)
スペース → %20(気をつけるべきは「属性値の中」と「テキストノードの中」のスペース。それ以外の構文上のスペースは、そのままで大丈夫。)

なので、viewBox='0 0 100 100' の中のスペース
0 0 100 100 → 0%200%20100%20100 にするのが安全!

文字をキーボード風に装飾する

コピーするには Ctrl + C を押します。

kbd { display: inline-block; padding: 2px 6px; margin: 0 2px; border: 1px solid #ccc; border-radius: 4px; background: #f7f7f7; box-shadow: 0 1px 0 #e0e0e0; font-size: 0.9em; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

<p>コピーするには <kbd>Ctrl</kbd> + <kbd>C</kbd> を押します。</p>

<kbd> は HTML に用意されている “キーボード入力を表すためのタグ” です。
「ユーザーがキーボードで押すキー」や「ショートカット」を示すときに使うための、意味づけされた要素です。

<kbd> の役割
意味(セマンティクス)を持つタグ → 「ここはキーボード操作を表している」とブラウザや支援技術に伝えられます。
デフォルトでは特別な見た目はほぼありませんが、CSS で自由に装飾できます。
HTML5 で正式に定義されている要素です。

box-sizing

box-sizing: content-box; (初期値)
box-sizing: border-box;

厚生年金基金(加算部分)/企業年金連合会
項目老齢厚生年金厚生年金基金(加算部分)/企業年金連合会
繰下げ増額される増額なし
遅らせた場合金額が増える過去分が初回にまとめて支給
請求時期の自由度66〜75歳まで繰下げ可65歳以降いつでも請求可
老齢厚生年金との連動ありなし(別々に請求)

老齢厚生年金を繰り下げるなら、老齢厚生年金を請求する時に基金も請求して問題ありません。 金額は変わらず、過去分もきちんと受け取れます。

SVG に テキストを追加する

ここにテキスト

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 60" style="width:60%; height:auto;"> <rect x="1" y="1" rx="10" ry="10" width="466" height="58" stroke="black" stroke-width="2" fill="khaki"/> <text x="10" y="30" fill="black" font-size="16">ここにテキスト</text> </svg>

水平中央テキスト

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 60" style="width:60%; height:auto;"> <rect x="1" y="1" rx="10" ry="10" width="466" height="58" stroke="black" stroke-width="2" fill="khaki"/> <text x="50%" y="30" text-anchor="middle" fill="black" font-size="18">水平中央テキスト</text> </svg>

上下中央テキスト

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 60" style="width:60%; height:auto;"> <rect x="1" y="1" rx="10" ry="10" width="466" height="58" stroke="black" stroke-width="2" fill="khaki"/> <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-size="18" fill="black"> 上下中央テキスト </text> </svg>

サンプルテキスト

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 60" style="width:60%; height:auto;"> <rect x="1" y="1" rx="10" ry="10" width="466" height="58" stroke="black" stroke-width="2" fill="khaki"/> <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-size="18" fill="#222" font-family="Noto Sans JP, sans-serif" font-weight="600"> サンプルテキスト </text> </svg>

su を使えるユーザー,使えないユーザー

Fedora で su できるユーザー と su できないユーザー を作る方法は、「wheel グループ」に所属させるかどうかで決まります。
Fedora では wheel グループに属するユーザーだけが su を使える という設定がデフォルトで有効になっています。

wheel グループに追加(su を許可)
$ sudo usermod -aG wheel username

wheel グループから削除する
$ sudo gpasswd -d username wheel

確認
$ groups username

wheel グループのユーザー一覧を確認する
getent group wheel

出力例:
wheel:x:10:root,user1,user2
カンマ区切り部分が wheel グループのメンバーです。