https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

ボックスを並べる

{float-位置;}でボックスの横にボックスや文字を並べることができます。 両者の間隔はmarginの属性を指定することで空けることができます。

横に並んだボックスや文字の回り込みを解除するにはイメージ、テーブルの項と同様に <br clear="all">か{clear:both;}を使います。

■ ボックスの表示位置を指定する

ボックスを表示できる位置は以下の通りです。

位置説明
noneボックスの表示位置は指定しません。(デフォルト)
leftボックスが左に表示されその後ろに続く文字やボックスが右に回り込みます。
rightボックスが右に表示されその後ろに続く文字やボックスが左に回り込みます。

【ブラウザ表示】

ボックスが左に配置されました。
二つ目のボックスが右に並びました。
ここで回り込みが解除されました。

ソース

<div class="box20">ボックスが左に配置されました。</div>
<div class="box21">二つ目のボックスが右に並びました。</div>
<div class="cr1">ここで回り込みが解除されました。</div>

外部ファイル

div.box20{
border:1px solid;
float:left;
width:200px;
height:200px;
}
div.box21{
border:1px solid;
width:200px;
height:200px;
}
div.cr1{clear:both;}


<body>~</body>に直接記入する場合

<div style="border:1px solid; float:left; width:200px; height:200px;">
ボックスが左に配置されました。
</div>
<div style="border:1px solid; width:200px; height:200px;">
二つ目のボックスが右に並びました。
</div>
<div style="clear:both;">ここで回り込みが解除されました。 </div>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

枠線の太さを指定する
枠線の種類を指定する
枠線の色を指定する
個別の枠線を一括に指定する
ボックスの横幅、高さを指定する
外側、内側の余白を指定する
背景色や画像を指定する
背景画像の表示方法を指定する
背景画像の表示位置を指定する
はみ出る部分を表示させる
ボックスの配置方法を指定する

スタイルシート一覧のページに戻る