本誌をめくってみればわかるように、記事にはさまざまな「囲み」がある。注意書きを載せたり、 用語を解説したりする部分だ。ウェブページでも、文章を順番に並べるだけでなく、目立つ囲みを作って、 注進となる文章を回り込ませれば、雑誌のような本格的なデザインになる。 思いつくままに「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>