Smile Blog

スマイルヴィジョンスタッフが運営する広報ブログ

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

tukutte7

こんにちは、開発部のおいぬです(▽・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

おいぬ

おいぬ

■部署
開発部

■スペック(Level、身長、座高、属性、資格)
闇属性

■入社年
2016年

■趣味
音楽、工作、踊ってみた、たべる

■座右の銘
百敗不屈

■ひとこと
おなかすいた

関連記事

  1. tukutte08

    【作ってみた】ひらがな→モールス信号変換器

  2. 2017年スタートアップトレンド (アメリカ版)

    2017年スタートアップトレンド (アメリカ版)

  3. Raspberry Piを使ってみよう 【セットアップ編】

    Raspberry Piを使ってみよう 【セットアップ編】

  4. 1255_04

    Raspberry Piを使ってみよう 【オプション編】

  5. mv_job

    イベント来場者管理アプリ「SmileTracking」について

  6. mv_puzzle

    【作ってみた】jQuery UI sortable でデジタルパズル

  7. 超音速のハリネズミさん

    【作ってみた】入力ダイアログで謎解きゲーム

  8. ブログ

    【新入社員研修】相手が理解しやすい3つの話し方

人気記事

  1. 安い!美味い! 【大阪天満・天神橋筋商店街の食レポ】
  2. mv
  3. クリアボタン
  4. タイ料理「天満3パクチー」
  5. 新入社員研修「伝える+伝わるセミナー」
  6. 2017年スタートアップトレンド (アメリカ版)
  7. 大阪天満天神橋筋商店街がっつりBEEF_KINGOFSTEAK
  8. blog03760x370
  9. IMG_6697

最近の記事

  1. ブログ 【新入社員研修】相手が理解しやすい3つの話し方
  2. friends_obentou_suit ランチのインスタント麺からマーケティングを学ぶ
  3. img1 MG研修 at スマイルヴィジョン
  4. 23427785851_ef57e419c1_k 新サービス[スマレジ+EC]リリースのお知らせ
  5. 伝わってない 【新入社員研修】伝わる×伝える=感じるセミナー
2017年8月
« 7月    
 123456
78910111213
14151617181920
21222324252627
28293031  
PAGE TOP