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. Raspberry Piを使ってみよう 【セットアップ編】

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

  2. クリアボタン

    【作ってみた】GASでGoogleスプレッドシートのセルのクリアボタン

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

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

  4. NsNb7ndCeV3FkP61515754521_1515756417

    【WordPress】MW WP Formを使用したお問い合わせフォームの作成

  5. img2

    【新入社員研修】言葉遣い&ホメるセミナー

  6. 66efd8d312710c14e1e7656010bc60bd_m

    【WordPress】Contact Form 7を使ったお問い合わせフォームを作ってみよう!

  7. ブログ

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

  8. mv

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

人気記事

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

最近の記事

  1. mv_tsukatte02 【使ってみた】プログラミングが練習できるサイトを集めてみた
  2. c48549e5450e30d62215e30331440f8e_m 【WordPress】記事の順番を直感的に並べ替える!Intuitive Cus…
  3. mv_tukutte10 【作ってみた】LINE NotifyとGoogle Apps Scriptで天気…
  4. IMG_1067 ペンキを塗ってみた|コワーキングを経営する事になった話3
  5. mv_tsukatte01 【使ってみた】LINE Notifyを使ってトークルームにメッセージ送信
2018年4月
« 3月    
 1
2345678
9101112131415
16171819202122
23242526272829
30  
PAGE TOP