以下のようなHTML文書(bodyのみ抜粋)がある。
<div class="menu"> <p>[<a href="/~c104000/diary/">Diary</a>] [<a href="/~c104000/hoge/">ほげ</a>] [<a href="/~c104000/myworld/">まいわあるど</a>] [<a href="/~c104000/game/">ゲームネタばらし</a>]</p> </div> <hr> <h1>まいわあるど</h1> <h2>はじめに</h2> <p>ほげほげ</p> <h2>つぎに</h2> <p>へろへろ</p> <p>おしまい</p> <hr> <div class="menu"> <p>[<a href="/~c104000/diary/">Diary</a>] [<a href="/~c104000/hoge/">ほげ</a>] [<a href="/~c104000/myworld/">まいわあるど</a>] [<a href="/~c104000/game/">ゲームネタばらし</a>]</p> </div>
これをテキストブラウザで見ると以下のようになる。
[Diary] [ほげ] [まいわあるど] [ゲームネタばらし] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ まいわあるど はじめに ほげほげ つぎに へろへろ おしまい ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ [Diary] [ほげ] [まいわあるど] [ゲームネタばらし]
このようなHTML文書をCSS対応ユーザエージェントで見たときに、 概ねmyworld.pngのような見栄えになるような CSSを定義せよ。
position: relative で幅18ex、高さ12exのボックスを配置すると 以下のようになる(分かりやすいようborderをつけた)。
この内部に背景色がそれぞれ緑、白、赤のボックスを3つ左から 右に配置して並べ、イタリア国旗風に見えるボックスを作成せよ。
テレビやパンフレットの人物紹介などで、
のように1文字だけ色を変えて90度に曲がるような装飾が ここ数年定着している。
幅200ピクセル程度の似顔絵画像等を作成し、その周囲を90度に 曲がりながら名前を示す文字が流れていくようなボックスを幅400px、 高さ300pxで作成せよ。似顔絵画像の作り方としては、
GIMPで200x150の新規キャンバスを作りそこに手書きする。
デジカメで撮った写真を自分宛にメイルで送り、
convert -geometry 200x150 元ファイル.jpg hogehoge.jpgのようにする。
などの方法がある。
(原寸画)