定義リスト【dl】をワンセットにし、フロートで横並びにします。class="text2">ハクジラとヒゲクジラに大別される。class="text2">ハクジラとヒゲクジラに大別される。class="text2">ハクジラとヒゲクジラに大別される。</dd></dl></div>今回は、ここに、これを収めるという考え方ではなく、200ピクセル×200ピクセルの画像に説明を付け3つ並べるということにしました。【dl】の中身は、ひとつの【dt】に対して、【dd】をふたつ。これでワンセットです。サンプルCSSホームページビルダーでの設定サンプルページは、こちらからどうぞ!※このサンプルページは、ページ全体でのCSSリセットは行っていません。下記の2の設定で作っています。1の設定をしている場合は、必要なし。4.8em;}CSSのポイント!フロートの指定とフロートの解除フロートを指定するのは、当然【dl】。hidden;】を指定。フロートの解除についての詳細は、→こちらをご参照ください。block;】のスタイルを指定。block;】を指定しなくても、「くじら」って文字は、画像の下に配置されます。↑↑↑こんな風に、なっちゃうわけですよ。block;】を指定せず画像の後ろで改行すれば、文字「くじら」は、ちゃんと2行目に配置されます。絶対必要っていうスタイルではありません。今回はおのおのに異なる装飾にするので、2つのクラス【dd.text1】と【dd.text2】を作り、ddに指定しました。今回の設定では、画像は200ピクセル。【dt】と【dd.text1】に入れる文字は1行です。2行にしたければ、他も2行入れてください^^;(嘘です!下記の設定を見てやってみてね)【dd.text2】には、3行分の高さを設定しています。ことなので、4行書きたい場合は、値を変えてくださいね!行間の指定です。これが1行分の高さだと思ってください。1.6;】3行設定なので、これを3倍した数値を高さに指定します。例:行間を1.5とって、4行にしたい場合は、高さは6emとればOKです。【dt】に入れるのは、画像だけじゃダメなの?【dt】に画像だけ入れて、下の「くじら」は、新たなる【dd】を作って入れた方が、いいんじゃない?って、思った?一応、<dl><dt><dd>は、定義リストってたいそうな名前がついているので、「くじら」の定義に、こだわってみただけです。画像だけでは、なんだから、テキストの「くじら」も入れてみましたって感じです。私達初級者が、厳密にルールを守ろうとすると、がんじがらめになり、サイト作成がツマラナイものになっちゃいますから、好きに作ればいいと思います。class="text1">なんて使いたく方^^;は、こんな書き方も出来ますってことで・・・サンプルページは、こちらから【dd】以外の設定は、同じです。<dd>哺乳類・クジラ目<span>ハクジラとヒゲクジラに大別される。block;】でブロックレベル化。【dd.text2】に当たる部分を<span>~<span>で囲みます。似たようなことをやった記事は、→こちらから。作り方など参考にしてね。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。29当Blogへようこそ管理人のルビと、申します。~~う、分からない事だらけ!!と頭をかかえ、ホームページビルダーと日々格闘中(?)です。初心者の方、一緒に覚えていきませんか?宜しくお願いします。