ちょっと質問です。
HTMLを作成していて、jpg(ジェイペグファイル)の上に
文字を乗せたい(上に書きたい)のは、どうすればできますか??

それと、bmpやgifなんかにも文字を乗せる時は同じやり方で
できるのでしょうか?
(または、そんなんできない)

もし、専用のソフトを使用しなければいけないのなら
なにか、いいソフトを教えてください。
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

過去にも何回か同じ質問ありましたよ。



枠なしテーブルの背景として画像を入れれば、文字を乗せるくらいワケないんじゃ?
画像自体に文字を書き込みたいのであれば話は別ですが。

ちなみにbmp画像は、ブラウザによっては表示できないですよ。
    • good
    • 1
この回答へのお礼

回答ありがとうございます。

>過去にも何回か同じ質問ありましたよ。
すいません。過去の調べるの忘れてました。お恥ずかしいです。

なるほどです。枠無しテーブルで出来ますね。
そういうの、考え付きませんでした。
ありがとうございます。

お礼日時:2001/08/01 14:12

せっかくなのでCSSでの書き方も覚えてみてはいかがでしょう。



div.dec{
background-image : url(xxxx.jpg);
width : 100px;
height : 100px;
background-position : 0px;
text-align : center;
vertical-align : middle;
}

とでもスタイルシート(例はかなり適当です)に書き、

<div class="dec">
123
</div>

とでもすればxxxx.jpgの上に123という文字が乗ると思います。
xxxx.jpgをgifにしたりbmpしても当然できます。
    • good
    • 0
この回答へのお礼

ありがとうございます。

CSSは、少しだけ使った事あるので、何となくの
書き方だけわかります。
丁寧にサンプルを載せていただいて、ありがとうございました。

お礼日時:2001/08/01 14:14

こんな感じはいかがでしょうか?



<!-- ここから -->
<Table border="0" cellpadding="0" cellspacing="0" width="200" height="200" background="お好きな画像.gif または .jpgのりんく">
<Tr>
<Td><Font size="5" color="Blue"><B>こんな</B></Font></Td>
<Td></Td>
<Td></Td>
</Tr>
<Tr>
<Td></Td>
<Td><Font size="5" color="Pink"><B>感じは</B></Font></Td>
<Td></Td>
</Tr>
<Tr>
<Td></Td>
<Td><Font size="5" color="BlueViolet"><B>いかが</B></Font></Td>
<Td><Font size="5" color="Red"><B>ですか?</B></Font></Td>
</Tr>
</Table>
<!-- ここまで -->

ちょっと文字のレイアウトが難儀ですが・・・。
GoLive等のHTMLエディターがあれば、
見た目で何とか調整出来ます。

または、CSSやJavaScriptやDHTMLを使った方法もありますが、
それは次の機会ですね。

画像ソフトで、直接文字を打つと
ブラウザ上のテキストと違って
あとから編集は出来ませんが、
そのかわりいろいろフォントが選べたり、
影付け、光らせ、等々が出来ますね。

画像ソフトが欲しいときは、下記URLで探してみてください。

参考URL:http://www.vector.co.jp/
    • good
    • 0
この回答へのお礼

ありがとうございます。

サンプルまで載せていただいて、ありがたいです。
画像ソフトも探してみますね。
色々とありがとうございました。

お礼日時:2001/08/01 14:13

フォトショップを使えばなんでも出来ますよ。

    • good
    • 0
この回答へのお礼

ありがとうございます。

フォトショップですか!!
でも、高いですよね。。。
なので、もうちょっと考えてみます。

お礼日時:2001/08/01 14:09

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q手書きでデザインした文字やロゴをデジタル化するソフト

手書きでデザインした文字や簡単な絵というか、
ロゴマークみたいなのをスキャナに取り込んで、
デジタル化したいのですが、
Illustratorは高くて買えません。
ベクトル画像でレイヤーが使えて使い方が簡単な
ソフトがあれば教えてください。
そんな都合のいいものはないのでしょうか?
無ければ、無いと教えていただきたいのですが・・・
PhotoshopElementsは使っているのですが、
限界を感じています。

Aベストアンサー

PaintShopPro7・Paintgraphic両方とも低価格でパスを扱えます。PaintShopProは最新版は9ですがパスや印刷プレビューの使い勝手が改悪された上動作が重くなっているので安く軽い7を推奨します。

