JavaScriptなしで、transform / perspective / layered shadows と CSSカスタムプロパティ だけで
“パッ”と目を引く3Dカードを作成してみましょう。
さらに Shadow DOM 内でも同じ見た目を再現できるよう、::part() と変数で拡張可能にします。
ゴール（できあがりイメージ）
デモ：CSSとHTMLだけで作る3DカードUI
💡 マウスを乗せるとカードがわずかに傾き、立体的な効果が確認できます。
最小HTML（ライトDOM版）
コアCSS（ライトDOM版）
Shadow DOM に対応させる考え方
ポイントは 「パーツを切り出す」 と 「CSS変数でテーマ化」。
外側（ライトDOM）から Shadow DOM 内を直接スタイルできないため、コンポーネント作者が part を付与し、利用者は ::part() で装飾、色や半径は CSS変数で調整します。
Web Component 側（作者向け：影DOM内のテンプレ）
※ここでは概念を示すための HTMLスケッチ です。実際の ShadowRoot 作成は JS が必要ですが、スタイル設計の指針としてご覧ください。
利用者側（外部）からのテーマ上書き例
まとめ：
デザインバリエーション（クラス追加だけ）
アクセシビリティと実用Tips
-
ボタン／リンクのヒット領域は最低44×44pxを意識（paddingで確保）
-
prefers-reduced-motion に配慮（すでに対応）
-
コントラスト：oklchやcolor-mix()で暗所・明所どちらも読みやすく
-
画像のalt を適切に
-
フォールバック：古い環境では oklch が未対応 → 代替色を上書き可能に
よく使うCSSカスタムプロパティ（外から上書きOK）
| 変数名 | 役割 | 例 |
| --card-bg | 背景色 | #fff / #111 |
| --card-fg | 文字色 | #111 / #eee |
| --card-accent | CTAなどの強調色 | oklch(0.78 0.17 30) |
| --card-radius | 角丸 | 12px / 20px |
| --card-shadow-1 | 影レイヤ(近) | 0 1px 2px rgba(0,0,0,.2) |
| --card-shadow-2 | 影レイヤ(遠) | 0 8px 24px rgba(0,0,0,.12) |
| --card-border | 境界線 | 1px solid rgba(0,0,0,.06) |
| --card-tilt | 傾き(通常) | rotateX(5deg) rotateY(-6deg) |
| --card-tilt-hover | 傾き(ホバー) | rotateX(6.5deg) rotateY(-10deg) |
| --card-gloss | ハイライト | linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 45%, transparent 60%) |
| --card-gloss-size | ハイライトサイズ | 200% 200% |
トラブルシュート
-
立体感が弱い → --card-tilt と影（--card-shadow-2）を強める
-
グロスが強すぎる → --card-gloss の不透明度を上げる（=白を薄く）
-
画面酔い → prefers-reduced-motion 環境で確認、もしくはカードに .is-outline を付与
-
Shadow DOM で色が変わらない → 変数は ホスト（custom element）側に定義しているか確認
まとめ
| 項目 | ポイント |
| 3D表現 | transformとperspectiveで奥行きを演出 |
| 輝き | ::beforeのグラデとbackground-positionで流し込み |
| 配色 | oklchとcolor-mixでライト/ダーク両対応 |
| アクセシビリティ | prefers-reduced-motionと十分なヒット領域 |
| Shadow DOM | 作者はpart公開&変数化/利用者は::part()と変数上書き |
| 拡張 | クラス追加でelevated/glass/outlineを切替 |
HTMLで番号付きリストを表示するのは<ol>タグの中に<li>タグを記述することで表現できますが、<ol>タグにreversed属性やstart属性、type属性を付与することで表示される番号を操作することが出来ます。
<ol>タグに何も属性付けない場合
HTML
|
|
<ol> <li>パソコン</li> <li>テレビ</li> <li>ソファー</li> </ol> |
表示結果
- パソコン
- テレビ
- ソファー
<ol>タグにreversed属性を付けた場合
HTML
|
|
<ol reversed=""> <li>パソコン</li> <li>テレビ</li> <li>ソファー</li> </ol> |
表示結果
- パソコン
- テレビ
- ソファー
<ol>タグにstart属性を付けた場合
HTML
|
|
<ol start="2"> <li>パソコン</li> <li>テレビ</li> <li>ソファー</li> </ol> |
表示結果
- パソコン
- テレビ
- ソファー
<ol>タグにtype属性を付けた場合
HTML
|
|
<ol type="A"> <li>パソコン</li> <li>テレビ</li> <li>ソファー</li> </ol> |
表示結果
- パソコン
- テレビ
- ソファー
JSPのコメント文とHTMLのコメント文の違いについてまとめておきます。
JSPのコメント
HTMLのコメント
さて、両者の違いとは何でしょうか。
見た目大して変わらないしどっちでもいいんじゃない。というのは大きな間違いで、HTMLのコメント文はサーブレット変換時にコメントも「out.println()」によってクライアントに対して出力されてしまいます。要はそのページを表示して右クリックなどから「ソースコードを表示」などを選択するとそのコメント文もクライアント側から確認可能となります。
対してJSPのコメント文はソースコードを表示してもクライアント側から確認する事は出来ません。
使い分けとしては、そのページの開発者サイドにのみ伝えておきたい内容などは「JSPのコメント文」、そのページを閲覧するクライアント側がソースコードを確認した時に伝えたい内容は「HTMLのコメント文」というように使い分けましょう。
HTMLを作成する時に悩む、<b>太字タグと<strong>論理強調タグの違いについてメモしておきます。
この二つは表面上はよく似ていて、どちらも太字になります。
ですが<b>タグは単に太く見えるだけで単なる一般的な太字ですが、<strong>タグは検索エンジンなどにおいて、特別な意味を持ったタグとなります。
検索エンジンなどで注視させたい場合などは<strong>タグを用いると良いでしょう。
逆に<b>タグは単なる太く見えるだけのタグなので、文章の中で読者に対して注視させたい場合に用います。
私の場合は以前よくSEOの観点から<strong>タグを活用していました。
メタタグなどよりは多少の効果はあるようで、特定の検索ワードで上位になることも多かったです。
今は時間的に余裕がなく面倒なので、あまり文章内の特別な編集は殆どしていませんが、多少の効果があるという事は確かなようです。
他にもメタタグなど色々なタグがHTMLにはありますが、<b>タグや<strong>タグは初心者でも簡単に用いる事が出来ると思うので、うまく活用すると良いかもしれません。
CSSでスタイルを設定していると「margin」と「padding」の基礎知識が曖昧だと使用する際に混乱しがちなので今回は両者の違いをまとめてみます。
marginとpaddingの関係図
marginの特徴
- borderの外側にスペース（余白）が設けられる
- スペース（余白）に背景色は適用不可
- marginに負数（-5pxなど）が使用可能
- 隣接した要素と相殺される（されないケースもあります）
paddingの特徴
- borderの内側にスペース（余白）が設けられる
- スペース（余白）に背景色を適用可能
- paddingに負数（-5pxなど）は使用不可
- 隣接した要素と相殺されない
HTMLでコーディングしているときに、改行を表すタグとして
<br> と <br /> のどちらを使えばよいか迷ったことはありませんか？
結論から言えば、<br> は HTML、<br /> は XHTML の書き方 という違いがあります。
それぞれの特徴や使い分けについて整理してみましょう。
1. <br> と <br /> の基本的な違い
-
<br>
-
HTMLの標準的な改行タグ
-
開始タグだけで完結する「空要素」として扱われる
-
<br />
2. XHTMLでの記述例
XHTMLでは以下のように書きます。
<br /> のスラッシュ前には スペースを入れる ことが推奨されていました。
3. HTML5における扱い
現在主流の HTML5 では、<br> も <br /> もどちらも有効です。
ただし、HTML5はXML準拠を必須としていないため、よりシンプルな <br> が一般的に使われています。
4. 実務での使い分け
プロジェクトのコーディング規約に合わせることが最優先です。
まとめ
初心者は「基本は <br>、XHTMLの場合は <br />」と覚えておくと安心です。
🔧 補足：HTML仕様と実運用のポイント
現在のブラウザでは、<br> と <br /> のどちらも同じように改行を行います。
ただし、HTML5では「どちらの記法も許可」されていますが、XHTML互換性を意識する場合は <br /> のようにスラッシュを付けた自己終了タグを用いるのが安全です。
特に以下のようなケースでは注意しましょう：
実務上は「HTMLの書き方ポリシー」に合わせて統一することが大切です。
チーム開発では、コーディング規約に沿って記法を統一しておくと、可読性や保守性が向上します。
HTMLのリンクからネットワーク上の共有PC（CIFS）へアクセスしたいという要望があった場合の対処方法を記載します。
HTMLリンクはfile URI形式で設定
UNCパスでは「\\common\dir\test.xls」というエクスプローラでよく見かける記述となりますが、file URIのパスでは「file://///common/dir/test.xls」という記述形式となります。このfile URI形式でHTMLではリンクを設定します。
file URIパスへのリンクが有効になるようにブラウザ毎に設定
メジャーなブラウザ（IE以外）の多くはセキュリティ的観点から、file URIのリンクをクリックしてもリンク先を表示出来ない設定となっています。これを解除するためにはブラウザ毎に対応する必要があります。
Internet Explore
IEの場合、セキュリティ対策が甘いのか何も設定する必要はありません。
Firefox
- 「user.js」ファイルを作成
FireFoxの場合は設定が少し面倒で、プロファイルへ許可するアドレスを追加する必要があります。その設定ファイルをJavaScriptで以下の様に記述します。
[js]
user_pref(“capability.policy.policynames”, “localfilelinks”);
user_pref(“capability.policy.localfilelinks.checkloaduri.enabled”, “allAccess”);
user_pref(“capability.policy.localfilelinks.sites”, “http://common.dir.co.jp”);
[/js]
※”http://common.dir.co.jp”の箇所 をリンクを許可したいサーバのアドレスへ変更して下さい。複数ある場合はスペースで区切って記述します。
- FireFoxのプロファイルフォルダへ「user.js」ファイルを配置
配置先「%AppData%\Mozilla\Firefox\Profiles\(英数字のランダム文字列).default」
※既に「user.js」ファイルが存在している場合は記述を追加して下さい。
- FireFoxを再起動
FireFoxを再起動すると「user.js」ファイルへ記述した内容が「prefs.js」（Windowsで言うレジストリのようなもの）へ追加されます。
「駑馬十駕」を信念に IT系情報を中心に調べた事をコツコツ綴っています。
