画像の横に文字を表示するには?回り込みの設定と解除【CSS】

回り込みを行う設定

floatプロパティ

float:値



値には「left」または「right」を記述します。


左に配置して右に回り込む場合はleft
右に配置して左に回り込む場合はrightになります。
要するに設定しているもの自身の位置を入れればOKです。

floatプロパティは全ての要素に使用できます。
floatプロパティプロパティは子要素へは継承されません。

(例)


画像

このように画像の横に文字を記述していく事ができます。右に回り込む場合はfloatプロパティの他にmargin-rightプロパティ(右の余白)を指定すると良いです。


(例)



画像

このように画像の横に文字を記述していく事ができます。左に回り込む場合はfloatプロパティの他にmargin-leftプロパティ(左の余白)を指定すると良いです。




回り込みの解除を行う設定

clearプロパティ

clear:値


値には
「left」左配置、右への回り込みを解除
「right」右配置、左への回り込みを解除
「both」全ての回り込みを解除

ブロックレベル要素に使用できます。
回り込みを解除したい場所からはブロックレベル要素clearプロパティを使うことになります。


clearプロパティは子要素へは継承されません。





カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

About Site(サイト案内) 概要

アクセスアップ方法・アクセスアップツールを中心に紹介しています。出来るだけ易しいサイト作りを目指したいと思います。まだまだコンテンツが少ないですが確実なアクセスアップ方法を紹介しますのでどうぞ宜しくお願いします。アクセスアップ記事以外にもWeb製作のことやiPhoneのこと。ニュースなども取り上げていきます。


◆リンク
http://secretaccess.seesaa.net/
タイトルは『Digital Life -デジタルライフ-
(テキストリンクのみです)
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。