「HTML」カテゴリーアーカイブ

HTML, ブログ, プログラミング

CSSとHTMLだけで作る立体的カードUI（Shadow DOM対応）

2025年10月6日管理者コメントする

JavaScriptなしで、transform / perspective / layered shadows と CSSカスタムプロパティ だけで

“パッ”と目を引く3Dカードを作成してみましょう。

さらに Shadow DOM 内でも同じ見た目を再現できるよう、::part() と変数で拡張可能にします。

ゴール（できあがりイメージ）

マウスホバーでわずかに傾く3D表現
斜めに流れるハイライト（きらめき）
ライト／ダークどちらでも映える配色
prefers-reduced-motion でアニメ控えめ
Shadow DOM対応：::part() と CSS変数で外部からのテーマ変更OK

デモ：CSSとHTMLだけで作る3DカードUI

💡 マウスを乗せるとカードがわずかに傾き、立体的な効果が確認できます。

最小HTML（ライトDOM版）

<link rel="preload" href="https://picsum.photos/600/400?random=13" as="image">

<div class="card-3d">
  <img class="card-3d__media" src="https://picsum.photos/600/400?random=13" alt="Sample cover">
  <div class="card-3d__body">
    <h3 class="card-3d__title">CSS Only 3D Card</h3>
    <p class="card-3d__text">
      transform と layered shadow で立体感を作るミニマル実装。Shadow DOMでも同じテーマが使えます。
    </p>
    <a class="card-3d__cta" href="#">詳しく見る</a>
  </div>
</div>

transform と layered shadow で立体感を作るミニマル実装。Shadow DOMでも同じテーマが使えます。

</p>

<a class="card-3d__cta" href="#">詳しく見る</a>

</div>

コアCSS（ライトDOM版）

:root {
  --card-bg: color-mix(in oklab, canvas, white 6%);
  --card-fg: canvastext;
  --card-accent: oklch(0.70 0.12 250);
  --card-radius: 16px;
  --card-shadow-1: 0 1px 2px color-mix(in oklab, black, transparent 80%);
  --card-shadow-2: 0 8px 24px color-mix(in oklab, black, transparent 88%);
  --card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 92%);
  --card-gloss: linear-gradient(120deg, transparent 30%, color-mix(in oklab, white, transparent 60%) 45%, transparent 60%) no-repeat;
  --card-gloss-size: 200% 200%;
  --card-tilt: rotateX(5deg) rotateY(-6deg);
  --card-tilt-hover: rotateX(6.5deg) rotateY(-10deg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --card-bg: color-mix(in oklab, canvas, black 6%);
    --card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 86%);
  }
}

.card-3d {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(100%, 420px);
  padding: 14px;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  color: var(--card-fg);
  border: var(--card-border);
  box-shadow: var(--card-shadow-1), var(--card-shadow-2);
  transform: perspective(900px) var(--card-tilt);
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
  overflow: clip;
  isolation: isolate;
}

.card-3d::before {
  /* 斜めに流れるハイライト */
  content: "";
  position: absolute;
  inset: -10%;
  background: var(--card-gloss);
  background-size: var(--card-gloss-size);
  mix-blend-mode: soft-light;
  pointer-events: none;
  transform: translateZ(30px);
  transition: background-position .8s ease;
}

.card-3d:hover {
  transform: perspective(900px) var(--card-tilt-hover) translateZ(0.001px);
  box-shadow: 0 4px 10px color-mix(in oklab, black, transparent 80%), 0 24px 48px color-mix(in oklab, black, transparent 85%);
}
.card-3d:hover::before { background-position: 120% 40%; }

.card-3d__media {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: calc(var(--card-radius) - 6px);
  transform: translateZ(20px);
  box-shadow: 0 10px 24px color-mix(in oklab, black, transparent 80%);
}

.card-3d__body { display: grid; gap: 8px; transform: translateZ(24px); }

