strictなBBSとCSS

strictなbbs

7さんとstrictなBBSを考案中。

  • 何かの印、もしくはマークで簡単に要素生成できないか。
  • 設定画面やスキンのソースをいじらなくてもいいようにhtmlとxhtmlを設定で分ける。

一番難しいと考えられるblock要素の生成方法がほぼ完成したようです。この文章もそのscriptで作らせて頂きました。

  • brではなくpを生成するには一段落空ける。
  • ulやolの入れ子をするには半角スペースを4つ作り、そのあとに条件の記号を書き文章を続ける。
  • olは半角文字、ピリオド、半角スペースをつくりその後に文章を書く。
  • blockquoteの入れ子は>半角スペース>という2回連続した>をつくり、その後に文章を書く。
  • quoteには、inline要素のqとblock要素のblockquoteがあるが、blockquoteを生成一列である場合inlineとみなす。

試した条件を下に記述していきます。

br(改行)

normal writing
normal writing

↓

<p>
    normal writing<br />
    normal writing
</p>

p(段落)

normal writing

normal writing

↓

<p>normal writing</p>
<p>normal writing</p>

ul(順不同リスト)

・list-item
・list-item
・list-item

↓

<ul>
    <li>list-item</li>
    <li>list-item</li>
    <li>list-item</li>
</ul>

ul(順不同リスト) : 入れ子 : p

・list-item
    ・list-item2
    ・list-item2
        ・list-item3
        ・list-item3
            ・list-item4
            ・list-item4
・list-item
・list-item

↓

<ul>
    <li>
        <p>list-item</p>
        <ul>
            <li>list-item2</li>
            <li>
                <p>list-item2</p>
                <ul>
                    <li>list-item3</li>
                    <li>
                        <p>list-item3</p>
                        <ul>
                            <li>list-item4</li>
                            <li>list-item4</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>list-item</li>
    <li>list-item</li>
</ul>

ol(順序リスト)

1. ol-list-item-1
2. ol-list-item-2
3. ol-list-item-3

↓

<ol>
    <li>ol-list-item-1</li>
    <li>ol-list-item-2</li>
    <li>ol-list-item-3</li>
</ol>

blockquote(引用) : br

>blockquote
>blockquote

↓

<blockquote>
    <p>
        blockquote<br />
        blockquote
    </p>
</blockquote>

blockquote(引用) : p

>blockquote
>
>blockquote

↓

<blockquote>
    <p>blockquote</p>
    <p>blockquote</p>
</blockquote>

blockquote(引用) : 入れ子 : br

>blockquote
> >blockquote2
>blockquote

↓

<blockquote>
    <p>
        blockquote<br>
        >blockquote2<br>
        blockquote
    </p>
</blockquote>

blockquote(引用) : 入れ子 : p

>blockquote
>
> >blockquote2
>
>blockquote

↓

<blockquote>
    <p>blockquote</p>
    <p>>blockquote2</p>
    <p>blockquote</p>
</blockquote>

blockquote(引用) : 入れ子 : br

>blockquote
> >blockquote2
> >blockquote2
>blockquote

↓

<blockquote>
    <p>blockquote<p>
    <blockquote>
        <p>
            blockquote2<br>
            blockquote2
        </p>
    </blockquote>
    <p>blockquote</p>
</blockquote>

blockquote(引用) : 入れ子 : br

>blockquote
>
> >blockquote2
> >blockquote2
>
>blockquote

↓

<blockquote>
    <p>blockquote<p>
    <blockquote>
        <p>
            blockquote2<br>
            blockquote2
        </p>
    </blockquote>
    <p>blockquote</p>
</blockquote>

blockquote(引用) : 入れ子 : p

>blockquote
> >blockquote2
> >
> >blockquote2
>blockquote

↓

<blockquote>
    <p>blockquote<p>
    <blockquote>
        <p>blockquote2</p>
        <p>blockquote2</p>
    </blockquote>
    <p>blockquote</p>
</blockquote>

blockquote(引用) : 入れ子 : p,ol,ul

>blockquote
>1. blockquote-ol-list-item-1
>2. blockquote-ol-list-item-2
>3. blockquote-ol-list-item-3
> >blockquote2
> >
> >blockquote2
> >・blockquote2-list-item
> >・blockquote2-list-item
> >・blockquote2-list-item
>
>blockquote

↓

<blockquote>
    <p>blockquote</p>
    <ol>
        <li>blockquote-ol-list-item-1</li>
        <li>blockquote-ol-list-item-2</li>
        <li>blockquote-ol-list-item-3</li>
    </ol>
    <blockquote>
        <p>blockquote2</p>
        <p>blockquote2</p>
        <ul>
            <li>blockquote2-list-item</li>
            <li>blockquote2-list-item</li>
            <li>blockquote2-list-item</li>
        </ul>
    </blockquote>
    <p>blockquote</p>
</blockquote>

pre(整形文書)

---------
pre
preには-という記号を、
整形したい文字列の前後に
3文字以上記入する。
---------

↓
<pre>
pre
preには<em>-</em>という記号を、
整形したい文字列の前後に
<em>3文字以上</em>記入する。
</pre>

以上の条件で意図通りの要素が生成されました。まだまだ開発途中だそうなので応援中です。

7さんが、Text to HTMLによって、プレーンテキストからHTMLに整形させることができるようにツールを作られました。relmへの実装はまだのようですが、このようになるということだそうです。

strict.css

Opera向けユーザースタイルシート(自分用)です。firefoxは、htmlへの背景指定のため挙動不審になるのでお薦めしません。

以前のstrict.cssをもうちょっと考えたいと思い、指定を変えました。

  • テーブルレイアウトのinline化&通常のテーブルの使い方をしている場合に限りテーブル表示。summary属性必須、あとできればtheadとか。
  • 属性セレクタ使用。attrでciteやtitle表示
  • _blankの場合はafterに(Open Window)を表示

テーブルレイアウトのinline化に関しては、条件が不確かというか、テーブルレイアウトをしていなくてもsummaryがなかったりtheadがなかったりする場合もあるので悩むところです。よい条件が思いつけば変更しますが取り敢えずこれで敢行。

IEとIE以外で表示が違うのは仕様です。

Reference URI

  • トラックバックのURIはhttp://glas-gather.org/mt/mt-tb.cgi/79です。

Breadcrumbs List

glas-gather のカテゴリーである Index から辿り、サブカテゴリーである Web を辿ると、個別記事である strictなBBSとCSS に着きます。