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

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

ただいまの
回答率

90.61%

  • HTML

    8664questions

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

  • CSS

    5576questions

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

HTMLとCSSでマンガの吹き出しを作る方法

受付中

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 290

siu_long

score 2

 針吹き出しや破れ吹き出し等を作りたい

HTMLとCSSだけで、マンガでよくある、針吹き出しや所謂"破れ"と云われる吹き出しを作る方法はありますか?

調べてみたのですが、現時点に於きまして、そう云ったものが見当たりません。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • root_jp

    2018/05/11 09:44

    あと、「レスポンシブ対応」「枠線を縦線集合で作る」などもやりたいようです。後出しが多すぎるのでマッチした回答は得られないと思います。

    キャンセル

  • 退会済みユーザー

    2018/05/15 10:25

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • siu_long

    2018/05/15 12:01

    色々忙しいのと、ここの使い方が能く判らないので、時間に追われる形で、概要だけの説明になってしまいました。後、最近の『漫画村』事件関係もあり、URIを例示出来なかったのです。余り頻繁には来られないと思うので、気長に回答をお待ち致します。

    キャンセル

回答 4

+1

SVGを利用してみてはいかがでしょうか?

<svg version="1.1" id="hari" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="150,11.222 165.1,35.34 185.914,15.948 194.261,43.155 
    219.389,29.817 220.405,58.249 248.132,51.868 241.751,79.6 270.188,80.611 256.851,105.745 284.046,114.08 264.654,134.906 
    288.778,150 264.654,165.094 284.046,185.92 256.851,194.255 270.188,219.39 241.751,220.4 248.132,248.132 220.405,241.751 
    219.389,270.184 194.261,256.845 185.914,284.052 165.1,264.66 150,288.778 134.906,264.66 114.08,284.052 105.745,256.845 
    80.611,270.184 79.6,241.751 51.868,248.132 58.249,220.4 29.817,219.39 43.155,194.255 15.948,185.92 35.34,165.094 11.222,150 
    35.34,134.906 15.948,114.08 43.155,105.745 29.817,80.611 58.249,79.6 51.868,51.868 79.6,58.249 80.611,29.817 105.745,43.155 
    114.08,15.948 134.906,35.34 "/>
</svg>

これで24角形の針吹き出しになるはずです。
上記を普通に
<body></body>の中に入れてご確認ください。
吹き出しの中の文字はposition:relative;とposition:absolute;でどうにかなるかと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/11 05:11

    レスポンスデザイン対応にする為に、幅や高さを自由に変化させたいんですが、画像ですと、それが出来ません。その為に、HTMLとCSSだけで作りたいのです。

    キャンセル

  • 2018/05/17 12:01

    こちらの方法で対応可能かと思われます。
    https://qiita.com/SFPGMR/items/f32855b9cf038f5654bd

    これでHTMLとCSSだけで完成しましたかね?

    キャンセル

  • 2018/05/17 12:05

    上記svgはイラストレーターから出力しましたが、
    画像をsvgに変換してくれるサービスやアプリもいろいろあるようですので、
    ご利用いただくと簡単に図形がsvg化できると思います。

    pngからSVGへのコンバーター
    https://convertio.co/ja/png-svg/

    SVG出力アプリ
    https://totoco.org/how-to-use-potrace

    キャンセル

+1

単純な吹き出しであれば割と簡単にできます。
https://saruwakakun.com/html-css/reference/speech-bubble

複雑なものでも、clip-path: polygonを使えばある程度いけると思います。
ただし、IEやEdgeで非対応。
https://www.webprofessional.jp/introducing-css-clip-path-property/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/11 05:16

    レスポンスデザイン非対応でしょうそれ…。ブラウザの幅を変えても、吹き出しのデザインが崩れない、それでいて大きさや高さは、ブラウザに支配されない(切れたりしない)様にしたいのです。後、枠線を縦線集合で作るとかもやりたいので。

    キャンセル

  • 2018/05/11 09:41

    レスポンシブはメディアクエリーで自分でコントロールすればいいと思うのですが。。。

    キャンセル

0

Bootstrap や jQuery UI の Tooltip は目的に合わないですか?

https://getbootstrap.com/docs/3.3/javascript/#tooltips

http://jqueryui.com/tooltip/

Tooltip ではなくてこういう ↓ 感じのですか?

https://getbootstrap.com/docs/3.3/javascript/#popovers

https://ajaxcontroltoolkit.devexpress.com/BalloonPopup/BalloonPopup.aspx

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/11 05:12

    どちらも違いますねぇ。『ポプテピピック』でも見て来て下さい。

    キャンセル

  • 2018/05/11 08:27

    そういうことはあと出ししないで、最初の質問に書いて、url を貼っておくようにしてください。回答者と閲覧者全員の時間と労力を無駄にしたと言う認識を持ってください。

    キャンセル

0

通常画像を使うのではないかと思いますが、border-imageで近いものができそうです。
border-image
https://developer.mozilla.org/ja/docs/Web/CSS/border-image
(参考)
https://allabout.co.jp/gm/gc/441025/3/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/11 05:13

    全然遠いですねぇ。『ポプテピピック』をご覧になると能く判ると思います。

    キャンセル

  • 2018/05/15 10:20

    画像はもちろん自分で用意するのですよ?

    キャンセル

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

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8664questions

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

  • CSS

    5576questions

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