2012年10月24日水曜日

注意事項を書く部分のcss

ラベル: 時刻:

次のような注意事項を書く部分のためのcssを考えました。

  • 注1)

    とてもとても重要な注意事項。とてもとても重要な注意事項。とてもとても重要な注意事項。とてもとても重要な注意事項。とてもとても重要な注意事項。とてもとても重要な注意事項。

  • 注1024)

    たいして重要でもない注意事項。たいして重要でもない注意事項。たいして重要でもない注意事項。たいして重要でもない注意事項。たいして重要でもない注意事項。たいして重要でもない注意事項。

  • [注意事項]

    注意事項のフリをして注意事項ではない。注意事項のフリをして注意事項ではない。注意事項のフリをして注意事項ではない。注意事項のフリをして注意事項ではない。注意事項のフリをして注意事項ではない。

ポイントは

  • 各項目はul liで書く。
  • 「 注1) 」などの文字列の下にp要素の中身が回り込まないようにする。
  • 「 注1) 」などの文字列は書き換え可能。

cssのコードはこんな感じに。 

li.attention_li {
    display: inline-block;
    list-style-type: none;
/*  background-color: #ffd0ff;
    margin: 2pt;*/
}
li.attention_li:after {
    content: "";
    display: block;
    clear: both;
}
li.attention_li p {
    margin: 0pt;
    overflow: auto;
    zoom: 1;
/*  background-color: #d0ffff;
    margin: 2pt;*/
}
p.attention_st {
    padding-right: 4pt;
    margin: 0pt;
    float: left;
/*  background-color: #ffffd0 !important;*/
}

現行のwindows7版firefox、google chrome、ie9、opera、safariで簡単な表示確認をしました。 ほんとにちょっと見ただけなので詳しいバージョン情報は省略。

htmlのサンプルコードは、 

<ul>
    <li class="attention_li">
        <p class="attention_st">注1)</p>
        <p>
            とてもとても重要な注意事項。とてもとても重要な注意事項。とてもとても重要な注意事項。とてもとても重要な注意事項。とてもとても重要な注意事項。とてもとても重要な注意事項。
        </p>
    </li>
    <li class="attention_li">
        <p class="attention_st">注1024)</p>
        <p>
            たいして重要でもない注意事項。たいして重要でもない注意事項。たいして重要でもない注意事項。たいして重要でもない注意事項。たいして重要でもない注意事項。たいして重要でもない注意事項。
        </p>
    </li>
    <li class="attention_li">
        <p class="attention_st">[注意事項]</p>
        <p>
            注意事項のフリをして注意事項ではない。注意事項のフリをして注意事項ではない。注意事項のフリをして注意事項ではない。注意事項のフリをして注意事項ではない。注意事項のフリをして注意事項ではない。
        </p>
    </li>
</ul>

ブロックの構造はこんな感じになります。

  • 注1)

    とてもとても重要な注意事項。とてもとても重要な注意事項。とてもとても重要な注意事項。とてもとても重要な注意事項。とてもとても重要な注意事項。とてもとても重要な注意事項。

  • 注1024)

    たいして重要でもない注意事項。たいして重要でもない注意事項。たいして重要でもない注意事項。たいして重要でもない注意事項。たいして重要でもない注意事項。たいして重要でもない注意事項。

  • [注意事項]

    注意事項のフリをして注意事項ではない。注意事項のフリをして注意事項ではない。注意事項のフリをして注意事項ではない。注意事項のフリをして注意事項ではない。注意事項のフリをして注意事項ではない。

  • li要素で1つのブロック
  • 「 注1) 」などの文字列で1つのブロック。
  • li内部のp要素で1つのブロック

最初は 

li.attention:before{
 content: "注)";
}

の様にやろうと思ったけど、回り込み回避も注意番号の指定もできなかったので断念。 結局「 注1) 」の部分をpタグで書くっていうだらしない事になってしまいました。

「texみたいにliの番号を引けたらいいんだけどなぁ」とかって考えたけど、無い物ねだりですよね。 それができたら[注意事項]みたいな書き方は無理だとしても、「 注???) 」の番号が省略できてかなり楽になるんですけど。

xml+xsltなら自由に書けるけど、こちらはセキュリティの都合で非推奨な雰囲気に。 例えばFirefoxのアドオン「NoScript」ではデフォルトではじかれてしまいます。 もちろんブログで使うとかは無理でしょうねぇ。 色々都合よくならないもんですな。

ちなみに、ie9でcssのcontentを使うにはDOCTYPEとかヘッダとかをキチンと書かないとダメなようです。 こちらも詳細不明で困惑。

投稿者