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

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

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

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2675閲覧

CSSで作ったフキダシのサイズの調整方法

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/06/22 13:06

編集2016/06/22 13:11

いまこのような吹き出しがあります。
リンクがある文字列へのマウスオーバーで表示されます。
この吹き出しを、後述する①②のように調整したいです。

イメージ説明

いまはこうして作っています。

<a href="#">普通のリンクです。<span class=setumei>怒らないで</span></a>

CSS

1.setumei { 2 display: none; 3 position: absolute; 4 top: -2em; 5} 6a:hover { 7 position:relative; 8 text-decoration:none; 9} 10a:hover .setumei { 11 display: block; 12 background-color: #e79221; 13 padding:3px; 14 color:#ffffff; 15 border-bottom:#ffffff solid 10px; 16 border-left:#e79221 solid 5px; 17}

でどのように調整したいかというと、

①横幅の調整
現在はマウスオーバーの対象になっているリンクの文字数を基準とした横幅です。
width100%にしても、文字数が短ければその幅までにしかなりません。(赤い部分)
それを、ある枠の幅を基準にして90%くらいになるようにしたいです。(緑のようにしたい)
イメージ説明

②表示位置の調整
吹き出しの文字数が多く、吹き出しの中で2行になった場合、吹き出しの位置が下がってしまいます。(赤い部分)
これを下がらないようにしたいです。(緑のようにしたい)
イメージ説明
伝えるのがヘタクソですみません。
どなたか並外れた理解力をお持ちの方らいらっしゃいましたらご教示いただけると嬉しいです。

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

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

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

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

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

kei344

2016/06/23 16:56

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。
退会済みユーザー

退会済みユーザー

2016/06/23 17:49

<m(__)m>
guest

回答1

0

ベストアンサー

CSS

1.setumei { 2 display: none; 3 position: absolute; 4 /* top: -2em; */ 5 bottom: 100%; 6}

動くサンプル:https://jsfiddle.net/c5tjkrv1/

別案:https://jsfiddle.net/0z6dt2v9/


追記:

動くサンプル:https://jsfiddle.net/0z6dt2v9/8/

投稿2016/06/22 14:20

編集2016/06/23 15:43
kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2016/06/23 06:03

いつもありがとうございます。 別案だと吹き出しの下に白いスペースが入らなくていいですね! ただ、なぜか、、 最後の a { display: block; margin: 3em 0; position: relative; } を書くと、サイトのメインメニューとサイトのタイトルの縦の範囲が大きくなってしまいます。 別のタイトルでも試しても、CSSの中身をご提示のものだけで試しても、やはり、その症状が起きてしまいます。 不思議です。setumeiタグは絶対これだけなのですが…
kei344

2016/06/23 08:38

下記2つは jsfiddle での表示用なので無視してください。 display: block; margin: 3em 0; また、書いておられるとおりにCSSの構造を作りましたが、aタグに position: relative; を入れる必要があるので、「a.setumei」「.setumei > span」となるようにするほうが良いかもしれません。
退会済みユーザー

退会済みユーザー

2016/06/23 10:05

ありがとうございます。 うーん。そちらの2つを入れないと、質問文の「①横幅の調整」ができないようです(>_<) かといって入れるとメインメニューなどの縦が長くなるというナゾの症状…笑 あと >「a.setumei」「.setumei > span」となるように というのは、それぞれどれをどれにということでしょうか? たびたび申し訳ございませんが、お手すきのお返事いただけると幸いです。
kei344

2016/06/23 15:43

> >「a.setumei」「.setumei > span」となるように > というのは、それぞれどれをどれにということでしょうか? そこがわからないということはCSSがあまりわからないということでしょうか。なにか書籍などで勉強されることをお勧めします。 とりあえず追記しました。
退会済みユーザー

退会済みユーザー

2016/06/23 16:23

まったく仰るとおりです。( ;∀;) ありがとうございます。
kei344

2016/06/23 16:33

追記は御覧になりましたか?
退会済みユーザー

退会済みユーザー

2016/06/23 16:51

失礼しました!気づきませんでした。(>_<;) いただいた3つをいくつか組み合わせてみたところ、下記によって、ズレの症状が出ずに「②表示位置の調整」が解決できました。 ココカラ .setumei { display: none; position: absolute; /* top: -2em; */ bottom: 100%; width: 200px; } a:hover { position:relative; text-decoration:none; } a:hover .setumei { display: block; background-color: #e79221; padding:3px; color:#ffffff; border-bottom:#ffffff solid 10px; border-left:#e79221 solid 5px; } ココマデ まぁ「①横幅の調整」はクリアできませんでしたが、とりあえず無理やりpx指定しておきました。画面を拡大したときだけpxがはみ出てしまいますけれど、アップにされないことを願います。笑 とりあえずまずは本ですね。。 たびたびお手数おかけし申し訳ございませんでした。(>_<)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問