.card-3d__title {
  font-size: clamp(1.05rem, 1.2rem + .25vw, 1.35rem);
  line-height: 1.25;
}

.card-3d__text { opacity: .9; }

.card-3d__cta {
  justify-self: start;
  display: inline-grid;
  place-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--card-accent), white 5%);
  color: white;
  text-decoration: none;
  font-weight: 600;
  transform: translateZ(26px);
  box-shadow: 0 6px 16px color-mix(in oklab, var(--card-accent), black 25% / 22%);
  transition: transform .25s, filter .25s, box-shadow .35s;
}
.card-3d__cta:hover  { filter: brightness(1.05); transform: translateZ(28px); }
.card-3d__cta:active { transform: translateZ(22px) scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .card-3d, .card-3d * { transition: none !important; }
  .card-3d { transform: none; }
  .card-3d::before { display: none; }
}

:root {

--card-bg: color-mix(in oklab, canvas, white 6%);

--card-fg: canvastext;

--card-accent: oklch(0.70 0.12 250);

--card-radius: 16px;

--card-shadow-1: 0 1px 2px color-mix(in oklab, black, transparent 80%);

--card-shadow-2: 0 8px 24px color-mix(in oklab, black, transparent 88%);

--card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 92%);

--card-gloss: linear-gradient(120deg, transparent 30%, color-mix(in oklab, white, transparent 60%) 45%, transparent 60%) no-repeat;

--card-gloss-size: 200% 200%;

--card-tilt: rotateX(5deg) rotateY(-6deg);

--card-tilt-hover: rotateX(6.5deg) rotateY(-10deg);

}

@media (prefers-color-scheme: dark) {

:root {

--card-bg: color-mix(in oklab, canvas, black 6%);

--card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 86%);

}

.card-3d {

position: relative;

display: grid;

gap: 12px;

width: min(100%, 420px);

padding: 14px;

border-radius: var(--card-radius);

background: var(--card-bg);

color: var(--card-fg);

border: var(--card-border);

box-shadow: var(--card-shadow-1), var(--card-shadow-2);

transform: perspective(900px) var(--card-tilt);

transform-style: preserve-3d;

transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;

overflow: clip;

isolation: isolate;

}

.card-3d::before {

/* 斜めに流れるハイライト */

content: "";

position: absolute;

inset: -10%;

background: var(--card-gloss);

background-size: var(--card-gloss-size);

mix-blend-mode: soft-light;

pointer-events: none;

transform: translateZ(30px);

transition: background-position .8s ease;

}

.card-3d:hover {

transform: perspective(900px) var(--card-tilt-hover) translateZ(0.001px);

box-shadow: 0 4px 10px color-mix(in oklab, black, transparent 80%), 0 24px 48px color-mix(in oklab, black, transparent 85%);

}

.card-3d:hover::before { background-position: 120% 40%; }

.card-3d__media {

width: 100%;

aspect-ratio: 3/2;

object-fit: cover;

border-radius: calc(var(--card-radius) - 6px);

transform: translateZ(20px);

box-shadow: 0 10px 24px color-mix(in oklab, black, transparent 80%);

}

.card-3d__body { display: grid; gap: 8px; transform: translateZ(24px); }

.card-3d__title {

font-size: clamp(1.05rem, 1.2rem + .25vw, 1.35rem);

line-height: 1.25;

}

.card-3d__text { opacity: .9; }

.card-3d__cta {

justify-self: start;

display: inline-grid;

place-items: center;

padding: 10px 14px;

border-radius: 999px;

background: color-mix(in oklab, var(--card-accent), white 5%);

color: white;

text-decoration: none;

font-weight: 600;

transform: translateZ(26px);

box-shadow: 0 6px 16px color-mix(in oklab, var(--card-accent), black 25% / 22%);

transition: transform .25s, filter .25s, box-shadow .35s;

}

