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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おいぬ

おいぬ

■部署
開発部

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

■入社年
2016年

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

■座右の銘
百敗不屈

■ひとこと
おなかすいた

関連記事

  1. mv

    【作ってみた】googleスプレッドシートで在庫管理表

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

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

  3. 四則編

    【作ってみた】Googleスプレッドシートで100マス計算表(四則編)

  4. mv_job

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

  5. tukutte08

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

  6. 1255_04

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

  7. ブログサムネ

    WordPressの投稿ページにGoogle Mapsを埋め込む方法

  8. 足し算

    【作ってみた】Googleスプレッドシートで100マス計算表(足し算編)

人気記事

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

最近の記事

  1. IMG_0351 オール兵庫報告②2部-分科会報告させていただきました
  2. img2 【新入社員研修】言葉遣い&ホメるセミナー
  3. Green12_fax20141123134902_TP_V どこでも送受信できるインターネットFAXを検討してみた
  4. kokuyo_1 働き方セミナーに参加してきました
  5. 0824_1 ランチ交流会 At ONZORO’s BIERRÖSTEREI
2017年10月
« 9月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
PAGE TOP