<こんにちは、開発部のおいぬです（▽・x・▽） 今回はCSSを使って、画像の上に文字を表示させる方法をまとめました。
CSS(シーエスエス)とは？
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。
(HTMLクイックリファレンスより引用)
私たちがウェブページを作成するときはHTML（エイチティーエムエル）という言語を使って制作しています。ネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。
CSSはそのHTMLと組み合わせて、ウェブページの装飾（文字サイズとか、色とか）を指定するものです。
文字をのせた状態の画像を作るのではなく、のせてる文字を変更できたら良いなと思ったので、今回この画像に文字を表示させることに挑戦しました↓↓
※ヴィオラです。ヴァイオリンじゃありません(重要)
作り方
今回は、調整前の本来の位置から文字をずらす方法を使って、画像の上に文字を表示させます。
本来の表示位置から文字をずらすには、スタイルシートのpositionプロパティを使います。positionプロパティはを使うと、指定した距離分ずらすことができます。
top(上から)、bottom(下から)、left(左から)、right(右から)
positionプロパティの値は、
static…指定無し。初期値。
relative…相対位置への配置。
absolute…絶対位置への配置。
fixed…絶対位置への配置。スクロールしても位置が固定されたまま。
absoluteは、親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
(HTMLクイックリファレンス(position)より引用)
つまりabsoluteの前にstatic以外の値を指定すると親ボックスになるということですね。
プログラムはこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <head> <meta charset="UTF-8"> <title>てすと</title> <style> <!-- .viola{ background-color:#FF0; color:#00F; font-size: 10px;} --> </style> </head> <body> <p style="position: relative;"> <img src="/img/music_viola.png" width="268" height="400" alt="viola" /><br /> <span class="viola" style="position: absolute; top: 18px; left: 128px;">うずまき</span> <span class="viola" style="position: absolute; top: 60px; left: 175px;">ペグ</span> <span class="viola" style="position: absolute; top: 157px; left: 122px;">指板</span> <span class="viola" style="position: absolute; top: 190px; left: 86px;">表板</span> <span class="viola" style="position: absolute; top: 284px; left: 106px;">駒</span> <span class="viola" style="position: absolute; top: 275px; left: 145px;">ｆ字孔</span> <span class="viola" style="position: absolute; top: 330px; left: 120px;">テールピース</span> <span class="viola" style="position: absolute; top: 366px; left: 75px;">あご当て</span> </p> </body> </html> |
親ボックスは
|
1 |
<p style="position: relative;"> |
です。
relativeは相対位置ですが、数値を指定しない限り元の位置から動きません。
画像の上に表示させるそれぞれの文字は、
|
1 |
<span class="viola" style="position: absolute; top: 18px; left: 128px;">うずまき</span> |
です。
親ボックスを基準に上から18px、左から128pxの位置に「うずまき」と表示させています。
表示させたい文字をそれぞれずらしていきます。
完成したページはこちらです：作ってみたページへいく
これを機にみなさん、ヴィオラのパーツの名前を覚えてみてください(^▽^*)笑
おいぬはf字孔が好きです。
あると便利なChrome拡張機能「Page Ruler」
上から◯◯px、左から◯◯pxのように、Web上の要素の距離を測るときにすごく役立ちましたので、ぺたりとしておきます。
Chrome拡張機能：Page Ruler