.card-3d__cta:hover { filter: brightness(1.05); transform: translateZ(28px); }

.card-3d__cta:active { transform: translateZ(22px) scale(.98); }

@media (prefers-reduced-motion: reduce) {

.card-3d, .card-3d * { transition: none !important; }

.card-3d { transform: none; }

.card-3d::before { display: none; }

}

Shadow DOM に対応させる考え方

ポイントは 「パーツを切り出す」 と 「CSS変数でテーマ化」。
外側（ライトDOM）から Shadow DOM 内を直接スタイルできないため、コンポーネント作者が part を付与し、利用者は ::part() で装飾、色や半径は CSS変数で調整します。

Web Component 側（作者向け：影DOM内のテンプレ）

※ここでは概念を示すための HTMLスケッチ です。実際の ShadowRoot 作成は JS が必要ですが、スタイル設計の指針としてご覧ください。

<!-- shadow root 内部イメージ（概念） -->
<style>
  :host {
    --card-bg: var(--card-bg, color-mix(in oklab, canvas, white 6%));
    --card-fg: var(--card-fg, canvastext);
    --card-accent: var(--card-accent, oklch(0.70 0.12 250));
    --card-radius: var(--card-radius, 16px);
    /* …上記ライトDOM版と同等の宣言… */
  }
  .card { /* = .card-3d と同様 */ }
  .card::before { /* gloss */ }
  .media::part(img) { /* メディア要素が更にshadowならここで委譲 */ }
</style>

<div class="card">
  <img part="media" class="media" alt="">
  <div class="body" part="body">
    <h3 part="title" class="title"></h3>
    <p part="text" class="text"></p>
    <a part="cta" class="cta" href="#"></a>
  </div>
</div>

<style>

:host {

--card-bg: var(--card-bg, color-mix(in oklab, canvas, white 6%));

--card-fg: var(--card-fg, canvastext);

--card-accent: var(--card-accent, oklch(0.70 0.12 250));

--card-radius: var(--card-radius, 16px);

/* …上記ライトDOM版と同等の宣言… */

}

.card { /* = .card-3d と同様 */ }

.card::before { /* gloss */ }

.media::part(img) { /* メディア要素が更にshadowならここで委譲 */ }

</style>

</div>

利用者側（外部）からのテーマ上書き例

/* Shadow host にぶら下がる要素（custom-element）へ変数を供給 */
custom-3d-card {
  --card-accent: oklch(0.78 0.17 30);     /* 暖色寄りに */
  --card-radius: 20px;
}

/* コンポーネントが part を公開していれば装飾できる */
custom-3d-card::part(title) { letter-spacing: .3px; }
custom-3d-card::part(cta)   { text-transform: uppercase; }

/* Shadow host にぶら下がる要素（custom-element）へ変数を供給 */

custom-3d-card {

--card-accent: oklch(0.78 0.17 30); /* 暖色寄りに */

--card-radius: 20px;

}

/* コンポーネントが part を公開していれば装飾できる */

custom-3d-card::part(title) { letter-spacing: .3px; }

custom-3d-card::part(cta) { text-transform: uppercase; }

まとめ：

作者は Shadow DOM 内で CSS変数とpart名を定義

利用者は ホストへ変数指定し、必要なら ::part() でピンポイント調整

デザインバリエーション（クラス追加だけ）

/* さらに“浮かせる” */
.card-3d.is-elevated {
  --card-tilt: rotateX(6deg) rotateY(-8deg);
  --card-tilt-hover: rotateX(9deg) rotateY(-12deg);
}

/* ガラス風 */
.card-3d.is-glass {
  background: color-mix(in oklab, var(--card-bg), transparent 30%);
  backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid color-mix(in oklab, white, transparent 80%);
}

/* 枠線強調・フラット */
.card-3d.is-outline {
  box-shadow: 0 1px 0 color-mix(in oklab, black, transparent 86%);
  --card-gloss: linear-gradient(120deg, transparent, transparent); /* きらめき無効 */
}

