ブロック要素に指定したいが、ブロック要素を改行させたくない - CSS
ブロック要素に指定したいが、ブロック要素を改行させたくない場合のすらいる記述方法を紹介します。
概要
ブロック要素に設定した場合、ブロック要素の終了で改行されてしまいます。ブロック要素に設定はしたいがブロック要素の終了で改行させたくない場合は
displayプロパティに
inline-blockを設定します。
書式
現象の確認
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div><a>リンク1です</a><a>リンク2です</a><a>リンク3です</a></div>
</body>
</html>
HTMLファイルを表示すると下図の画面が表示されます。リンク1,リンク2,リンク3 の文字列が横に並びます。
リンクの文字列の枠の幅を指定したいと思い、下記のHTML,CSSファイルを用意します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="inline-block.css" />
</head>
<body>
<div><a class="inline-elem">リンク1です</a><a class="inline-elem">リンク2です</a><a class="inline-elem">リンク3です</a></div>
<hr />
</body>
</html>
.inline-elem {
width: 120px;
border: 1px solid #ff6a00;
}
上記のHTMLファイルをWebブラウザで表示すると下図のページが表示されます。
Aタグはデフォルトではインライン要素のため、widthプロパティを設定しても枠の領域は確保されず文字列の幅になってしまいます。
widthプロパティを有効にするため、Aタグのスタイルをブロック要素に変更します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="inline-block.css" />
</head>
<body>
<div><a class="block-elem">リンクAです</a><a class="block-elem">リンクBです</a><a class="block-elem">リンクCです</a></div>
</body>
</html>
.block-elem {
display:block;
width:120px;
border:1px solid #ff6a00;
}
上記のHTMLファイルを表示すると下図の画面が表示されます。リンク1,リンク2,リンク3 の文字列の枠が指定した幅になりますが、要素の終了で枠が改行されてしまい、枠が縦に整列されてしまいます。
対処法
ブロック要素として表示したいが要素の終了で改行されないようにするために
inline-block を利用します。
下記のHTML,CSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="inline-block.css" />
</head>
<body>
<div><a class="inline-block-elem">リンクαです</a><a class="inline-block-elem">リンクβです</a><a class="inline-block-elem">リンクγです</a></div>
</body>
</html>
.inline-block-elem {
display: inline-block;
width: 120px;
border: 1px solid #ff0000;
}
解説
下記のdisplayプロパティにより、インライン表示で改行されない設定となります。
display: inline-block;
表示結果
上記のHTMLファイルをWebブラウザで表示します。ブロック要素として表示されるためwidthプロパティが有効になり、幅が指定できます。
また、要素の終了で改行されないため、リンクは横に並ぶことが確認できます。
ブロック要素として表示しつつ、要素の終了で改行されない表示ができました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
