ウェブログラム ~学習するな実践せよ~

文字・背景の装飾編

このシリーズの前記事はこちら(全5記事)

本章では、文字の装飾や背景の設定などを行います。

扱う要素は、ヘッダー部分のタイトル、メイン記事の背景、そしてリンクの文字です。

タイトル文字の装飾

サイトのタイトルに、以下のようなグラデーションをかけてみましょう。

文字色にグラデーションを設定する方法はいくつかありますが、今回は、文字の裏に背景画像を設定し、文字をくり抜くことで背景色を表示させる方法を使います。

『フレックスボックスで作る3カラムレイアウト ヘッダーのコーディング』の章で記述したスタイルに、以下のコードを書き加えていきます。

まず、h1の背景を設定します。背景の設定には、background: url( )を使います。urlの中には、用意された背景画像のurlを記入してください。背景画像のサイズがh1の領域より大きいので、background-size: containで、h1内に収めます。

次に、-webkit-background-clip: textで背景を文字の形にくり抜き、 -webkit-text-fill-color: transparentで文字を透明にすることで、背景を文字型に表示させます。なお、-webkit-については別記事をご参照ください。

背景画像 名前:h1-background.png 場所:imgフォルダ
index.html
/*ヘッダー*/
<h1>東京グルメ総まとめ</h1>
style.css
.titlebox h1 {
font-size: 45px; /*前の章で記述済み*/
line-height: 1; /*前の章で記述済み*/
margin: 0; /*前の章で記述済み*/
background: url(img/h1-background.png);
background-size: contain;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

メイン記事の背景設定

記事のメイン部分に、以下のように背景を設定し、サイトを華やかにしましょう。

『フレックスボックスで作る3カラムレイアウト 全体のレイアウト編』で、「header要素とfooter要素の間に、メインコンテンツの背景を置くためのdiv(class=main-contents)を作成し…」という操作があったのを覚えていますか?

このdiv(class=main-contents)に対し、style.cssで背景を設定します。設定には、  background-image: url( )を使います。url( )の中には、用意された背景画像のurlを記入してください。

さらに、  background-size:coverを指定して、背景画像が背景領域を完全に覆うように設定します。 

背景画像 名前:main-background.png 場所:imgフォルダ
index.html
<div class="main-contents">
 /*左カラム(nav)、中央カラム(article)、および、右カラム(aside)のコードが入る*/
</div>
style.css
.main-contents {
width: 100%; /*前の章で記述済み*/
height: 100%; /*前の章で記述済み*/
background-image: url(img/main-background.png);
background-size:cover;
}

リンク文字の装飾

文字がリンクになっている場合、その文字はデフォルトで青色にアンダーラインがついたものになっています。また、一度リンク先を訪問した文字は紫色になります。

サイト全体の色合いに、このデフォルトの色合いが合わない場合、デフォルトを解除することができます。

メイン記事の右カラム(nav)のコードを例にとって見てみましょう。※コードが長くなるので、画像のソースやalt属性は省略しています。

デフォルトの状態

リンクになっている文字は<a></a>タグに入っているため、デフォルト解除のためのコードは、この<a></a>タグに対して行います。

まず、 text-decoration: noneでデフォルトを解除し、文字色をサイトに合ったものに指定します。

しかしながら、これだと文字がリンクになっていることがわかりづらいので、今回は、文字上にカーソルを合わせたときに、矢印でなくポインター(指マーク)が表示されるようにします。さらに、カーソルが乗っている文字のサイズを少し大きくします。

文字にカーソルを合わせたときのスタイルは、擬似クラス:hoverを使います。

この他、一度訪問したリンクについては、擬似クラス:visitedを用いて文字色を指定することで、デフォルトを解除できます。

index.html
<nav>
<dl>
<dt><img alt="">和食</dt>
<dd><img src="" alt=""><a href="#">寿司</a></dd>
<dd><img src="" alt="" ><a href="#">家庭料理</a></dd>
<dd><img src="" alt=""><a href="#">うどん・そば</a></dd>
<dd><img src="" alt=""><a href="#">ラーメン</a></dd>
/*以下省略*/
</dl>
<nav>
style.css
nav dd a {
text-decoration: none;
color: #766550;
}

nav dd a:hover{
text-decoration: none;
color: #766550;
font-size: 20px;
cursor: pointer;
}

nav dd a:visited {
color: #766550;
}

文字や背景の装飾ができると、サイトをより華やかで個性的にすることができます。

今回取り上げたものはごく一部ですので、他の記事や練習問題にチャレンジしてたくさんのスタイルを使いこなせるようになりましょう!