/* さらに“浮かせる” */

.card-3d.is-elevated {

--card-tilt: rotateX(6deg) rotateY(-8deg);

--card-tilt-hover: rotateX(9deg) rotateY(-12deg);

}

/* ガラス風 */

.card-3d.is-glass {

background: color-mix(in oklab, var(--card-bg), transparent 30%);

backdrop-filter: blur(8px) saturate(1.2);

border: 1px solid color-mix(in oklab, white, transparent 80%);

}

/* 枠線強調・フラット */

.card-3d.is-outline {

box-shadow: 0 1px 0 color-mix(in oklab, black, transparent 86%);

--card-gloss: linear-gradient(120deg, transparent, transparent); /* きらめき無効 */

}

アクセシビリティと実用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, ブログ, プログラミング

JSいらず！HTMLだけでポップアップを出せる「popover」属性がすごい

2025年10月5日管理者コメントする

これまで「ポップアップ」や「モーダルウィンドウ」を作るには、
JavaScriptやCSSトリックを駆使するのが当たり前でした。

ところが最近、**HTMLだけでポップアップを表示できる新属性「popover」**が登場！
これが想像以上にシンプルで、しかも見た目も自然なんです。

この記事では、「popover」属性の基本的な使い方から応用例までまとめています。

🚀 popover属性とは？

popover属性は、HTMLの要素に「ちょっとした吹き出し」や「軽いモーダル」を表示するための新仕様です。
JavaScriptなしで開閉制御でき、ボタンやリンクに紐づけて簡単に使えます。

対応ブラウザ

✅ Chrome 114以降
✅ Edge 114以降
✅ Safari 17以降
⚠️ Firefox（現時点では開発中）

※2025年現在、多くのモダンブラウザでサポートが進んでいます。

🧱 基本の使い方

✅ 最小構成の例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>popover属性の最小構成サンプル</title>
</head>
<body>
  <button popovertarget="info">ポップアップを表示</button>
  <div id="info" popover>
    <p>こんにちは！これはHTMLだけで出せるポップアップです。</p>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>popover属性の最小構成サンプル</title>

</head>

<body>

<button popovertarget="info">ポップアップを表示</button>

<p>こんにちは！これはHTMLだけで出せるポップアップです。</p>

</div>

</body>

</html>

＜表示例＞

💬 ポイント解説

popover 属性を付与した要素が、ポップアップ対象になります。
popovertarget 属性で、どの要素を表示するか指定します。
ボタンをクリックするだけで自動的に開閉制御してくれます。

🎨 スタイルを整える

デフォルトのままだと少し味気ないので、CSSで整えましょう。

