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

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

ただいまの
回答率

92.00%

  • JavaScript

    7957questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    2802questions

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

  • CSS3

    1083questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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

受付中

回答 4

投稿 2015/01/29 11:14

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

これらをあわせて実現できる方法が知りたいです。
  • 気になる質問をクリップする

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

    クリップした質問はマイページの「クリップ」タブからいつでも見ることができます。

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 4

+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系のものはベンダープレフィックスを省略しているので、ブラウザによっては動きません。
    宜しくお願い致します。

    キャンセル

  • 2016/01/26 20:01

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

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

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

    キャンセル

+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 していますが、この例では使っていません。

    キャンセル

  • 2015/01/29 15:34

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

    以上です

    キャンセル

  • 2015/01/29 15:41

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

    キャンセル

  • 2015/02/02 17:35

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

    <!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>
    <!--
    Bubbles: http://nicolasgallagher.com/pure-css-speech-bubbles/
    -->
    <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;
    です。

    キャンセル

  • 2015/02/03 23:36

    載せられたサンプルの動作確認してないのですが、もしかしたら、
    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 の中も見てみましたが、縦サイズを固定してそうなところは見つからず・・・といっても、正直よくわからないのですが、
    また、文字のスクロールしていく、左端と右端の位置ももう少し、枠線に近い感じで
    出来るだけ多く幅を使いたかったのですが、このあたりも、まだわかっていません

    キャンセル

  • 2015/02/04 15:03

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

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

    キャンセル

+1

<!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>

投稿 2015/02/04 15:05

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2015/02/04 15:07

    marquee の動きがなんとも微妙ですね。
    よそ様の作ったものを流用する限り、修正しないで使うならやむを得ないかと。
    修正案を求めるならば別スレッドにした方がいいかもしれません。

    キャンセル

0

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

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

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

どうしても1個無駄な要素が増えてしまう
つД`)・゚・。・゚゚・*:.。..。.:*・゚
サンプル

投稿 2016/08/09 14:17

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

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

ただいまの回答率

92.00%

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

  • JavaScript

    7957questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    2802questions

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

  • CSS3

    1083questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

閲覧数の多いJavaScriptの質問

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