画像の上に文字を表示したい場合。

この記事は約236秒で読めます。

どうも!!こうすけです。

今日はメモ的な感じで記事を書きたいと思います。
いつもメモみたいなもんですけどね。

今回は画像の上に文字を表示させる方法を紹介します。

1. CSSにてクラスを作成する

まずCSSにクラスを作成します。クラスとは、文字を大きくした、文字を赤色にした、背景色を黄色にした、そういう設定をひとまとまりにして名前をつけたものですね。このクラスを使うことで、そのクラスに設定したデザインで文字などの変更をすることができます。

以下のようにクラスを作成します。クラス名は自分の好きな名前で結構です。だいたい、何のために使うクラスかがわかるようにします。私はfacebookのフォローボタンの下に画像を使いたかったのでこのようなクラス名(facebook-folow-button)にしてます。

.facebook-folow-button{
}

2. クラス内にbackground-imageを記述する

作成したクラス内にbackground-imageを記述します。

.facebook-folow-button{
    background-image: url('ここに使いたい画像のURLを記入する');
}

URLは相対パス、絶対パスどちらでも構いません。自分は全て記入するのがめんどくさいので相対パスを記入してます。

3. 文字をdiv要素で囲み、作成したクラスを指定する。

あとは、画像の上に表示したい文字をdiv要素で囲み、作成したクラスを指定します。

以下のように記述します。

<div class="facebook-folow-button">
この記事がいいと思ったらフォローよろしくお願いします。
</div>

するとこんな感じで表示されます。


このブログのフォローボタンや文字もこのやり方で表示させています。

4. 最後に

画像の上に文字を表示させたりするのはホームページを作成する上で応用が利きます。

色々試してみましょう

この記事がいい!!と思ったらいいねツイートよろしく!!

 

作成者: kosuke

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です