<style>
  [popover] {
    padding: 1em;
    background: #f9f9ff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
</style>

<style>

[popover] {

padding: 1em;

background: #f9f9ff;

border: 1px solid #ccc;

border-radius: 10px;

box-shadow: 0 4px 12px rgba(0,0,0,0.15);

}

</style>

これで、軽いツールチップやメニュー風の見た目にできます。

背景を白系にすれば、Webアプリ風のモーダルにも。

⚙️ 応用：自動で閉じる・メニュー風表示

<button popovertarget="menu" popovertargetaction="toggle">メニュー</button>

<div id="menu" popover>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">設定</a></li>
    <li><a href="#">ログアウト</a></li>
  </ul>
</div>

<ul>

<li><a href="#">ログアウト</a></li>

</ul>

</div>

popovertargetaction="toggle" を使うと、クリックごとに開閉を切り替えられます。
ナビゲーションメニューやヘルプボックスなどにも応用可能です。

＜表示例＞

🧠 裏側の仕組み

HTMLの「popover」属性は、ブラウザ側で開閉制御を自動的に処理します。
内部的には :popover-open という擬似クラスが追加され、
CSSで開閉状態を検知することもできます。

**「開いたときだけアニメーション」**などを実現できます。

💻 実用例：通知メッセージ

<button popovertarget="notice" popovertargetaction="show">お知らせ</button>
<div id="notice" popover>
  <p>サイトの更新情報があります！</p>
</div>

<p>サイトの更新情報があります！</p>

</div>

JavaScript不要で、ユーザーに小さなメッセージを伝えることが可能です。

フォーム送信後の完了メッセージなどにもぴったり。

⚠️ 注意点

古いブラウザでは未対応なので、必要に応じて<dialog>タグやJSフォールバックを検討。
開く方向は自動制御されるため、細かい位置調整が難しい場合があります。
長文や複雑なレイアウトには不向き（軽量ポップアップ用途がベスト）。

🌟 まとめ

特徴	内容
JavaScript不要	HTMLだけで完結
見た目自由	CSSで簡単カスタマイズ
軽量	ページ読み込みが早い
一部ブラウザ注意	Firefoxは実装中

🔮 今後の展望

「popover」属性はまだ新しい技術ですが、
“JavaScriptレスなUI” を目指すHTML進化の象徴です。

今後は、ツールチップ・通知・設定メニューなど、
より多くのシーンで採用が進むと期待されます。

HTML, ブログ, プログラミング

JavaScriptなしで実現！HTML5 Canvasアニメーションで魅せるWeb装飾

2025年10月4日管理者コメントする

HTML5の登場以降、Webデザインの表現力は大きく進化しました。
その中でも<canvas>タグは、まるで映像作品のような動きをブラウザ上で描くための強力な機能です。

「アニメーション＝JavaScriptが必要」と思われがちですが、実はJavaScriptを使わずにCanvasを動かす方法も存在します。
今回は、HTML5の<canvas>タグだけで実現できる動くWeb装飾について紹介します。

🖋️ `<canvas>`タグの基本とは？

<canvas>タグは、HTML5で導入されたグラフィック描画用の要素です。
通常はJavaScriptを使って図形やアニメーションを描きますが、近年はCSSアニメーションやSVG、さらにはGIF・APNGを組み合わせてCanvasを動かす手法も増えています。

さらに、CSSや画像アニメーションを活用することで、JavaScriptなしでも“動きを感じさせる”デザインを作ることができます。

🌊 JavaScriptなしで実現する波紋・粒子エフェクト

近年注目されているのが、Canvasを静的画像やCSSアニメーションと組み合わせるアプローチです。

✅ 例：波紋エフェクト（CSS連携）

<div class="ripple-wrap">
  <canvas class="ripple"></canvas>
</div>

<style>
/* 表示領域 */
.ripple-wrap{
  position: relative;
  width: 100%;
  height: 320px;          /* 必要に応じて変更 */
  overflow: hidden;
  border-radius: 12px;
  background: #0b1020;    /* 下地色（任意） */
}

/* CanvasにCSSアニメーション（JSなし） */
.ripple{
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 55%,
    rgba(255,255,255,0.40) 0%,
    rgba(255,255,255,0.30) 10%,
    rgba(255,255,255,0.10) 25%,
    rgba(255,255,255,0.00) 55%);
  animation: rippleEffect 3.6s ease-out infinite;
  transform-origin: 50% 55%;
}

@keyframes rippleEffect{
  0%   { transform: scale(0.55); opacity: 0.9; }
  60%  { opacity: 0.35; }
  100% { transform: scale(2.2); opacity: 0; }
}
</style>

</div>

<style>

/* 表示領域 */

.ripple-wrap{

position: relative;

width: 100%;

height: 320px; /* 必要に応じて変更 */

overflow: hidden;

border-radius: 12px;

background: #0b1020; /* 下地色（任意） */

}

/* CanvasにCSSアニメーション（JSなし） */

