指定しない場合 → 1px が自動適用される
SVG の仕様で、線幅はスケールに影響されません
width/height を変えても stroke-width は変わらない
viewBox を使っても stroke-width は変わらない
transform="scale()" を使っても stroke-width は変わらない
SVG の線幅は常に「画面上のピクセル基準」で描かれる
<line> を <rect> で代用すること自体は技術的には可能で、実際に UI デザインやアイコン制作の現場でも「線を太くしたい」「スケールに応じて線幅も変わってほしい」という理由で使われることがあります。
・viewBox と実際の width/height の比率が違うと、自然にセンタリングされたように見える
・挙動は preserveAspectRatio で自由に変更できる
英語名だけで書く。
日本語環境でも英語名で問題なく動作する。
日本語名で書くのは良くない。
日本語名は 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;
開発者ツールで確認する方法(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(開発メニューを有効にすると表示)
ここに その要素の中で実際に使われたフォント名とフォントファイル が表示されます。
<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: content-box; (初期値)
box-sizing: border-box;
| 項目 | 老齢厚生年金 | 厚生年金基金(加算部分)/企業年金連合会 |
| 繰下げ | 増額される | 増額なし |
| 遅らせた場合 | 金額が増える | 過去分が初回にまとめて支給 |
| 請求時期の自由度 | 66〜75歳まで繰下げ可 | 65歳以降いつでも請求可 |
| 老齢厚生年金との連動 | あり | なし(別々に請求) |
老齢厚生年金を繰り下げるなら、老齢厚生年金を請求する時に基金も請求して問題ありません。
金額は変わらず、過去分もきちんと受け取れます。
<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>
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 グループのメンバーです。