前ページで背景に透過した背景画像を入れました。
ここではヘッダーの上をblackにして上に1列、左側に文字を入れてみましょう。
上部左に文字を1列入れる
左上に文字を1列入れてみましょう。
前ページでheader_1の背景に透過画像を設置しました。
背景画像の上部に入れる文字列の背景をheader_1aで設置し、左側に文字をいれてみましょう。
htmlソース
<body>
<div id="container">
<header>
<div class="header_1">
<div class="header_1a">
<p class="subject_left">ホームページを</p>
</div>
</div>
</header>
</div><!--container-->
</body>
cssファイル
文字の背景header_1aをblackにして、左側に文字を1列入れてみましょう。
cssソース
.header_1a {
width: 100%;
height: 25px;
background: black;
}
.subject_left {
line-height: 25px;
color: white;
text-align: left;
padding-left: 7px;
}
黒枠はbody、 はcontainerです。
ホームページを
おや？文字の背景を黒色にしたはずなのに、透過してる。
実は、header背景の透過が影響してるんです。
こんな時は文字背景を絶対配置で設置します。
やってみましょう。
htmlファイル
背景画像header_1を配置します。
次に、文字列の背景をheader_1aで設置し、文字をいれます。
htmlソース
<body>
<div id="container">
<header>
<div class="header_1"></div>
<div class="header_1a">
<p class="subject_left">ホームページを</p>
</div>
</header>
</div><!--container-->
</body>
cssファイル
文字の背景を絶対配置するため、headerにposition: relativeを指定し、基準点にします。
header_1aを絶対配置します。
cssソース
header [
position: relative; /*追記*/
}
.header_1a {
width: 100%;
height: 25px;
background: black;
position: absolute;
top: 0;
left: 0;
}
.subject_left {
line-height: 25px;
color: white;
text-align: left;
padding-left: 7px;
}
黒枠はbody、 はcontainerです。
ホームページを
上部左右に文字を1列入れる
上の例では左側に文字を1列入れました。
次は、右側にも入れてみます。
htmlファイル
右側に表示するためのソースを1列追記しました。
htmlソース
<body>
<div id="container">
<header>
<div class="header_1"></div>
<div class="header_1a">
<p class="subject_left">ホームページを</p>
<p class="subject_right">サイト</p>
</div>
</header>
</div><!--container-->
</body>
cssファイル
subject-leftのソースを1列書き換えます。
左右に表示するため、floatプロパティでsubject_leftを左へ寄せる。
floatプロパティはここから
cssソース
.subject_left {
float: left; /*追記*/
line-height: 25px;
color: white;
text-align: left;
padding-left: 7px;
}
.subject_right {
line-height: 25px;
color: white;
text-align: right;
padding-right: 7px;
}
ホームページを
サイト
上部左右にそして中央にも文字を1列入れる
中央にも1列文字を入れてみましょう。
htmlファイル
中央に表示するため、subject:leftと、subject:rightの間にsubject: centerを追記しました。
htmlソース
<body>
<div id="container">
<header>
<div class="header_1"></div>
<div class="header_1a">
<p class="subject_left">ホームページを</p>
<p class="subject_center">自作する</p>
<p class="subject_right">サイト</p>
</div>
</header>
</div><!--container-->
</body>
cssファイル
左右、中央に文字を1列表示するには、display: tableを使います。（他にも方法はいろいろありますよ。）
displayプロパティに、値tableを設定するとtable要素のように表示できます。
display:tableはここから
また、displayプロパティに値table-cellを設定すると、1列のセルのように表示できます。
セルの幅を揃えるため左、中、右をwidth%で1：2：1に分けました。
cssソース
.header_1a {
display: table; /*追記*/
width: 100%;
height: 25px;
background: black;
position: absolute;
top: 0;
left: 0;
}
.subject_left {
display: table-cell;
width: 25%; /*追記*/
line-height: 25px;
color: white;
text-align: left;
padding-left: 7px;
}
.subject_center {
display: table-cell;
width: 50%;
line-height: 25px;
color: white;
}
.subject_right {
display: table-cell;
width: 25%; /*追記*/
line-height: 25px;
color: white;
text-align: right;
padding-right: 7px;
}
ホームページを
自作する
サイト
サイト上部などに文字を表示する場合などに使えます。
次ページでロゴマークを入れてみましょう。