.ripple{

display: block;

width: 100%;

height: 100%;

background: radial-gradient(circle at 50% 55%,

rgba(255,255,255,0.40) 0%,

rgba(255,255,255,0.30) 10%,

rgba(255,255,255,0.10) 25%,

rgba(255,255,255,0.00) 55%);

animation: rippleEffect 3.6s ease-out infinite;

transform-origin: 50% 55%;

}

@keyframes rippleEffect{

0% { transform: scale(0.55); opacity: 0.9; }

60% { opacity: 0.35; }

100% { transform: scale(2.2); opacity: 0; }

}

</style>

これだけで、Canvas上に波紋が広がるような演出をCSSだけで表現できます。

動的スクリプトが不要なので、ローディング画面やメインビジュアルにも最適です。

サンプル

✨ パーティクル風の演出も可能

粒子（パーティクル）をイメージした演出も、背景のCanvasを複数重ねることで再現可能です。
たとえば、透明度の異なる複数のCanvasレイヤーをCSSで重ねると、光がゆらめくような表現になります。

.particles canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 80%);
  animation: float 8s infinite alternate;
}
@keyframes float {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

.particles canvas {

position: absolute;

top: 0; left: 0;

width: 100%; height: 100%;

background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 80%);

animation: float 8s infinite alternate;

}

@keyframes float {

from { transform: translateY(0); }

to { transform: translateY(-20px); }

}

これにより、動きを感じさせる静かな装飾が可能になります。

サンプル

🧩 活用シーン

HTML5 Canvasを使った静的アニメーションは、以下のような場面で効果的です。

🌐 ローディング画面：シンプルで軽量な波紋アニメーションを表示
🖼️ メインビジュアル：粒子や光を使った背景エフェクト
🔲 ボタンホバー時：クリック誘導に動きを加える
💻 プレゼン用サイト：静かな動きでブランド感を演出

💬 まとめ

JavaScriptを使わなくても、HTML5 Canvasを上手く活用すれば軽量で美しいアニメーション表現が可能です。
CSSやCanvasレイヤーを組み合わせることで、Webサイト全体の印象を大きく向上させることができます。

「動き＝JS」ではなく、「表現＝HTML5 × CSS × Canvas」
これが、モダンWebデザインの新しいアプローチです。

HTML, ブログ

HTML：番号付きリストの開始番号を変更する方法

2022年6月14日管理者コメントする

HTMLで番号付きリストを表示するのは<ol>タグの中に<li>タグを記述することで表現できますが、<ol>タグにreversed属性やstart属性、type属性を付与することで表示される番号を操作することが出来ます。

<ol>タグに何も属性付けない場合

HTML

<ol>
<li>パソコン</li>
<li>テレビ</li>
<li>ソファー</li>
</ol>

<ol>

</ol>

表示結果

パソコン
テレビ
ソファー

<ol>タグにreversed属性を付けた場合

HTML

<ol reversed="">
<li>パソコン</li>
<li>テレビ</li>
<li>ソファー</li>
</ol>

</ol>

表示結果

パソコン
テレビ
ソファー

<ol>タグにstart属性を付けた場合

HTML

<ol start="2">
<li>パソコン</li>
<li>テレビ</li>
<li>ソファー</li>
</ol>

</ol>

表示結果

パソコン
テレビ
ソファー

<ol>タグにtype属性を付けた場合

HTML

<ol type="A">
<li>パソコン</li>
<li>テレビ</li>
<li>ソファー</li>
</ol>

</ol>

表示結果

パソコン
テレビ
ソファー

HTML, Web開発, ブラウザ, ブログ

IEに互換表示をさせない「X-UA-Compatible」の指定方法

2015年3月15日管理者コメントする

Web開発者泣かせでお馴染みのIEにはIEの過去バージョンモードで表示出来る互換表示機能があります。
しかし互換表示することで表示が崩れてしまう場合、デフォルトでは互換表示させたくないケースが多々あります。
そういう場合にはmetaタグで「X-UA-Compatible」を指定する事で互換モードではなく、使用しているIEの各バージョンの標準モードでレンダリングさせる事が可能となります。

