上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 divブロックfloat徹底講座編。今回は実際にdivブロックを使って、ブログの記事を書いてみる企画です。
 一番早く理解出来る方法は、実際に使ってみること。

 ただ使うだけでは面白くないので、何かに役に立つ方法を考えてみました。
 例えば、「少しだけ縦書き」なんてのは如何でしょう。

D I Vブロ ックを
自由に
操るのです !

 これを、1から順番に組み立ててみましょう。


ブロックの数を考える。

 今回は、ブロック幅をフォントの大きさにあわせ、右から横に3個並べてみました。文字は画面の端に行くと、自動的に折り返されますよね。フォント幅にブロックの幅を合わせれば、<br>タグで改行せずとも、1文字ごとに自動的に折り返されるから、さも縦一行かのように見せることができます。

1
2
3

clear:both;
*細いブロックを右から順番に並べている様子。

 使うdivブロックの数は、文字の部分に3つ。
 文字部分が吹っ飛ばないように囲ってコーティングする部分に1つ。
 最後にfloatを解除するためのボックス(ダミーでも何でもいいので)1つ。

 合計5つ必要です。


HTMLの書き方と構造を考える。

 まず必要なのは、文字ブロックを囲む大きなブロック。もう一つは、決まりごとであるfloat解除用ブロック。
これは何も考えずに普通に並べて書けばOK。

<div style="">
文字ブロックコーテイング用のブロック
</div>
<div style="">
clear:both; (フロート解除ブロック)
</div>


 次は、中に3つ並べる文字用ブロックです。これを書き加える場所は、コーテイング用ブロックの中に入れないといけません。入れる場所は、以下のようになります。

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

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

「<div>」から、「</div>」の中に入れ込めば、コンピューターは「あそこの箱の中に箱が3つ入っているんだな」と理解します。

 これでHTML部分は完成です。順を追って考えれば、意外と簡単☆


■次のページでは、実際にスタイルを当てていきます。
実際にdivブロックfloatを記事で利用する(CSS)

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

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