CSSで改行する・改行しないを設定する方法

トップページ » スタイルシート入門講座 » CSSで改行する・改行しないを設定する方法

■強制改行について

本来、改行するときは改行タグ「<br />」をHTMLファイルに記述するのですが、見出しタグ「h1」～「h6」や段落タグ「p」の前後は、強制的に改行されて表示されます。強制的に改行したくない時は、「display」プロパティに「inline」を指定すると強制的に改行されません。見出しタグや段落タグ以外でも、強制的に改行させない手段として有効です。

CSSプロパティ	意味
display：display	要素の表示形式（ブロック・インライン）を指定

■要素の表示形式（ブロック・インライン）を指定

displayプロパティは、ブロックレベル・インラインレベル等の、要素の表示形式を指定する際に使用します。例えば、インライン要素のイメージタグ「<img>」に display:block を指定すると、ブロック要素として表示されるようになります。逆にブロック要素の見出しタグ「<h1>」にdisplay:inline を指定すると、インライン要素として表示されるようになります。

ブロック要素とは、見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素で、一般的なブラウザでは前後に改行が入って表示されます。インライン要素とは主に文章の一部として利用される要素であり、その前後は改行されません。

displayプロパティの指定値
none	指定要素とそこに含まれる子要素のボックスが生成されず、Webページに表示されません。
block	指定要素がブロックレベルで表示されます。
inline	指定要素がインラインレベルで表示されます。
list-item	指定要素の内容をリスト（箇条書きの項目）として、内容が収められるボックスとリストのマーカーのためのボックスを生成します。
marker	リストのマーカーのためのボックスを生成します。この値は、:before擬似要素および :after擬似要素にのみ適用することができます。
compact	前後の状況により、ブロックレベルになったりインラインレベルになったりします。指定要素の後にくるブロックレベル要素が、回り込み（float）または絶対配置されておらず、指定要素の内容の幅が、後にくるブロックレベル要素の左マージンの幅以下で1行で収まる場合には、その左マージン内にインラインレベルとして表示されます。それ以外の場合には、ブロックレベルで表示されます。
run-in	前後の状況により、ブロックレベルになったりインラインレベルになったりします。指定要素の後にくるブロックレベル要素が、回り込み（float）または絶対配置されていない場合には、その先頭にインラインレベルとして表示されます。それ以外の場合には、ブロックレベルで表示されます。

CSSファイル記述例
h1#test-display{ display:inline; }
HTMLファイル記述例
<h1 id="test-display">要素の表示形式インラインを指定</h1>★本来は改行されて表示されます。★
Webページの表示
要素の表示形式インラインを指定 ★本来は改行されて表示されます。★

フェイスブック若き天才の野望

発売：2011/01/13

定価：1,890円

著者：デビッド・カークパトリック

出版：日経BP社

内容：ユーザー数が5億人を超え、会社の時価総額が2兆円を超え、グーグルを驚かす存在となった、フェイスブック。同社を率いるマスコミ嫌いのCEO、マーク・ザッカーバーグからの信頼を勝ち得たベテラン記者が、徹底取材からフェイスブックの真実を初めて明かします。
全部無料でつくるはじめてのホームページ & HTML

発売：2010/07/30

定価：1,869円

著者：浅岡省一

出版：翔泳社

内容：ホームページの雛形となるサンプルが丸ごと収録されているので、ソフトや素材と組み合わせれば、自分好みのホームページを無料で簡単に作ることも可能です。Windows7/Vista/XPに対応してます。

ロリポップ！

「コロリポプラン」なら月額105円で容量2GB、「ロリポプラン」なら月額263円で容量13GB、マルチドメイン、データベース、共有SSLが使えます。「チカッパプラン」なら月額525円で容量30GB利用可能です。
ミニバード

月額263円で、ディスク容量が30GB利用可能です。ポイント制があり、ポイントを最大まで利用すると、月額約197円の換算になります。
ファイアバード

50GBの大容量で、月額525円からのレンタルサーバーです。マルチドメイン、無料お試し期間、その他ユーザーツールなど便利な機能がたくさんあります。
さくらインターネット

月額125円のプランからビジネスにも使えるプランまで、予算や利用目的で選べる共用レンタルサーバや、サーバ1台まるごと利用できる専有レンタルサーバなど様々なサービスが用意されています。
ＷＡＤＡＸレンタルサーバー

サポート充実、高機能、高セキュリティーをお求めなら、イチオシのレンタルサーバーです。セコムと提携することで、業界屈指の高セキュリティーを実現してます。

要素の表示形式インラインを指定