webで使う画像につける文字の位置

質問

すみませんが、教えてください。
突然webサイトを作ることになりました。
htmlやcssの理解などできていないのですが、
教本みながら作っています。

お知恵を拝借したいのですが、
例えば300x50ドットの長方形に文字を埋め込んだ時に、
その領域内で上下左右を中央にするには、どうしたらいいでしょうか？
AdobeにFireworksで出来るか聞いたら、できないと言われて困ってます。
ズームアップしているのでは？とも言われました。

よろしくお願いいたします。

回答No.2

torayoshi · ベストアンサー

質問を読む限り、二通りの解釈が出来ますね。
1.画像とテキストは別々で、テキストをHTMLとCSSで表示上画像の上下左右を中央にしたい。
2.画像とテキストは一体化させて一つの画像にする。
　その時テキストを画像の上下左右を中央にしたい。
私は2.の方だと思いました（Adobe Fireworksの話が書いてあるので）

もし他のソフトを使っても良いのなら、GIMP2で出来ます。
テキスト入力→「レイヤーの自動切抜き」→テキスト選択→「整列」→中央揃え（水平、垂直方向）。

お礼

ありがとうございます。

#1様には申し訳なかったのですが、#2様が仰っていることをお伺いしたかったのです。
以前webをタグ手打ちで作ったときに文法は当然大切ですが、
他の環境でも同じように見せるために、わざと画像(イラストなど)ファイルに文字を
直打ちしていることに気づきました。

Adobeの言うところの目視でやって調整しても良いのですが、
ドットのズレは結構目立つので途方に暮れていました。

教えていただいた方法でやってみます。
ありがとうございました。

回答No.1

ORUKA1951

それなら、教本ではなくまずHTMLとCSSの勉強をすることから・・
そうしないと、かえって遠回りになりますよ。
　勉強と言っても
・HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
・CSS 2.1仕様（日本語訳）( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )
だけは目を通して、概略を理解するだけで良いです。
　その基本に流れているのは『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』だけと言って良いです。

　HTMLでは、ひたすら、<h1>ここは見出し)headding)</h1><p>個々からひとつの段落(Paragraph)<p>と文書構造をマークアップします。
　そしてスタイルシートで、この段落はこのように表現(プレゼンテーション)すると指定していきます。

＞例えば300x50ドットの長方形に文字を埋め込んだ時に、その領域内で上下左右を中央にするには、
　ではなく、HTMLで、ナビゲーションリストのひとつの項目とマークアップされているもの
[例]
<div class="nav">
　<ol>
　　<li><a href="/">トップ</a></li>
　　<li><a href="/Books">書籍</a></li>

そしてスタイルシートで、
div.nav ol,/* ナビゲーションブロックのol */
div.nav ol li/* およびその項目 */
{
list-style:none;/* リストじゃないよ */
margin:0;/* マージンも */
padding:0;/* 内側余白も0 */
line-height:30px;/* 一行の高さを30px; */
text-align:center;/* 左右中央配置 */
}
div.nav ol li{
width:300px; /* 幅が300px; */
margin-top:5px;/* 上を少しあけて */
position:relative;/* 子孫の要素のサイズや位置の基準に */
}
div.nav ol li a{
display:block;
width:100%;height:100%;/* 親要素を基準に */
text-decoration:none;/* アンダーラインは要らない */
}
div.nav ol li a[href="/"]{
background-image:url(./images/linkBack/goTop.jpg);/* 背景画像はこれを使う */
}
div.nav ol li a[href="/Books"]{
background-image:url(./images/linkBack/goBooks.jpg);/* 背景画像はこれを使う */
}

というふうに・・スタイルシートを作成していきます。
★HTMLは文書構造しか書かれていないので、誰でもメンテナンスで切る。
　数年後のあなたでも
★デザインはスタイルシートに書かれているので、スタイルシートだけを変更すると好きにデザインが変えられる。携帯や印刷時は他のデザインにすることも可能