PaintShopPro7・Paintgraphic両方ともElementsにないチャンネル・パス・トーンカーブ・マスクがありますしレイヤーも当然使えます。PaintShopPro7はイラストレーターのようにフォントをアウトライン化してベクターオブジェクトとしていじることができます。

>>手書きでデザインした文字や簡単な絵というか、
ロゴマークみたいなのをスキャナに取り込んで、
デジタル化したいのですが、
>>ベクトル画像でレイヤーが使えて使い方が簡単

はもちろんPaintShopPro7・Paintgraphicのどちらでも可能です。ただしPaintgraphicは価格は安いですが中上級者向きのソフトです。レタッチソフト初心者でなくてもマニュアルつきを購入したほうが無難です。PaintShopPro7はPDFとフラッシュによる動画マニュアルおよび絵入りのヘルプ画付属するので解説書は特に必要ないです。
PSP ver.7と6解説
http://www.seiai.ed.jp/t2000/psp7t2/index.html
http://www.seiai.ed.jp/t2000/psp/index.html

Paintgraphic
http://www.sourcenext.com/products/paint/
http://piro.sakura.ne.jp/latest/flakes/035kid.html
PaintgraphicとPhotoshopLEの比較
http://ojakan2.hp.infoseek.co.jp/cgtips_pg.html
PaintShopPro7
(http://www.amazon.co.jp/exec/obidos/ASIN/B0006IX6Z2/qid%3D1123834561/sr%3D1-1/ref%3Dsr%5F1%5F10%5F1/249-6805767-8787515)

PaintShopPro7・Paintgraphic両方とも低価格でパスを扱えます。PaintShopProは最新版は9ですがパスや印刷プレビューの使い勝手が改悪された上動作が重くなっているので安く軽い7を推奨します。

PaintShopPro7・Paintgraphic両方ともElementsにないチャンネル・パス・トーンカーブ・マスクがありますしレイヤーも当然使えます。PaintShopPro7はイラストレーターのようにフォントをアウトライン化してベクターオブジェクトとしていじることができます。

>>手書きでデザインした文字や簡単な絵というか、
...続きを読む

Q動画の上に文字を乗せたい(HTMLレイヤータグ

フラッシュ動画を作成しました。(○○○○○○.swf)
objectタグ(または embedタグ)でブラウザ上に再生させました。
この動画の上に、テキスト文字を乗せたいと思います(divレイヤータグ)
マックfサファリでは動画と文字がレイヤー状態でうまく表示されましたが
ウインドウズ関係のエクスプローラでは動画も文字も表示されません。ファイヤーフォックスでは動画のみが表示されました。
何かほかにウインドウズ関係ブラウザ用のレイヤータグあるのでしょうか。
そのレイヤータグの設置方法をご存知の方はご回答をよろしくお願いいたします。

Aベストアンサー

レイヤータグがなにを意味するかわかりませんが、HTMLのタグは、HTML文書全体の中で、それがどのような構成要素であるかを示すため以外のものではありません。たとえば見出しなら<h1>見出し</h1>ですし、ひとつの段落を<p></p>というタグで括ります。決してデザインのためではありません。
 そのうえでスタイルシートで、この要素の上に、この要素を重ねるとかを指定していきます。
 たとえば、画像の説明のリストがあったとします。リストですから
<ul class="imageList">
 <li><img・・・>
  <ol>
   <li class="explanation">説明</li>
   <li class="date">撮影日時</li>
  </ol>
 </li>
 <li><img・・・>
  <ol>
   <li class="explanation">説明</li>
   <li class="date">撮影日時</li>
  </ol>
 </li>
とかになっているはずです。

 それをスタイルシートで、
ul.imageList,ul.imageList>li{dsplay:block;list-style:none;margin:0;padding:0;position:relative;}
ul.imageList>li>ol{position:absolute;top:20px;left:20px;}
という風に、重ねて表現したり、画像の右側に並べたり・・・・スタイルシートで自在に表現します。

 示された質問の動画やテキストがどのような文書構成要素かわからないので、具体的方法は示せませんが、動画とテキストを含む要素全体のposition指定をstatic意外にして、その内部でテキストをposition:absolute;で絶対配置することになるでしょう。

レイヤータグがなにを意味するかわかりませんが、HTMLのタグは、HTML文書全体の中で、それがどのような構成要素であるかを示すため以外のものではありません。たとえば見出しなら<h1>見出し</h1>ですし、ひとつの段落を<p></p>というタグで括ります。決してデザインのためではありません。
 そのうえでスタイルシートで、この要素の上に、この要素を重ねるとかを指定していきます。
 たとえば、画像の説明のリストがあったとします。リストですから
<ul class="imageList">
 <li><img・・・>
  <ol>
   <l...続きを読む

Q手書き文字&イラストをデザインに取り込みたい

手書き、もしくはスタンプでの文字(やイラスト)を
イラストレーターやフォトショップに取り込んで、

その後、ソフトでまた加工、レイアウトしたりして

(文字の書いてある紙の色や質感などは残さずに、
文字(結構細かい)だけをとりこんで、
ファイルにレイアウトしたいのです。)

印刷物にしたいのですが、取り込み方の方法が
いまいちわかりません。。

どなたか知っている方、
いらっしゃいましたらよろしくお願い致します。


ちなみにIllustrator9.0、photoshop5.5を使用しています。

Aベストアンサー

流れとしては
1.手書き等の文字をスキャナで大きめに取り込む(フォトショップ)
2.取り込んだ画像を文字の部分とその他の部分がはっきり分かれるようコントラストを強くして保存。必要に応じて消去したり白黒2階調にしたり、抽出したり技術を要します。(フォトショップ)
3.さきほど保存しておいたデータをイラストレータの書類に配置。
オートトレースツールで輪郭をトレース。大きい画像のほうがトレースしたときのあらがでにくいです。うまくいかない場合環境設定のオートトレースのところを調節してください。このツール、非常にアバウトで、うまくいくかどうか疑問ですが・・・^^:
(イラストレーター)
4.貼り付けた画像を削除
こうすれば文字の部分が図形になるはずなので拡大縮小、変形など自由にできます。
なお、3の部分ですが、アドビのストリームラインというソフトをお持ちでしたらそちらで簡単に精密に輪郭をトレースできます。

Q画像リンクの上に文字リンクを乗せる方法は?

画像(アイコン)リンクの上にテストで、文字リンクを貼りつけたいのですが、どのようにしたらよいでしょうか?

ちなみに、リンク先はphpで読み込ませています。

ソースは

<li><a href="<!--{$smarty.const.URL_DIR}-->abouts/index.php"><img src="<!--{$TPL_DIR}-->img/side/about_on.jpg" width="166" height="30" alt="当サイトについて" style="border: none" name="about" id="about" /></a></li>

のようになっています。現在、画像(アイコン)リンクはこれで表示できています。

どなたかよろしくお願い致します。

Aベストアンサー

アンカーのスタイルシートでdisplayをblockにして、backgroundに
イメージを置いてやればよいのでは?

Qパソコン上で手書き文字などを保存したいのですが。

パソコン上での手書きについてお聞きします。

マウスで、簡単な文字なり絵を描いて、それを保存したいのです。
できるのでしょうか?

手書き認識ではありません。すなわち、今、IME、ATOK,を
使用しています。このソフトは、マウスで描いた手書き文字を
漢字等に変換してくれます。しかし、この「変換」まではいらないのです。
マウスで描いた手書き文字等をそのまま保存したいのです。

Vista(Home)を使用しています。
標準搭載の「Tablet PC 入力パネル」でできるでしょうか?

何か、いい方法はありますか?

どうかよろしくお願いいたします。

Aベストアンサー

文字や絵を何かの文章で文字同様に利用するわけでなければ画像として残しておくことはできます。No.1の方のお返事通りペイントでもいいですし、売っているソフトでもいいですし、VistaならWindows Journalというソフトが標準で搭載されていると思います。これを用いれば通常のノートと同じように保存しておくことができますよ。

Q文字の上に乗せると、メニューが変わる仕組み

下記のアドレスはWall street Journalのサイトです。
http://jp.wsj.com/

上のメニューの仕組みについて教えて頂きたいのですが…

例えば、「米国」の上に乗せると、
下のサブメニューが代わり、「経済」「政治」となりますよね。

これを自分のホームページでも作りたいのです。
JavaScriptで作っているのでしょうか?
ソースはどんな感じでしょうか?

Aベストアンサー

ざっとしか見てませんが・・firefox+firebugで簡単に調べられる。
普通に、ナビゲーションリンクですね。
<ul class="nav">
 <li><a href=""></a>
  <ul>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
  </ul>
 </li>
 <li><a href=""></a>
  <ul>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
  </ul>
 </li>
</ul>
HTMLが、文書構造にしたがってきちんとマークアップされているので、あとはスタイルシートで、プルダウンメニューを横だろうが縦だろうがご自由にと言うところ。
[表示]→[スタイルシート]→[なし]でスタイルシートなしで見てもちゃんと伝わる。
HTMLソースは、ソース表示で見ても良い。(firebugを使うと、どの部分のソースかがよくわかります。)
CSSは、とてもよく使われる方法で簡単、どのように配置するかというあなた次第なので省きます。
 簡単に言うとdisplay:noneでいったん消して、li:hover(擬似クラス)で詳細度を上げてdisplay:block;で上書きしてます。
div.nav li li{display:none;}/* 詳細度[0,0,1,3] */
div.nav li:hover li{display:block;}/* 詳細度[0,0,2,3]*/

ざっとしか見てませんが・・firefox+firebugで簡単に調べられる。
普通に、ナビゲーションリンクですね。
<ul class="nav">
 <li><a href=""></a>
  <ul>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
  </ul>
 </li>
 <li><a href=""></a>
  <ul>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
  </ul>
 </li>
</ul>
HTMLが、文書構造にしたがってきちんとマークアップされているので、あとは...続きを読む

Q手書き文字入りの画像の作り方???

今日和<(_ _*)>

手書きの文字が入った待受画像を集めている
んですが、あれって どうやって作ってるんですか??

PictBear等、画像加工ソフトを使っていて、
手書き文字のフォントならDLしてあるし、
手書き風の文字で文字入れ出来る携帯サイトの文字
とも違うんですよね。。。

マウスで頑張ってみても上手く書けなくて、
細かい文字なんてムリ… ~(-゛-;)~

PCですか?
携帯だけで出来るのでしょうか??
スキャナで読み込んでるのでしょうか??
それとも、ペンタブが無くちゃ出来ませんか??

職人さんの中には作成方法までは答えない、って
人が多くて聞けずに ずっと気になってるんですが
職人さん達は どうやって手書きしているのか
教えて下さい(>_<)
お願いします☆

Aベストアンサー

やろうと思えば携帯で出来ます。

私はDoCoMo FOMA F900iTユーザーなのですが、此れにはタッチパネル機能があって、手書きできるんです。
絶対にやりたいなら買ってもいいと思いますが、発売からもう一年経っていて、しかも未だに高い。\20000overです。

Qリンクを設定した文字の上にマウス(カーソル?)を乗せると色が変わる!

だれか、HTMLの記述で教えてください。
文字の背景の色が変わる、じゃなくて、
文字の色を変えたいんです。
(クリックする前マウスを乗せるだけで)。

Aベストアンサー

スタイルシートを利用します。
head内に、
<style>
<!--
a:hover { color:#eeffdd; }
a:link { color:#ddcc45; }
a:visited{ color:#dc143c; }
-->
</style>
とすれば可能です。
a:hoverがマウスが上に来た時、残りはそれぞれ、
デフォルトのリンク色、既読リンクの色となります。

Q手書きの文字入力はどうするの?

ペイント文字の入力方法はわかりました。
手書きの文字を入力したい場合ははどうするんでしょ?

Aベストアンサー

> 手書きの文字を入力したい場合ははどうするんでしょ?

下記URLのページのような「手書き(風)文字」フォントを使って入力します。

「漢字も使える手書き風の日本語フォントのまとめ」
http://coliss.com/articles/freebies/freebies-handwriting-japanese-font.html

「フリーで使えるいい感じの手書き風フォント特集(日本語も)」
http://e0166.blog89.fc2.com/blog-entry-526.html

「手書き和文フリーフォント」
http://pet.24-7smile.com/font/cursive.html

Qgifをjpg

あるサイトでgifの動画をjpgで表示させていました。
右クリックで保存を押すとbmp形式になり1枚だけの絵で動きませんでした。プロパティを見るとjpgと出ていて、動画もブラウザーにはjpgとでています。その動画にリンクを張っている文字の右クリックで保存すると、gif形式で落とせました。考えると、gif形式の動画を拡張子jpgで表示させてるしかないと思ったのですが・・。お願いします。
画像は直リンクしか方法がない・・出元のサイトの広告が適さないので控えて起きます。

Aベストアンサー

私の知っているサイトに、初心者だらけの質問板があるのですが、そこではgif形式のアニメーションデータを、BMPとかPNGとかJPGと言った拡張子に書き換えて保存しているケースが多く見られます
ですのでそのサイトの管理人の方も謝ってGIF形式なのに拡張子をjpgにしているのではないでしょうか


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報