画像を使用せず、画面に枠付き吹き出しをつけ、背景は透過したい。かつ、そこに表示するテキストは１行のマーキー表示が希望です。

Question

画像を使用せず、画面に枠付き吹き出しをつけ、背景は透過したい。かつ、そこに表示するテキストは１行のマーキー表示が希望です。

受付中

回答 4

投稿 2015/01/29 11:14

評価
クリップ 4
VIEW 3,686

it_solution_lab

score 49

CSSで吹き出しを作る例として、三角を作成して、その上にずらした三角を背景色と同じで上に重ねることで、枠線付きの吹き出しを作成する例はあったが、
背景を透過するとなると、上に重ねた三角が意味を成さない？ため、
△部分は、背景色もしくは枠線色のベタになってしまう。
これをベタの部分をなしにして、スタイルシートで実現できる、という話を聞いたのだが、実現できていない。
また、この吹き出しの中は、横スクロールする１行のマーキー表示したい。

これらをあわせて実現できる方法が知りたいです。

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

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

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

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

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

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

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

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

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

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

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

回答 4 件

評価が高い順
新着順
古い順

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

score 2 · Answer 1 · 2015-01-29T11:53

+2

とりあえず三角部分だけですが、
適当に書いてみました。
http://jsdo.it/utun001/iRlP

この三角で使っている、範囲外を非表示にする方法を利用すれば、横スクロールのマーキーも書けると思うので、是非頑張ってみて下さい。

CSSはいろいろとやり様があるので、この方法でなくても特に問題有りません。
CSS3を利用しているので、レガシーブラウザ対応をする場合はもうちょっと小細工が必要になるかもです。

一応ソースも乗っけときます。

<div class='sankakuwrapper'>
    <div class='sankaku'>
    </div>
</div>

.sankakuwrapper{
    white-space: nowrap;
    overflow: hidden;
    width: 53px;
    padding: 30px 0 30px 30px;
}
.sankaku{
    border: solid #000000;
    width: 100px;
    height: 100px;
    content: "　";
    transform: rotate(45deg);
    background-color: #ffffff;
}

以上、ご参考になれば幸いです。

投稿 2015/01/29 11:53

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2015/01/29 12:29

ご回答ありがとうございます。
残念ながら、バックに写真を入れた場合に、三角の内側部分は透過されないため、
白い三角になってしまいました。

ご回答ありがとうございます。残念ながら、バックに写真を入れた場合に、三角の内側部分は透過されないため、白い三角になってしまいました。

キャンセル
2015/01/29 14:48

すいません。
私が質問内容を理解していないのかもしれませんが、透過しても問題無い前提で書いたというだけです。
.sankakuwrapper{
white-space: nowrap;
overflow: hidden;
width: 53px;
padding: 30px 0 30px 30px;
filter:alpha(opacity=50);
opacity: 0.5;
}
この様にalphaを指定すれば三角形ごと透過されると思いますが、これでは不十分という事でしょうか？
ちなみに、CSS3系のものはベンダープレフィックスを省略しているので、ブラウザによっては動きません。
宜しくお願い致します。

すいません。私が質問内容を理解していないのかもしれませんが、透過しても問題無い前提で書いたというだけです。 .sankakuwrapper{ white-space: nowrap; overflow: hidden; width: 53px; padding: 30px 0 30px 30px; filter:alpha(opacity=50); opacity: 0.5; } この様にalphaを指定すれば三角形ごと透過されると思いますが、これでは不十分という事でしょうか？ちなみに、CSS3系のものはベンダープレフィックスを省略しているので、ブラウザによっては動きません。宜しくお願い致します。

キャンセル
2016/01/26 20:01

>utun様
横から失礼します。

上記コードだと三角の内側を透明にすることは可能ですが、
テキストが入る方の□枠と結合した際に枠側のボーダー線を隠すことができないため、
「背景透過の線だけの吹き出し枠」にならないかと思います。
三角が重なっている部分だけborderの一部を透明にすることができるなら良いのですが
多分そんな都合のいいことはできないですよね…？