使用しているIEの各バージョン毎でレンダリング

<meta http-equiv="X-UA-Compatible" content="IE=edge">

1	<meta http-equiv="X-UA-Compatible" content="IE=edge">

IEのバージョン固定でレンダリング

<meta http-equiv="X-UA-Compatible" content="IE=8">

1	<meta http-equiv="X-UA-Compatible" content="IE=8">

<meta http-equiv="X-UA-Compatible" content="IE=11">

1	<meta http-equiv="X-UA-Compatible" content="IE=11">

HTML, ブログ, ホームページ作成

JSPコメントとHTMLコメントの違い

2015年2月4日管理者コメントする

JSPのコメント文とHTMLのコメント文の違いについてまとめておきます。

JSPのコメント

<%-- JSPのコメント文 --%>

1	<%-- JSPのコメント文 --%>

HTMLのコメント

<!-- HTMLのコメント文 -->

1	<!-- HTMLのコメント文 -->

さて、両者の違いとは何でしょうか。

見た目大して変わらないしどっちでもいいんじゃない。というのは大きな間違いで、HTMLのコメント文はサーブレット変換時にコメントも「out.println()」によってクライアントに対して出力されてしまいます。要はそのページを表示して右クリックなどから「ソースコードを表示」などを選択するとそのコメント文もクライアント側から確認可能となります。
対してJSPのコメント文はソースコードを表示してもクライアント側から確認する事は出来ません。

使い分けとしては、そのページの開発者サイドにのみ伝えておきたい内容などは「JSPのコメント文」、そのページを閲覧するクライアント側がソースコードを確認した時に伝えたい内容は「HTMLのコメント文」というように使い分けましょう。

HTML, Web開発, ブログ, ホームページ作成

<b>太字タグと<strong>論理強調タグの違い

2014年5月18日管理者コメントする

HTMLを作成する時に悩む、<b>太字タグと<strong>論理強調タグの違いについてメモしておきます。
この二つは表面上はよく似ていて、どちらも太字になります。
ですが<b>タグは単に太く見えるだけで単なる一般的な太字ですが、<strong>タグは検索エンジンなどにおいて、特別な意味を持ったタグとなります。
検索エンジンなどで注視させたい場合などは<strong>タグを用いると良いでしょう。
逆に<b>タグは単なる太く見えるだけのタグなので、文章の中で読者に対して注視させたい場合に用います。
私の場合は以前よくSEOの観点から<strong>タグを活用していました。
メタタグなどよりは多少の効果はあるようで、特定の検索ワードで上位になることも多かったです。
今は時間的に余裕がなく面倒なので、あまり文章内の特別な編集は殆どしていませんが、多少の効果があるという事は確かなようです。
他にもメタタグなど色々なタグがHTMLにはありますが、<b>タグや<strong>タグは初心者でも簡単に用いる事が出来ると思うので、うまく活用すると良いかもしれません。

HTML, ブラウザ, ブログ, 便利ツール

HTML、CSS、JavaScriptのデバッガツール「Firebug」のインストール手順

2014年4月16日管理者コメントする

通常ブラウザにはF12押下でブラウザ標準の開発ツールが使用可能となりますが、今回紹介する「Firebug」は高性能なJavaScriptデバッガツールです。JavaScriptだけではなくHTMLやスタイルシートの値をリアルタイムに変更して確認したり、非同期通信状況やDOMの状態などの詳細情報確認も簡単に可能となります。

Firebugの特徴

Firefox専用のアドオン
JavaScriptのデバッグ
非同期通信の状況確認
DOMやスタイルシートの設定状況確認

Firebugのインストール手順

