CSS16 〜 display・インライン・ブロック要素〜

下記のWebページを内部スタイルシート形式で作成してください。
事前準備
ヒント
こたえ
- ソースコード

下記のWebページを内部スタイルシート形式で作成してください。

下記のWebページを内部スタイルシート形式で作成してください。
文字だけでなく、水色背景内でリンクを押せるようにしてみましょう。

事前準備

デスクトップ上にフォルダ「webst8」を作成します(すでに作成済みの場合は不要です)。

「webst8」フォルダの中に「css-lesson16」フォルダを作成して、Atomで「lesson16.html」を新規作成します。

以下はCSS無しのHTMLファイルです。下記のHTMLコードを利用して「lesson16.html」に内部スタイルシート形式でCSSを記述していってください。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>はじめてのCSS</title> 
		 <style media="screen">
		 .sample1 a{
			 text-decoration: none;
			 color: #000;
		 }
		 .sample1 li{
			 width: 150px;
			 text-align: center;
			 background: skyblue;
			 display: inline-block;
		 }
		 </style>
	</head>
	<body>
		<h2>水色枠内でリンクを押せるようにする</h2>		
		<ul class="sample1">
			<li><a href="#">ホーム</a></li>
			<li><a href="#">サービス</a></li>
			<li><a href="#">会社情報</a></li>
			<li><a href="#">お客様の声</a></li>
			<li><a href="#">お問い合わせ</a></li>
		</ul>
	</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSS</title>

.sample1 a{

text-decoration: none;

color: #000;

}

.sample1 li{

width: 150px;

text-align: center;

background: skyblue;

display: inline-block;

}

</style>

</head>

<body>

<h2>水色枠内でリンクを押せるようにする</h2>

<li><a href="#">お客様の声</a></li>

<li><a href="#">お問い合わせ</a></li>

</ul>

</body>

</html>

■上記CSS無し版の表示例

一通り記述できたら上書き保存して「lesson16.html」をダブルクリックして開きます。課題にあった画面通り表示されていれば、完成です。

ヒント

a要素は通常インライン要素です。幅や高さを設定できないので、displayプロパティで幅や高さを設定できるようにする必要があります。

代表的なブロックレベル要素とインライン要素

代表的なブロックレベル要素として以下のようなものがあります。

項目	主な要素	特徴
ブロックレベル要素	div h1〜h6 p ul,ol,li dl,dt,dd table form	ブロックレベル要素は各要素が一つのブロック（塊）で、以下のような特徴があります。要素の前後に改行が入り、ブロック要素同士縦に並ぶ横幅や高さを指定できる余白(margin,padding)が指定できる
インライン要素	a span img(※) label input(※) textarea(※)	代表的なインライン要素として以下のような特徴があります。要素の前後に改行が入らず、インライン要素同士横に並ぶ横幅や高さを指定できない(※) ブロックレベル要素のように余白設定(margin,padding)が効かない (※)ただし、img、input、textareaなどの一部のタグは幅高さや余白の設定が可能です。

項目

主な要素

特徴

ブロックレベル要素

div
h1〜h6
p
ul,ol,li
dl,dt,dd
table
form

ブロックレベル要素は各要素が一つのブロック（塊）で、以下のような特徴があります。

要素の前後に改行が入り、ブロック要素同士縦に並ぶ
横幅や高さを指定できる
余白(margin,padding)が指定できる

インライン要素

a
span
img(※)
label
input(※)
textarea(※)

代表的なインライン要素として以下のような特徴があります。

要素の前後に改行が入らず、インライン要素同士横に並ぶ
横幅や高さを指定できない(※)
ブロックレベル要素のように余白設定(margin,padding)が効かない

(※)ただし、img、input、textareaなどの一部のタグは幅高さや余白の設定が可能です。

CSSのdisplayプロパティを利用して上記の性質を変化させることができます。

display:inline;指定した要素をインライン要素の性質にする(改行なし、幅・高さ・余白を指定できない)
display:block;指定した要素をブロックレベル要素の性質にする（改行あり、幅・高さ・余白を指定できる）
display:inline-block;指定した要素を中間の性質にする(改行がつかないが、幅・高さ・余白を指定できる)
display:none;指定した要素を非表示にする

(他にも設定値はありますがここでは割愛します。)

詳細は下記をご参照ください。
表示に関するスタイル display

こたえ

作り方を下記に載せました。

a要素をブロック要素にしてwidthを持たしています。
display:block;の代わりに、display:inline-block + width:100%でも構いません。

ソースコード

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>はじめてのCSS</title> 
		 <style media="screen">
		 .sample1 a{
			 text-decoration: none;
			 color: #000;
			 display: block;
		 }
		 .sample1 li{
			 width: 150px;
			 text-align: center;
			 background: skyblue;
			 display: inline-block;
		 }
		 </style>
	</head>
	<body>
		<h2>水色枠内でリンクを押せるようにする</h2>		
		<ul class="sample1">
			<li><a href="#">ホーム</a></li>
			<li><a href="#">サービス</a></li>
			<li><a href="#">会社情報</a></li>
			<li><a href="#">お客様の声</a></li>
			<li><a href="#">お問い合わせ</a></li>
		</ul>
	</body>
</html>