上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 徹底実用講座、divブロックfloat、パート2です。
 最初から読むにはコチラから。
実際にdivブロックfloatを記事で利用する

 HTML骨格は前回完成しました。今回は順番にスタイルを当てていきましょう。


HTML骨格

 前回出来上がったdivブロックのHTML骨格部分。実際に表示するとどんなものになるのでしょう?
 ブロックにボーダーを付けて、わかりやすく表示してみます。

<div style="">
 <div style="">
 縦書き文字 1
 </div>

 <div style="">
 縦書き文字 2
 </div>

 <div style="">
 縦書き文字 3
 </div>

</div>
<div style="">
clear:both; (フロート解除ブロック)
</div>

 こんな感じで、5つの箱が出来ています。きちんとコーティング用のボックス内に、3つほど文字用ブロックが入っていますね。


ブロックを並べるスタイル

 次は、ブロック幅をフォントの幅と同じにして、縦に立てて並べてみます。
 ポイントは、フォントサイズの指定フォントサイズとブロックの横幅を合わせるフロートさせる、この3項目です。

 スタイルシートでは、「font-size:○px;」「width:○px;」「float:right;」を書き加えます。

<div style="">
 <div style="font-family:MS 明朝;font-size:23px;width:23px;float:right;">
 縦書き文字 1
 </div>

 <div style="font-family:MS 明朝;font-size:23px;width:23px;float:right;">
 縦書き文字 2
 </div>

 <div style="font-family:MS 明朝;font-size:23px;width:23px;float:right;">
 縦書き文字 3
 </div>

</div>
<div style="">
clear:both; (フロート解除ブロック)
</div>

 これを実際に表示させると、以下のようになります。

縦書き文字 1
縦書き文字 2
縦書き文字 3

clear:both;
*分かりやすくするため、ブロックに背景色、ボーダーを加えています。

 これで、縦書きはほとんど完成です。行数を増やす方法は、そう、「縦書き文字3」の次に、次々と同じスタイルを指定したボックスを続けて記述すればいいだけです。

 これで、divブロックfloatの解説は終了ですが、どうせならもう少しスタイルシートを整えて、もう少しカッコイイレイアウトを目指してみましょう。


■次の記事からは、様々なスタイルシート指定を実技実践していきます。
実際にdivブロックfloatを記事で利用する(禁則処理)

☆実際にDIVボックスを、リアルタイムにフロートさせてみよう。
divフロートチェックツール(リアルタイム)

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Sun.05.09.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。