【先着1,000名様!】1,000円分をプレゼント!

現在、Web制作をしているものです。

<h3>タグのバックグラウンドに画像を使おうと考え、日本語サイトを探しましたが、いい物が見つからず、英文サイトから探そうと検索しました。ですが、翻訳がダメなのか、何かわかりませんが、画像検索をかけても、それらしいものがヒットしません。どなたいい方法をご存知の方がいましたら、ご教授お願いします。よろしくお願いします。
以下、試した検索
・web design topic
・web design frame
・web design heading
・web design title
・web design index

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

A 回答 (2件)

headingです。

headlineではありません。意味が微妙に違う。

仕様書を見れば・・7.5.5 見出し: H1、H2、H3、H4、H5、H6要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
 Web製作をされているならご存知だと思いますが

なお、タグには背景は付けられません。背景が付くのはh3要素です。タグは、あくまでその部分が文書を構成するどんな要素(element)かをマークアップする目印(tag)にしか過ぎません。

h3{background-image:url();line-height;20px;height:20px;}
と、見出し(レベル3)である要素に背景画像を指定します。

このような横長の背景画像を探すときのキーワードは
banner image - Google 検索 ( https://www.google.co.jp/search?hl=ja&safe=off&q … )
 ですよ。
    • good
    • 0
この回答へのお礼

詳細なご回答ありがとうございました。参考にさせて頂きました。

お礼日時:2012/07/15 02:20

「headline」が正しそうですね。



http://keizai.yokkaichi-u.ac.jp/~ikeda/html_how2 …
    • good
    • 0
この回答へのお礼

ご回答ありがとうございました。参考にさせて頂きました。

お礼日時:2012/07/15 03:03

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

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

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

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

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qimgタグは何で囲むのが良いか

皆さんはimgタグは何で囲んでいますか?

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>

例えばこういうような時に、何で囲むべきかというのをいつも迷います。

ブロック要素で囲むべきである、というのは何となく認識していますが、ここをdivで囲むのも何か違うような気がするし、
pで囲むのも「段落」と見なせるような画像でないと何となく気持ち悪いです。
最近はaltのある画像は「これは段落だろう」と自分を納得させてpで囲み、
altを空にしているものは囲まずにそのまま置いたりしています。
レイアウト上、ブロック要素が必要になった時にはdivで囲んでみたり…。

私はイメージ的な画像(情報としては必要ない画像や、直前のテキストとかぶっている画像文字等)にはあえてaltは付けずに空にすることが多いので、ちょいちょいこういう事で迷います。

スマートなやり方をご教授ください。

Aベストアンサー

>「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか?
 そうです。そもそも、文字(内容)を画像に置き換えてしまうのは、感心できない手法ですが、味気ないHRの代わりに画像ラインを入れる手法はかっては行われていました。もしHRの代わりに画像を入れるのでしたら、このように書くべきと言っているのである---画像に置き換えて記述するのは誤りと言うことを言いたいのです。

>この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示(もしくは読み上げ)されることになります。
 その場合は、
・altをalt=""としておく
・alt="山田太郎の正面からの写真"
 あるいは、alt="本人の写真"
 と画像が表示されない人も画像から得られるはずの情報をいれておく。

 になるでしょうね。

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>
 これは、書きましたが、Validator上はエラーになりませんが、やはり間違いなのです。この場合、ここに仮想的なブロックが存在するとしてDOMを構成しますが、その処理はHTML4以前は決まった解釈が定められていなかったために解釈上差が出てしまう可能性があります。

気が進まないが
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト<br>
<img src="xxxx.jpg" alt="">
</p>
</div>

とか
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p><img src="xxxx.jpg" alt=""></p>
</div>
それは、その画像がどのような段落にあるのかによって判断します。DIVはDIVで目的・用途があります。文法上のエラーを回避するため、単にデザインのためのような使い方は極力避けるほうがよいと思います。それは、突き詰めればHTMLで文書構造を正確にマークアップしすること、最終的にメンテナンスしやすい結果になるからです。

 <p class="figure main">
  <img src="" width="" height="" alt="麓から見た紅葉の城山">
 </p>
 <p>紅葉も終盤を迎えた先週、子供達を連れて近所の城山にハイキングに言ってきました。</p>
 <p class="figure sub">
  <img src="" width="" height="" alt="玄関で見送る妻">
 </p>
 <p>
  妻は、このような山歩きなど、実利がないものには付き合ってくれない。昔は・・
 </p>
このように書かれていると、後で写真を一枚追加したいときに前後を見ればどのようにマークアップすればよいかわかりますし、スタイルシートを書く際も、
*.figure{margin:10px;text-align:center;}
*.figure.sub{float:right;}
*.figure img{padding:5px;border-shadow:10px 10px 10px rgba(0,0,0,0.4);}
とか・・

>「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか?
 そうです。そもそも、文字(内容)を画像に置き換えてしまうのは、感心できない手法ですが、味気ないHRの代わりに画像ラインを入れる手法はかっては行われていました。もしHRの代わりに画像を入れるのでしたら、このように書くべきと言っているのである---画像に置き換えて記述するのは誤りと言うことを言いたいのです。

>この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示(もし...続きを読む

Q「個人」及び「法人」を英訳するとどうなるのでしょうか?

契約書などで使用する「個人」及び「法人」を英訳するとどうなるのでしょうか?
よろしくお願いします。

関連サイト等あれば、URLもお願いします。

Aベストアンサー

契約書といえど、どのような内容の契約でどのような意味合いのところで使うのかわかりませんが、以下は一般的な見地(いろんな契約書に付き合ってきた経験に基づく)からです・

個人はindividualで問題ないでしょう。

「法人」は、「自然人(natural person)」に対して、辞書的には juridical person, juristic person, legal person, artificial person といった言葉があり、英語国の法律関係辞書にもでてきます(グーグルしてみてください)。

が、我々がビジネスなどで「法人」という時には上記のような言葉はあまり使われていないと思います(契約の実践でみた記憶はないです。でてきても驚きませんが)。通常は事業会社を意味することが多いので corporationでもいいかもしれませんが、「法人」は「事業会社」だけではないので、契約書などでは「法人」の訳としては避けるべきでしょう。例えば、組合や団体などももちろん契約主体になりますがcorporationではないです(ちなみに、私の理解では銀行も英語ではcorporationではない)。

で、実践での契約草案では私は legal entity といった言葉をよく使用しています。英米の契約書等にもよくでてきますし、弁護士(主に米国)に直された経験はありません。

例: The provisions of this Article shall not be deemed to preclude ABC from entering into agreements with any individuals or legal entities.

legal entity, individual をグーグルすればいろいろ情報取れるはずです。

契約書といえど、どのような内容の契約でどのような意味合いのところで使うのかわかりませんが、以下は一般的な見地(いろんな契約書に付き合ってきた経験に基づく)からです・

個人はindividualで問題ないでしょう。

「法人」は、「自然人(natural person)」に対して、辞書的には juridical person, juristic person, legal person, artificial person といった言葉があり、英語国の法律関係辞書にもでてきます(グーグルしてみてください)。

が、我々がビジネスなどで「法人」という時には上記のよう...続きを読む

Q説明書に「補足:・・・・・」と英語で書く場合は?

現在とある機会の説明書を作っておりますが、
本文とは別に「補足:●●●●・・・・」という補足情報欄を作っています。

この「補足」を英語に置き換えるとすると、どの英単語が一番しっくりくるのでしょうか? 
また同様に「重要:・・・・」も英語にした場合、Important: でいいのでしょうか?

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

Aベストアンサー

補足
Note:
Information:

重要
Attention:
Important:

Qbefore疑似要素で画像を指定した場合の文字位置

いつもいつもお世話になっています。

before 疑似要素で画像を指定した時、画像が文字サイズより大きいとすると
次にくる文字の位置(縦)が画像の下のラインに合っています。

画像の中央から文字を開始したいのですが、なかなかうまいこといきません。
なにとぞ、ご教示ください。

現在は、以下のように指定しています。

---------------------------------------------------------
CSS
---------------------------------------------------------
.test{
border:1px solid #39C;
color:#006699;
}

.test:before{
float:left;
padding-top:0px;
padding-right:10px;
content: url("../img/icon.gif");
}

---------------------------------------------------------
HTML
---------------------------------------------------------
<p class="test">
あああああ
</p>

いつもいつもお世話になっています。

before 疑似要素で画像を指定した時、画像が文字サイズより大きいとすると
次にくる文字の位置(縦)が画像の下のラインに合っています。

画像の中央から文字を開始したいのですが、なかなかうまいこといきません。
なにとぞ、ご教示ください。

現在は、以下のように指定しています。

---------------------------------------------------------
CSS
---------------------------------------------------------
.test{
border:1px solid #39C;
color:#006699;
}

.tes...続きを読む

Aベストアンサー

 画像は置換インライン要素ですから、contentプロパティで内容を追加すると、当然ベースラインを合わせて表示されます。
 そこで、positionプロパティで位置を指定する必要があります。そのとき、absoluteを使用するなら、他の要素と切り離されて直近のstatic以外の親コンテナブロックの位置が基準になります。relativeを使用すると本来の位置からずらして表示させることが出来ますが、この場合本来表示されるべき位置・サイズにそれがあると他の要素が判断しますから注意してください。
 floatはいくらなんでも使わないでしょう。

Q1ピクセルって何ミリですか?

1ピクセルって何ミリなのでしょう?
至急、お答えお待ちしております。
かなり急いでます。よろしくお願いいたします。

Aベストアンサー

1ピクセルが何ミリかという質問の答えになるかどうか分かりませんが、
WEB制作上に限って言えば、横100ピクセルの画像を作りたい場合、
Photoshop等では単位をピクセルで作れますが、Illustrator等の場合は、
100pointで作ります。
1pointは、0.35277ミリです。

Q「特典」 英語で何というのか、教えてください

通販のホームページを作成しているのですが、
「初回限定特典」といった意味の英単語を使いたいので、
どなたか教えてください。
見出しですので、1単語でおよその意味がわかればけっこうです。
和英辞書で「特典」と引いたら、「privilege」とあったのですが、
これは「特権階級」といったニュアンスのような気がして、
やや意味がずれるのではないかと思いました。
いかがでしょうか?
よろしくお願いします。

Aベストアンサー

The first limited privilegeはネット検索しても出てこないようです。
Special gift for first release/users/...
といったあたりではないかと思います。

Q背景画像を反転させる方法

背景画像を反転させる方法

いつもお世話になっています。
今、趣味のサイトの再構築に伴い、ネットや本を見ながらHTMLとCSSについて勉強中です。
そこでcssの記述について教えて頂きたいのです。


背景の画像を右下に固定する場合、cssの記述は、

body{
background-image:url("×××.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
}

としますよね?

後、cssで画像を左右反転させる場合は、classでfilter: fliph()を使えばいいとわかりました。

ではこの反転させた画像を背景に使いたい場合、どうすればいいのでしょう?
そもそもそのようなことが可能なのでしょうか?

もし可能でしたら具体的にどのような記述をすればいいのか教えて頂きたいのです。

それとfilterはIE独特の要素と聞いていますが、filter: fliphもそうなのでしょうか?
しかしながらfilter: alphaに関しては

filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;

と記述すればFirefoxなどでも透明効果が出るようです。

filter: fliphもIE独特の要素ならばfilter: alphaのように他のブラウザでも対応させる方法があるのでしょうか?


長々と書いてしまいましたが、知りたいことを要約すると

1.cssで画像を反転させ、それを背景画像に使うことは可能か否か
  可能ならばどう記述すればよいのか

2.filter: fliphで画像を反転させた場合、IE以外でのブラウザで反映されるか否か
  また反映されないのなら、対応させる方法はあるのかどうか

と言うことです。

1と2、分かる方だけでも結構ですのでよろしくお願いします。

背景画像を反転させる方法

いつもお世話になっています。
今、趣味のサイトの再構築に伴い、ネットや本を見ながらHTMLとCSSについて勉強中です。
そこでcssの記述について教えて頂きたいのです。


背景の画像を右下に固定する場合、cssの記述は、

body{
background-image:url("×××.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
}

としますよね?

後、cssで画像を左右反転させる場合は、classでfilter: fliph()を使えばいいとわかりました。

ではこ...続きを読む

Aベストアンサー

1.否
2.否

対応策は予め反転させた画像を別途作っておく事です。

Q動画サイトの動画はmovie?

動画サイトの動画はmovie?

英語で、「動画を見ること」とはどのように言うのでしょうか?動画を訳すとmovieになると思うのですが、それだと映画を見るということになってしまうと思うのです。
映画ではなく、youtubeなどといった動画投稿サイトの動画を見ることをいいたいのですが、そういう場合はなんと言ったらよいでしょうか?
ちなみに、動画サイト名は出さないようにしたいです。

Aベストアンサー

ご質問に回答します。映画を見に行くというときの映画は、movieやfilmと言います。私はアメリカに住んでいますが、movieとfilmの使い分けはほぼ無いように思います。youtubeなどの動画と言いたいときは、videoを使います。i was watching a video (on youtube) about....と言って会話を始める事も多いですよ。また動画の一部を切り取って編集したものをclipと言います。こちらも参考にしてみて下さい。just watch a clip that i made yesterday....と言って話し始めるvlogerも居ますよ。(vlogger=video blogger)

Q初めてのお客様にbeginnerはおかしいですか

ウェブサイトのアドレスなどに、よく初めてのお客様への箇所がbeginnerになっておりますが、これは英語では妥当なのでしょうか。何か、初心者のような上からの感じがするのですが。この場合正しい英語は何になるのでしょうか。

Aベストアンサー

こんばんわ
違和感を感じるのは私もそうです
ただし、どういうサイトなのかによって、beginnerでもいいのかなと思いますが

単に誰でもアクセス可能なサイトであれば、visitorがいいかも
招き入れる感じを出したければ、guestを使ってもいいかも

beginnerを使う場合は、私も同様に、noviceというイメージが伴います

これといった決まりというのはないと思います
nativeではないので「おかしい」とまでは言えませんが、変だと思ったらそれが正しいと思います(ただし、この話は日本のサイトに限定しての話です。英語nativeのサイトではどのように表現しているのでしょうね)

日本のサイトで、日本人が英語を使って、それを見る日本人が違和感を感じるのであれば、使用する単語は日本人の感覚に合うものにすべきでしょうね

では


人気Q&Aランキング