FireFoxを起動し、メニューの「ツール」→「アドオン」を選択します。
アドオンマネージャのメニュー「アドオン入手」画面で検索ボックスへ「firebug」と入力して検索します。
検索結果に「Firebug x.xx.x」と表示されますので「インストール」ボタンを押下してインストールします。
インストール終了後、デバッグしたい画面を開いてブラウザの右上に追加された「虫アイコン」をクリックすれば虫アイコンに色がついてFirebugが起動します。

HTML, Web開発, ブログ

marginとpaddingの違い

2014年4月14日管理者コメントする

CSSでスタイルを設定していると「margin」と「padding」の基礎知識が曖昧だと使用する際に混乱しがちなので今回は両者の違いをまとめてみます。

marginとpaddingの関係図

marginの特徴

borderの外側にスペース（余白）が設けられる
スペース（余白）に背景色は適用不可
marginに負数（-5pxなど）が使用可能
隣接した要素と相殺される（されないケースもあります）

paddingの特徴

borderの内側にスペース（余白）が設けられる
スペース（余白）に背景色を適用可能
paddingに負数（-5pxなど）は使用不可
隣接した要素と相殺されない

HTML, Web開発, ブログ

エスケープとエンコードの違い

2014年4月8日管理者コメントする

ふとエスケープとエンコードの違いって何だろうと思ったので整理してみました。
どちらも「一定の規則に従い別の記号や文字列に置換する」という点では同義語に見えますが、根本的にその性質は全く異なるものです。

エスケープ

HTMLでは「< 」を「＆ｇｔ；」へ変換することをエスケープ処理と呼称します。この場合、画面上はエスケープしても「

エンコード

情報を暗号や通信に適した形式（コード）に変換すること。動画などの場合、この「形式」のことをコーデックと呼びます。
例えばURLコードへエンコードすると「半角スペース」は「%20」へ置換されます。そしてURLを見てみるとエンコード後の文字列がそのまま表示されています。

ゴール（できあがりイメージ）

デモ：CSSとHTMLだけで作る3DカードUI

最小HTML（ライトDOM版）

コアCSS（ライトDOM版）

Shadow DOM に対応させる考え方

Web Component 側（作者向け：影DOM内のテンプレ）

利用者側（外部）からのテーマ上書き例

デザインバリエーション（クラス追加だけ）

アクセシビリティと実用Tips

よく使うCSSカスタムプロパティ（外から上書きOK）

トラブルシュート

まとめ

関連記事

🚀 popover属性とは？

対応ブラウザ

🧱 基本の使い方

✅ 最小構成の例

🎨 スタイルを整える

⚙️ 応用：自動で閉じる・メニュー風表示

🧠 裏側の仕組み

💻 実用例：通知メッセージ

⚠️ 注意点

🌟 まとめ

🔮 今後の展望

関連記事

🖋️ <canvas>タグの基本とは？

🌊 JavaScriptなしで実現する波紋・粒子エフェクト

✅ 例：波紋エフェクト（CSS連携）

サンプル

✨ パーティクル風の演出も可能

サンプル

🧩 活用シーン

💬 まとめ

関連記事

<ol>タグに何も属性付けない場合

HTML

表示結果

<ol>タグにreversed属性を付けた場合

HTML

表示結果

<ol>タグにstart属性を付けた場合

HTML

表示結果

<ol>タグにtype属性を付けた場合

HTML

表示結果

関連記事

使用しているIEの各バージョン毎でレンダリング

IEのバージョン固定でレンダリング

関連記事

JSPのコメント

HTMLのコメント

関連記事

関連記事

Firebugの特徴

Firebugのインストール手順

関連記事

marginとpaddingの関係図

marginの特徴

paddingの特徴

関連記事

エスケープ

エンコード

関連記事

「駑馬十駕」を信念に IT系情報を中心に調べた事をコツコツ綴っています。

　関連記事

　関連記事

🖋️ `<canvas>`タグの基本とは？

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事

　関連記事