けとけと。の自由帳

サイド自由欄

動画ページ
HOT!まいろ

< 新しい記事

新着記事一覧(全5592件)

過去の記事 >

2004年12月03日

スタイルシートで画像に落書き．．．（修正）

(2)

テーマ：ＨＴＭＬを使って楽天で何ができるのか．(160)

カテゴリ：未整理

『元画像』

この画像にヒゲ（ミ　ミ）とかクチ（〇）とかを書いてみます．

『下準備（スタイルシートを使わず文字を表示）』

■ 記述 ■
<IMG src="画像のアドレス">
ミミ〇

ミミ〇

『スタイルシートを使って画像の上に文字を移動させる』

その前に．．．

文字サイズを大きくしてみる

■ 記述 ■
<IMG src="画像のアドレス">
ミミ〇

ミミ〇

SPAN
　スタイルシートなどの指定をするときには便利です．
DIV タグも同じようなものですが， SPAN タグは指定した前後に改行が入りません．

font-size:△px
　フォントサイズを指定するスタイルシートの設定です．
　pxはピクセル単位を表します．△に数値を設定します．
　固定で数値を設定するとブラウザの文字サイズを変更した場合，レイアウトに影響を受けません．

文字の表示位置を指定できるようにスタイルシートを記述

■ 記述 ■
<IMG src="画像のアドレス">
ミミ〇

ミミ〇

position:relative;left:0px;top:0px

　文字の位置を指定するためのスタイルシートの記述

position:relative はこれから指定する位置が，「現在の位置を基準として指定すること」を表します．

left は左から指定した数値分，位置を移動させます．
　正数（＋）ならば右へ，負数（－）ならば左へ移動します．

top は上から指定した数値分，位置を移動させます．
　正数（＋）ならば下へ，負数（－）ならば上へ移動します．

移動したい距離とかはこんなソフトを使うと便利です．

　ピクセル単位で計ることができる「ピクセル定規」　

これをうまく使って数値を設定するとこのようになります．

■ 記述 ■
<IMG src="画像のアドレス">
ミミ〇

ミミ〇

お気に入りの記事を「いいね！」で応援しよう

最終更新日 2004年12月04日 12時50分27秒
コメント(2) | コメントを書く

■コメント

Re:スタイルシートで画像に落書き．．．(12/03)

シオン★ さん

うわ！　SPAN　は私ははじめてです。
今まで教えていただいていたのかもしれないですが目に見えていなかった？　σ(^_^;)アセアセ

ピクセルの定規があるんですね～。
便利でしょうね。
でも私は普段はいい加減で　*^^)
１００ｐｘがこのくらいだから。。って（笑）

画像の上に文字の位置指定ができていいですねぇ。
やって見よう♪
さっそく"φ(・ェ・o)~メモメモ

いっつも　゜・:，。☆(*'ー')/♪了└|力"├♪＼('ー'*)☆，。・:・゜ゴザイマ～ス♪

(2004年12月04日 09時01分59秒)

返事を書く

Re:スタイルシートで画像に落書き．．．(12/03)

meiakira さん

おはようございま～す（*^_^*）
豆乳メーカーをお母様にプレゼント！
まったりさんは親孝行なんですね～（*^_^*）

画像に落書きおもしろそう～（'▽'*）ﾆﾊﾟｯ
「ピクセルの定規」のソフトがあるんですか？
では早速～　ε=ε=ε=ε=ε=┏（･_･)┛ (2004年12月04日 10時23分20秒)

返事を書く