【作ってみた】画像の上に文字を表示させる方法 | DXシステム開発・WEB制作 SmileVision|大阪のWEBシステム開発 SmileVision

社員ブログ 【作ってみた】画像の上に文字を表示させる方法

<こんにちは、開発部のおいぬです(▽・x・▽) 今回はCSSを使って、画像の上に文字を表示させる方法をまとめました。

CSS(シーエスエス)とは?

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。

(HTMLクイックリファレンスより引用)
私たちがウェブページを作成するときはHTML(エイチティーエムエル)という言語を使って制作しています。ネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。
CSSはそのHTMLと組み合わせて、ウェブページの装飾(文字サイズとか、色とか)を指定するものです。
文字をのせた状態の画像を作るのではなく、のせてる文字を変更できたら良いなと思ったので、今回この画像に文字を表示させることに挑戦しました↓↓
music_viola
※ヴィオラです。ヴァイオリンじゃありません(重要)

作り方

今回は、調整前の本来の位置から文字をずらす方法を使って、画像の上に文字を表示させます。調整前後
本来の表示位置から文字をずらすには、スタイルシートのpositionプロパティを使います。positionプロパティはを使うと、指定した距離分ずらすことができます。
top(上から)、bottom(下から)、left(左から)、right(右から)
positionプロパティの値は、
static…指定無し。初期値。
relative…相対位置への配置。
absolute…絶対位置への配置。
fixed…絶対位置への配置。スクロールしても位置が固定されたまま。

absoluteは、親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。

(HTMLクイックリファレンス(position)より引用)
つまりabsoluteの前にstatic以外の値を指定すると親ボックスになるということですね。
プログラムはこんな感じです。

親ボックスは

です。
relativeは相対位置ですが、数値を指定しない限り元の位置から動きません。
画像の上に表示させるそれぞれの文字は、

です。
親ボックスを基準に上から18px、左から128pxの位置に「うずまき」と表示させています。
表示させたい文字をそれぞれずらしていきます。
完成したページはこちらです:作ってみたページへいく

これを機にみなさん、ヴィオラのパーツの名前を覚えてみてください(^▽^*)笑
おいぬはf字孔が好きです。

あると便利なChrome拡張機能「Page Ruler」

上から◯◯px、左から◯◯pxのように、Web上の要素の距離を測るときにすごく役立ちましたので、ぺたりとしておきます。
Chrome拡張機能:Page Ruler

ABOUT ME
Avatar
おいぬ
■部署 開発部 ■スペック(Level、身長、座高、属性、資格) 闇属性 ■入社年 2016年 ■趣味 音楽、工作、踊ってみた、たべる ■座右の銘 百敗不屈 ■ひとこと おなかすいた