質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Dreamweaver

Dreamweaverは、アドビシステムズ(株)が開発したWebページ作成ソフトです。 HTMLやXHTMLだけでなく、PHPやASPなどのサイバーサイドスクリプトの編集も可能で、 OracleやMicrosoftSQLServerなどの、データベースとの連携機能もあります。 Webデザイナーなどの専門業界で圧倒的なシェアを誇っているソフトです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

3回答

2459閲覧

タイトル(h2等)の画像を全部表示したい

moitaro

総合スコア443

Dreamweaver

Dreamweaverは、アドビシステムズ(株)が開発したWebページ作成ソフトです。 HTMLやXHTMLだけでなく、PHPやASPなどのサイバーサイドスクリプトの編集も可能で、 OracleやMicrosoftSQLServerなどの、データベースとの連携機能もあります。 Webデザイナーなどの専門業界で圧倒的なシェアを誇っているソフトです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/09/08 07:48

お世話になっております。

http://kumacrow.blog111.fc2.com/blog-entry-528.html
などを参考にして
H3などの画像を表示しようとしているのですが
文字の高さ以上のものを表示しようとしても
文字の高さ以上の画像は表示されないので困っております。

■■■■■■
■■画像■■
■■■■■■
上記のような画像があり

html

1<h2>タイトル</h2> 2<p>ふがふがほげほげ</P

css

1h2 { 2 background: url(画像URL) no-repeat left center; 3 padding-left: 35px; 4 font-size: 25px; 5 height: 30px; 6}

で表示されるものは

■■画像■■タイトル ふがふがほげほげ

と表示されてしまいます。
これを

■■■■■■ ■■画像■■タイトル ■■■■■■げほげ(文字が隠れている)

としたいのですが
そのようには出来るのでしょうか?

出来るのでしたらご助力頂けないでしょうか?

お忙しいところ大変申し訳ないのですが上記お問い合わせいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MaShiRo_H

2016/09/08 09:02

こんにちは!一点質問なのですが、「ふがふがほげほげ」は画像の下に隠れる状態でしょうか?上にかぶさる形でしょうか?よろしくお願いします。
moitaro

2016/09/09 01:48

画像の下に隠れる状態です。
guest

回答3

0

HTMLのコードが不明だったので、前回のものを流用しています。

今今の状態を検証すると、こうなっております。
padding-top: 90px;とっていることで既に画像を表示できるだけの幅はほぼ確保されているのですが、
加えてheight: 100px;を適用しているので、無駄に高さがある状態です。
この状態からheightを40px程度にしても画像は欠けませんので、高さを調節してみてください。
イメージ説明

ちなみに、デベロッパーツールを使用すればブラウザ上でスタイルの確認・検証が可能なので、いろいろと触ってみると良いですよ。
Chromeでしたらブラウザ上で右クリックで検証可能なのでぜひ。

プログラミング初心者必見!Chromeデベロッパーツール便利機能まとめ
主要ブラウザ5種の開発者ツールの開き方 まとめ

投稿2016/09/09 04:39

MaShiRo_H

総合スコア328

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

こんにちは!

文字を上にかぶせるのであれば、pの要素をh2の中に入れてしまっても良いと思います。
また、画像がつぶれてしまうのは、h2の高さを30pxにしているからです。
backgroundは要は背景なので、背景を表示させたい要素のheightが30pxなのであれば、もしろんその枠内にしか収まってくれません。
例えば100pxの画像を表示させたいのであれば、背景を表示させたい要素のheightも100px以上にしなければどこかしら欠けて表示されてしまいます。

イメージ説明

HTML

1<h2> タイトル 2 <p>ふがふがほげほげ</p> 3</h2>

CSS

1h2 { 2 background: url("URL") no-repeat left center; 3 background-size: 100px 100px; 4 padding-left: 35px; 5 font-size: 25px; 6 height: 100px; 7}

また、以下のように文字を下に入れ込みたいのであれば、
h2、p、両要素ともdivで囲ってしまって、absoluteとz-indexをゴニョゴニョやればなんとかなるかなあという感じです。

イメージ説明

HTML

1<div class="relative_box"> 2 <h2>タイトル</h2> 3 <p>ふがふがほげほげ</p> 4</div>

CSS

1h2 { 2 background: url("URL") no-repeat left center; 3 background-size: 100px 100px; 4 padding-left: 35px; 5 font-size: 25px; 6 height: 100px; 7} 8.relative_box { 9 position: relative; 10} 11.relative_box p { 12 position: absolute; 13 bottom: 10px; 14 left: 35px; 15 z-index: -1; 16}

backgroundにこだわらないのであれば、シンプルに画像とタイトル・テキストを並べて表示してしまった方が楽な気はしますが。。。

投稿2016/09/08 09:24

MaShiRo_H

総合スコア328

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aKusano

2016/09/08 19:04

横から失礼します。<h2>の中に<p>を入れるのは文法違反なのでNGです。
MaShiRo_H

2016/09/09 00:31

aKusanoさん 確かにおっしゃる通りですね>_< ご指摘ありがとうございます!
moitaro

2016/09/09 02:29

お世話になっております。 コメントありがとうございます。 望むような処理に近づきました。 後だしのようになってしまい大変申し訳ございませんが ```css h2.hoge1{ background: url(./img/fuga.png) no-repeat left center; padding-left: 35px; font-size: 25px; color:#F90004; border-bottom:solid 2px #888;/*下線*/ vertical-align:bottom; padding-top:90px; background-size: 100px 100px; padding-left: 35px; font-size: 25px; height: 100px; } ``` との表記しており border-bottom:solid 2px #888;/*下線*/ 下線のすぐ上に文字列が来るように 弄っているのですが上手く表記することが出来ません。 こちらはどのように表記するのかご助力頂けないでしょうか? お忙しい中大変申し訳ないのですが上記お問い合わせいたします。
MaShiRo_H

2016/09/09 02:52

ご質問ありがとうございます。 現在表示されているものはどうなっておりますか? コメント欄もしくは記事編集にて、現在の状況と、どうなるのが理想なのかを図や画像で教えていただけると助かります^^
moitaro

2016/09/09 03:58

コメント ありがとうございます。 現在は-------- ■■■■■■ ■■画像■■タイトル ■■■■■■_________________________________ -------- となっております。 これを -------- ■■■■■■ ■■画像■■ ■■■■■■タイトル --------  ^^^^^ タイトルの文字列が下線のすぐ上に来るようにしたいと思っております。 お忙しい中失礼しますがご助力頂けないでしょうか?
guest

0

文字かぶせはCSSで細かく指定しないとできなかった気がします

投稿2016/09/08 08:59

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問