Tips & Trick 19

QUESTION1 右上に囲みを表示させろ!

「HTMLパズルに挑戦しよう」
宛先
正解が分かった人も分からなかった人も、ご意見、ご感想など何でもOK、次の宛先にメールしよう。 用件の欄には必ず
HTML TIPS&TRICK
の1行を忘れずに。あなたの挑戦を待つ。
ip-cdrom@impress.co.jp
今月のテーマ
囲みを制する

本誌をめくってみればわかるように、記事にはさまざまな「囲み」がある。注意書きを載せたり、 用語を解説したりする部分だ。ウェブページでも、文章を順番に並べるだけでなく、目立つ囲みを作って、 注進となる文章を回り込ませれば、雑誌のような本格的なデザインになる。 思いつくままに「TIPS」や「POINT」を入れてみるといいだろう。今月は、 囲みとテキストの回り込みに関するパズルに挑戦していただく。 トリックがわかったらすぐに回答を送ってきてほしい。 正解者には抽選でオリジナル腕時計をプレゼントさせていただく。なお、正解は来月のこのコーナーで発表する。 それでは頭を柔らかくして、今月のテーマ”囲みを制する”にチャレンジ!


 スタイルシート定義部分


<!--
    BODY{background-color:lightblue;font-size:10pt}  /* この部分は問題と直接は関係ありません */
    .boldfont{text-align:center;font-weight:bold}    /* 囲みの部分のための定義 */
-->

 本体

<!-- 囲み部分 スタイルシートで枠の表示・右寄せであること・背景色などを指定しています -->
<DIV style="border-style:solid;
            border-color:white;
            width:27ex;
            float:right;
            padding:1em;
            text-align:left;
            color:white;
            background-color:midnightblue">
    <DIV class="boldfont">  <!-- センタリングと太字にするクラスを指定しています これ以降も同じです-->
        「HTMLパズルに挑戦しよう」<BR>
        宛先
    </DIV>
    正解が分かった人も分からなかった人も、ご意見、ご感想など何でもOK、次の宛先にメールしよう。
    用件の欄には必ず
    <DIV class="boldfont">
        HTML TIPS&TRICK
    </DIV>
    の1行を忘れずに。あなたの挑戦を待つ。
    <DIV class="boldfont">
        ip-cdrom@impress.co.jp
    </DIV>
</DIV>  <!-- ここまでが囲み -->
<DIV style="text-align:center">  <!-- タイトル部分の開始 -->
    <SPAN style="color:red">今月のテーマ</SPAN><BR>
    <SPAN style="font-size:2em">囲みを制する</SPAN>
</DIV>  <!-- タイトル部分終了 -->
<P style="clear:left">  <!-- 本文 -->
本誌をめくってみればわかるように、記事にはさまざまな「囲み」がある。注意書きを載せたり、
用語を解説したりする部分だ。ウェブページでも、文章を順番に並べるだけでなく、目立つ囲みを作って、
注進となる文章を回り込ませれば、雑誌のような本格的なデザインになる。
思いつくままに「TIPS」や「POINT」を入れてみるといいだろう。今月は、
囲みとテキストの回り込みに関するパズルに挑戦していただく。
トリックがわかったらすぐに回答を送ってきてほしい。
正解者には抽選でオリジナル腕時計をプレゼントさせていただく。なお、正解は来月のこのコーナーで発表する。
それでは頭を柔らかくして、今月のテーマ”囲みを制する”にチャレンジ!
</P>


トップページ