概要

灰桜は、
rgba(232,211,209,1.0)
#e8d3d1
です。

色見本の為に、ひとつのページにいろいろな装飾を詰め込んでいます。

仕様

details詳細
カテゴリフローコンテンツ, 対話型コンテンツ, 知覚可能コンテンツ, 区分化起源
この要素を使用できる
コンテキスト
フローコンテンツを受け入れる要素。
許可されている内容1つの summary要素とそれに続くフローコンテンツ。
属性グローバル属性,
open
許可されているARIAなし[既定値 : group]
text / htmlでの
タグの省略
省略できません。
DOM インターフェイスHTMLDetailsElement
レンダリング
ウィジェット
  1. details {
  2. display: block;
  3. }

CSS を大雑把に読むと、 フローレイアウトに配置されたときにブロックレベルのボックスを生成します。 などになります。

details要素は、追加情報を表します。

summary要素で、要約を表します。open属性が存在する場合は、要約と追加情報の両方がユーザーに初期表示されることを示します。存在しない場合は、要約のみが初期表示されます。

  1. <div>
  2. <details open>
  3. <summary>summary</summary>
  4. <div>details</div>
  5. </details>
  6. </div>
summary
details

フローコンテンツ(flow content.)とは、ドキュメントおよびアプリケーションの本文で使用されるほとんどの要素を含むカテゴリです。

知覚可能コンテンツ(パルパブルコンテンツ・Palpable content.)とは、コンテンツとして認識できる要素のカテゴリです。

対話型コンテンツ(インタラクティブコンテンツ・Interactive content.)とは、ユーザーの操作を特に意図したコンテンツのカテゴリです。

区分化起源(セクショニング・ルート・sectioning roots)とは、独自のアウトラインを持つことができますが、要素内のセクションと見出しは、祖先のアウトラインには影響しない要素のカテゴリです。

padding<length-percentage>{1,4}
一括/個別一括指定プロパティ
初期値0
適用対象表のセル以外の内部テーブル要素、ruby base containers and ruby annotation containers を除くすべての要素
継承なし
パーセンテージ包含ブロックの論理幅を参照
計算値計算された<length-percentage>値
補足<length-percentage> = <length> | <percentage>
補足padding-toppadding-rightpadding-bottompadding-left も値が1つの個別指定プロパティなだけで他は同じ

padding プロパティは、要素のパディングの上(padding-top), 右(padding-right), 下(padding-bottom), 左(padding-left)の値を単一の宣言で設定する一括指定プロパティです。
順番に意味があり指定する数にも意味があります。

上,右,下,左で一部を初期値などにしたい場合は、
padding-top, padding-right, padding-bottom, padding-left 等を用います。
値は上,右,下,左に個別の指定であるだけで、padding と同じ規則です。

HTML, CSSの コード

HTML や CSS などの
コードとか、
処理結果の提示用です。

  1. cdvSample000 > div { outline: solid 1px #0000ff; }
  2. cdvSample000 > div > div { outline: dashed 1px currentColor; }
  1. <div class="cdvSample000">
  2. <div style="padding: 1em;"><div></div></div></div>

例示の雛型です。style属性を書き換えて例示しています。
子要素はパディングを視覚化する為に記述しています。

  1. cdvSample000 > div { outline: solid 1px #0000ff; }
  2. cdvSample000 > div > div { outline: dashed 1px currentColor; }
  1. <div class="cdvSample000">
  2. <div style="padding: 1em;"><div></div></div></div>

コードの文字の色と背景の組み合わせの確認の為に、用意してみました。

リンク集

ボックス

Greeting

キーワード Greeting を用いての、ボックスの装飾です。

Policy

キーワード Policy を用いての、ボックスの装飾です。

Blockquote

Policyあり

掲示板やチャットなど、誰もがアクセスできるインターネット上で自発的に個人情報を開示した場合、その情報は他の利用者によって収集され使用される可能性があることに留意してください。
メールアドレスを公開すれば、そこに掲示された情報をもとに、望ましくないメッセージを受け取ることがあります。
利用者はご自分の責任において情報を発信してください。
All About Japan(オールアバウトジャパン)
プライバシーポリシー
 より 2004-04-28 引用 (2008-04-12 リンク先更新,Last Check 2020-06-04)

Policyなし

掲示板やチャットなど、誰もがアクセスできるインターネット上で自発的に個人情報を開示した場合、その情報は他の利用者によって収集され使用される可能性があることに留意してください。
メールアドレスを公開すれば、そこに掲示された情報をもとに、望ましくないメッセージを受け取ることがあります。
利用者はご自分の責任において情報を発信してください。
All About Japan(オールアバウトジャパン)
プライバシーポリシー
 より 2004-04-28 引用 (2008-04-12 リンク先更新,Last Check 2020-06-04)

Profile

プロフィール
項目1内容1
項目2内容2
項目3内容3
趣味

ときメモ公式属性=古式ゆかり
 しかし・・・
 私設朝日奈夕子FC『Candypop Magic』会員番号26(;^_^A
まもって守護月天!属性?=離珠
 月天グッズ等、大量に保有中(T-T)(T-T)(T-T)
好きな歌手:飯島真理,渡辺真知子
好きな声優:林原めぐみ 他多数(^^ゞ

以下省略・・・

まいぶ~む
(2004年 1月30日現在)
気象精霊,マリア様がみてる,PrincessHoliday

ボタン

ボタン ボタン バナー バナー