私も仕事でそのようなデザインを実装してくれと頼まれて、
「無理ですｗ」と答えてしまったクチなので、もし実現する方法をご存知でしたらご教授いただけますと幸いです。

>utun様横から失礼します。上記コードだと三角の内側を透明にすることは可能ですが、テキストが入る方の□枠と結合した際に枠側のボーダー線を隠すことができないため、「背景透過の線だけの吹き出し枠」にならないかと思います。三角が重なっている部分だけborderの一部を透明にすることができるなら良いのですが多分そんな都合のいいことはできないですよね…？私も仕事でそのようなデザインを実装してくれと頼まれて、「無理ですｗ」と答えてしまったクチなので、もし実現する方法をご存知でしたらご教授いただけますと幸いです。

キャンセル

score 2 · Answer 2 · 2015-01-29T12:41

+2

<!DOCTYPE html lang="ja">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<style>
.outer {
    padding:2em;
}
.triangle-isosceles {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #000;
  background: #f3961c;
  border-radius: 10px;
  
  background: linear-gradient(top, #f9d835, #f3961c);
  opacity: 0.9;
  z-index: 10;
  width: 65%;
}

/* creates triangle */
.triangle-isosceles:after {
  content: "";
  display: block; /* reduce the damage in FF3.0 */
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #f3961c transparent;
}
</style>
<script>
function typeWriter(selector) {
    var q = document.querySelector(selector);
    var txts = q.innerText;
    var arr = [];
    for (var i=0;i < txts.length;i++) {
        var ch = txts.charAt(i);
        arr.push("<span style='color:red;'>"+ch+"</"+"span>");
    }
    q.innerHTML = arr.join("");
    var chArr = q.childNodes;
    var counter = 0;
    var sw = 0;
    function timerFunc() {
        if (counter < chArr.length) {
            var ob = chArr[counter++];
            ob.style.color = (["blue", "red", "yellow", "green", "snow"])[sw % 5];
            setTimeout(function() {
                timerFunc();
            }, 200);
        } else {
            sw++;
            counter = 0;
            setTimeout(function() {
                timerFunc();
            }, 2000);
        }
    }
    
    timerFunc();
}

window.onload = function() {
    typeWriter(".marquee");
}
</script>
</head>
<body>
<!--
    Bubbles: http://nicolasgallagher.com/pure-css-speech-bubbles/
-->
<div class="outer">
    <div style="position: relative; width: 800px; height: 300px;">
        <div class="triangle-isosceles">

            <blockquote><p class="marquee"><span>Hello Speech Bubbles, this text scrolls left direction such as Marquee.</span></p></blockquote>

        </div>

        <div style="position: absolute; left:50px;top: -30px; width: 300px;">
            <pre>
Background text one
Background text two
Background text three
Background text four
five
six
seven
eight
nine
ten
eleven
        </pre>
    </div>
    </div>
</div>
</body>
</html>

utun さん同様、marquee はピクセルずらすのが面倒なのでライブラリ探してください。
この例はタイプライター。

投稿 2015/01/29 12:41

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2015/01/29 12:46

IEでしか動かないですね；；
ブラウザ汎用にするなら、jQuery 使ってください。
jQuery は import していますが、この例では使っていません。

IEでしか動かないですね；；ブラウザ汎用にするなら、jQuery 使ってください。 jQuery は import していますが、この例では使っていません。

キャンセル
2015/01/29 15:34

windows IE9 - 表示、動作OK
mac osx Chrome - 表示、動作OK
mac osx Safari - 表示、動作OK
windows Firefox 20 - 表示OK、動作しない
てな感じです。マーキーは、領域設定して中身を横にスムーススクロールさせる
だけなんで適当に作ってみてください。
jQuery みたいな便利なツール使えばブラウザ気にしないで作れるでしょう。

以上です

windows IE9 - 表示、動作OK mac osx Chrome - 表示、動作OK mac osx Safari - 表示、動作OK windows Firefox 20 - 表示OK、動作しないてな感じです。マーキーは、領域設定して中身を横にスムーススクロールさせるだけなんで適当に作ってみてください。 jQuery みたいな便利なツール使えばブラウザ気にしないで作れるでしょう。以上です

キャンセル
2015/01/29 15:41

考えていたのとは少々違いますが、これでもOKですね。
マーキーはまた別途調整します。
ありがとうございます。

考えていたのとは少々違いますが、これでもOKですね。マーキーはまた別途調整します。ありがとうございます。

キャンセル
2015/02/02 17:35

吹き出しの縦幅があまり小さくならないのですが、
どのパラメータをいじれば、変わりますでしょうか？
現在、いろいろ調整して、ふきだしの色を変えたり、フォントの色を変えたり、
吹き出しの横幅や縦幅も、変更してみているのですが、
理想は、テキスト１行分+１行分を、上下に振り分けたくらいで、合計２行分くらいの高さ・・・
現状は３行分くらいになってしまっています。

<!DOCTYPE html lang="ja">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script src="./JQuery/jquery-2.1.3.min.js"></script>
<script src="./jquery.marquee.js"></script>
<script>

$(function () {
$('p.ticker').marquee();
});
</script>

<style>
.outer {
padding:1.0em;
}
.triangle-isosceles {
position: relative;
padding: 1px;
margin: 0.5em 0 0.5em;
color: #ffffff;
background: #0000ff;
border-radius: 10px;

background: linear-gradient(top, #f9d835, #0000ff);
opacity: 0.7;
z-index: 10;
width: 90%;
}

/* creates triangle */
.triangle-isosceles:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -10px;
left: 30px;
width: 0;
border-width: 10px 10px 0;
border-style: solid;
border-color: #0000ff transparent;
}
</style>

</head>
<body>

<div class="outer">
<div style="position: relative; width: 480px; height: 20px;">
<div class="triangle-isosceles">

<blockquote>

<p class="ticker">
昔ながらのマーキーのようなスクロール表示。
</p>

</blockquote>

</div>

<div style="position: absolute; left:50px;top: -30px; width: 300px;">
<pre>
Background text one
Background text two
Background text three
Background text four
five
six
seven
eight
nine
ten
eleven
</pre>
</div>
</div>
</div>
</body>
</html>

吹き出しの縦幅があまり小さくならないのですが、どのパラメータをいじれば、変わりますでしょうか？現在、いろいろ調整して、ふきだしの色を変えたり、フォントの色を変えたり、吹き出しの横幅や縦幅も、変更してみているのですが、理想は、テキスト１行分+１行分を、上下に振り分けたくらいで、合計２行分くらいの高さ・・・現状は３行分くらいになってしまっています。 <!DOCTYPE html lang="ja"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <script src="./JQuery/jquery-2.1.3.min.js"></script> <script src="./jquery.marquee.js"></script> <script> $(function () { $('p.ticker').marquee(); }); </script> <style> .outer { padding:1.0em; } .triangle-isosceles { position: relative; padding: 1px; margin: 0.5em 0 0.5em; color: #ffffff; background: #0000ff; border-radius: 10px; background: linear-gradient(top, #f9d835, #0000ff); opacity: 0.7; z-index: 10; width: 90%; } /* creates triangle */ .triangle-isosceles:after { content: ""; display: block; /* reduce the damage in FF3.0 */ position: absolute; bottom: -10px; left: 30px; width: 0; border-width: 10px 10px 0; border-style: solid; border-color: #0000ff transparent; } </style> </head> <body>  <div class="outer"> <div style="position: relative; width: 480px; height: 20px;"> <div class="triangle-isosceles"> <blockquote> <p class="ticker"> 昔ながらのマーキーのようなスクロール表示。 </p> </blockquote> </div> <div style="position: absolute; left:50px;top: -30px; width: 300px;"> <pre> Background text one Background text two Background text three Background text four five six seven eight nine ten eleven </pre> </div> </div> </div> </body> </html>

キャンセル
2015/02/03 23:30

返事遅れました。
.triangle-isosceles {
position: relative;
padding: 0 15px 0 15px;
margin: 1em 0 3em;

こうすれば、スリムになります。元は、
padding: 15px;
です。

返事遅れました。 .triangle-isosceles { position: relative; padding: 0 15px 0 15px; margin: 1em 0 3em; こうすれば、スリムになります。元は、 padding: 15px; です。

キャンセル
2015/02/03 23:36

載せられたサンプルの動作確認してないのですが、もしかしたら、
jquery.markee.js が縦の高さを固定しているせいかもしれません。
DOMインスペクタなどで、マーキー状態でDOMツリーをみて、
それに設定されているCSS をごにょごにょする。
高さを狭くするCSS が見つかったら、そのCSSクラスを上書き
（同じ名前を再定義し、該当CSS を都合のいい高さに変更する）
または、インラインでマーキースクリプト内で設定されている場合
は、 !important をつけることで、インラインよりも優先にする
ことができます。知っていると思いますが。

載せられたサンプルの動作確認してないのですが、もしかしたら、 jquery.markee.js が縦の高さを固定しているせいかもしれません。 DOMインスペクタなどで、マーキー状態でDOMツリーをみて、それに設定されているCSS をごにょごにょする。高さを狭くするCSS が見つかったら、そのCSSクラスを上書き（同じ名前を再定義し、該当CSS を都合のいい高さに変更する）または、インラインでマーキースクリプト内で設定されている場合は、 !important をつけることで、インラインよりも優先にすることができます。知っていると思いますが。

キャンセル
2015/02/04 10:28

padding: 0 15px 0 15px;　にしてみましたが、
そうすると、枠の幅が、文字と同じ一行分くらいになってしまいました。
padding: 2px 15px 2px 15px;
など、0　のところを 10とか 3とか、色々やってみましたが、
文字と同じ一行になるか、元の約3行分になるか？で、その中間にはなりませんでした。
jquery.markee.js の中も見てみましたが、縦サイズを固定してそうなところは見つからず・・・といっても、正直よくわからないのですが、
また、文字のスクロールしていく、左端と右端の位置ももう少し、枠線に近い感じで
出来るだけ多く幅を使いたかったのですが、このあたりも、まだわかっていません

padding: 0 15px 0 15px;　にしてみましたが、そうすると、枠の幅が、文字と同じ一行分くらいになってしまいました。 padding: 2px 15px 2px 15px; など、0　のところを 10とか 3とか、色々やってみましたが、文字と同じ一行になるか、元の約3行分になるか？で、その中間にはなりませんでした。 jquery.markee.js の中も見てみましたが、縦サイズを固定してそうなところは見つからず・・・といっても、正直よくわからないのですが、また、文字のスクロールしていく、左端と右端の位置ももう少し、枠線に近い感じで出来るだけ多く幅を使いたかったのですが、このあたりも、まだわかっていません

キャンセル
2015/02/04 15:03

なんだかよくわからないのですが、新しいサンプルあげるので適当に調整して
いいとこ見つけ、各プロパティをCSS に再定義してご利用ください。

alert() の後ろのコードです。

なんだかよくわからないのですが、新しいサンプルあげるので適当に調整していいとこ見つけ、各プロパティをCSS に再定義してご利用ください。 alert() の後ろのコードです。

キャンセル

score 1 · Answer 3 · 2015-02-04T15:05

<!DOCTYPE html lang="ja">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--
<script src="./JQuery/jquery-2.1.3.min.js"></script>
-->
<script src="./jquery-1.11.2.min.js"></script>
<script src="./jquery.marquee.js"></script>
<script>

$(function () {
    $('p.ticker').marquee({direction: "right", pauseOnHover:true, gap:20});
    /** Options: default
        //If you wish to always animate using jQuery
        allowCss3Support: true,
        //works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
        css3easing: 'linear',
        //requires jQuery easing plugin. Default is 'linear'
        easing: 'linear',
        //pause time before the next animation turn in milliseconds
        delayBeforeStart: 1000,
        //'left', 'right', 'up' or 'down'
        direction: 'left',
        //true or false - should the marquee be duplicated to show an effect of continues flow
        duplicated: false,
        //speed in milliseconds of the marquee in milliseconds
        duration: 5000,
        //gap in pixels between the tickers
        gap: 20,
        //on cycle pause the marquee
        pauseOnCycle: false,
        //on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
        pauseOnHover: false
    */
    
    var wr = $(".js-marquee-wrapper")[0].getBoundingClientRect();
    var jr = $(".js-marquee")[0].getBoundingClientRect();
    
    
    alert("幅と高さ：" + (wr.right - wr.left) + ", " + (wr.bottom - wr.top) + " || " + "幅と高さ：" + (jr.right - jr.left) + ", " + (jr.bottom - jr.top));

    $(".triangle-isosceles").css({
        height:"1.3em"
    });
    $(".marquee-position blockquote").css({
        position: "relative"
        , top:"-2.1em"
        , border:"dashed 1px yellow"
    });
});
</script>


<style>
.outer {
    padding:1.0em;
}
.triangle-isosceles {
    position: relative;
    padding: 1px;
    margin: 0.5em 0 0.5em;
    color: #ffffff;
    background: #0000ff;
    border-radius: 10px;

    background: linear-gradient(top, #f9d835, #0000ff);
    opacity: 0.7;
    z-index: 10;
    width: 90%;
}

/* creates triangle */
.triangle-isosceles:after {
    content: "";
    display: block; /* reduce the damage in FF3.0 */
    position: absolute;
    bottom: -10px;
    left: 30px;
    width: 0;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #0000ff transparent;
}
</style>

</head>
<body>
<!--
Bubbles: http://nicolasgallagher.com/pure-css-speech-bubbles/
-->
<div class="outer">
    <div style="position: relative; width: 480px; height: 20px;">
        <div class="triangle-isosceles marquee-position">
            <blockquote>
                <p class="ticker">昔ながらのマーキーのようなスクロール表示。</p>
            </blockquote>
        </div>

        <div style="position: absolute; left:30px;top: -30px; width: 300px;">
            <pre>
Background text one
Background text two
Background text three
Background text four
five
six
seven
eight
nine
ten
eleven
            </pre>
        </div>
    </div>
</div>

</body>
</html>

score 0 · Answer 4 · 2016-08-09T14:17

0

少し前の投稿ですが、これどうにかしたいですよね～
三角重なる部分だけボーダーつけない・・・

今だとSVGで吹き出しを作るっていう選択肢しかないですかね？
SVGなら座標変えてサイズも三角の位置も変えられるし…

CSSでやるなら、吹き出しの下辺以外をボックスで表現して、
下辺と三角はそれぞれ別の要素にするしかないのかな。

どうしても1個無駄な要素が増えてしまう
つД｀)･ﾟ･｡･ﾟﾟ･*:.｡..｡.:*･ﾟ
サンプル

投稿 2016/08/09 14:17

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

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

画像を使用せず、画面に枠付き吹き出しをつけ、背景は透過したい。かつ、そこに表示するテキストは１行のマーキー表示が希望です。

関連した質問

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

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

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

画像を使用せず、画面に枠付き吹き出しをつけ、背景は透過したい。かつ、そこに表示するテキストは１行のマーキー表示が希望です。

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン