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

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

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

行動規範の内容に同意します

回答4件

lang
1<!DOCTYPE html lang="ja">
2<html lang="ja">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
6<script src="jquery.js"></script>
7<script src="jquery-ui.js"></script>
8<style>
9.outer {
10	padding:2em;
11}
12.triangle-isosceles {
13  position: relative;
14  padding: 15px;
15  margin: 1em 0 3em;
16  color: #000;
17  background: #f3961c;
18  border-radius: 10px;
19  
20  background: linear-gradient(top, #f9d835, #f3961c);
21  opacity: 0.9;
22  z-index: 10;
23  width: 65%;
24}
25
26/* creates triangle */
27.triangle-isosceles:after {
28  content: "";
29  display: block; /* reduce the damage in FF3.0 */
30  position: absolute;
31  bottom: -15px;
32  left: 50px;
33  width: 0;
34  border-width: 15px 15px 0;
35  border-style: solid;
36  border-color: #f3961c transparent;
37}
38</style>
39<script>
40function typeWriter(selector) {
41	var q = document.querySelector(selector);
42	var txts = q.innerText;
43	var arr = [];
44	for (var i=0;i < txts.length;i++) {
45		var ch = txts.charAt(i);
46		arr.push("<span style='color:red;'>"+ch+"</"+"span>");
47	}
48	q.innerHTML = arr.join("");
49	var chArr = q.childNodes;
50	var counter = 0;
51	var sw = 0;
52	function timerFunc() {
53		if (counter < chArr.length) {
54			var ob = chArr[counter++];
55			ob.style.color = (["blue", "red", "yellow", "green", "snow"])[sw % 5];
56			setTimeout(function() {
57				timerFunc();
58			}, 200);
59		} else {
60			sw++;
61			counter = 0;
62			setTimeout(function() {
63				timerFunc();
64			}, 2000);
65		}
66	}
67	
68	timerFunc();
69}
70
71window.onload = function() {
72	typeWriter(".marquee");
73}
74</script>
75</head>
76<body>
77<!--
78	Bubbles: http://nicolasgallagher.com/pure-css-speech-bubbles/
79-->
80<div class="outer">
81	<div style="position: relative; width: 800px; height: 300px;">
82		<div class="triangle-isosceles">
83
84			<blockquote><p class="marquee"><span>Hello Speech Bubbles, this text scrolls left direction such as Marquee.</span></p></blockquote>
85
86		</div>
87
88		<div style="position: absolute; left:50px;top: -30px; width: 300px;">
89			<pre>
90Background text one
91Background text two
92Background text three
93Background text four
94five
95six
96seven
97eight
98nine
99ten
100eleven
101		</pre>
102	</div>
103	</div>
104</div>
105</body>
106</html>
107

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

投稿2015/01/29 03:41

ipadcaron

総合スコア1693

ipadcaron

2015/01/29 03:46

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

ipadcaron

2015/01/29 06:34

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

it_solution_lab

2015/01/29 06:41

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

it_solution_lab

2015/02/02 08: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>

ipadcaron

2015/02/03 14:30

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

ipadcaron

2015/02/03 14:36

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

it_solution_lab

2015/02/04 01:28

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

ipadcaron

2015/02/04 06:03

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

行動規範の内容に同意します

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

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

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

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

lang
1<div class='sankakuwrapper'>
2    <div class='sankaku'>
3    </div>
4</div>

lang
1.sankakuwrapper{
2    white-space: nowrap;
3    overflow: hidden;
4    width: 53px;
5    padding: 30px 0 30px 30px;
6}
7.sankaku{
8    border: solid #000000;
9    width: 100px;
10    height: 100px;
11    content: "　";
12    transform: rotate(45deg);
13    background-color: #ffffff;
14}

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

投稿2015/01/29 02:53

utun

総合スコア384

it_solution_lab

2015/01/29 03:29

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

utun

2015/01/29 05:48

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

aKusano

2016/01/26 11:01

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

行動規範の内容に同意します

lang
1
2<!DOCTYPE html lang="ja">
3<html lang="ja">
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
7<!--
8<script src="./JQuery/jquery-2.1.3.min.js"></script>
9-->
10<script src="./jquery-1.11.2.min.js"></script>
11<script src="./jquery.marquee.js"></script>
12<script>
13
14$(function () {
15	$('p.ticker').marquee({direction: "right", pauseOnHover:true, gap:20});
16	/** Options: default
17        //If you wish to always animate using jQuery
18        allowCss3Support: true,
19        //works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
20        css3easing: 'linear',
21        //requires jQuery easing plugin. Default is 'linear'
22        easing: 'linear',
23        //pause time before the next animation turn in milliseconds
24        delayBeforeStart: 1000,
25        //'left', 'right', 'up' or 'down'
26        direction: 'left',
27        //true or false - should the marquee be duplicated to show an effect of continues flow
28        duplicated: false,
29        //speed in milliseconds of the marquee in milliseconds
30        duration: 5000,
31        //gap in pixels between the tickers
32        gap: 20,
33        //on cycle pause the marquee
34        pauseOnCycle: false,
35        //on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
36        pauseOnHover: false
37	*/
38	
39	var wr = $(".js-marquee-wrapper")[0].getBoundingClientRect();
40	var jr = $(".js-marquee")[0].getBoundingClientRect();
41	
42	
43	alert("幅と高さ：" + (wr.right - wr.left) + ", " + (wr.bottom - wr.top) + " || " + "幅と高さ：" + (jr.right - jr.left) + ", " + (jr.bottom - jr.top));
44
45	$(".triangle-isosceles").css({
46		height:"1.3em"
47	});
48	$(".marquee-position blockquote").css({
49		position: "relative"
50		, top:"-2.1em"
51		, border:"dashed 1px yellow"
52	});
53});
54</script>
55
56
57<style>
58.outer {
59	padding:1.0em;
60}
61.triangle-isosceles {
62	position: relative;
63	padding: 1px;
64	margin: 0.5em 0 0.5em;
65	color: #ffffff;
66	background: #0000ff;
67	border-radius: 10px;
68
69	background: linear-gradient(top, #f9d835, #0000ff);
70	opacity: 0.7;
71	z-index: 10;
72	width: 90%;
73}
74
75/* creates triangle */
76.triangle-isosceles:after {
77	content: "";
78	display: block; /* reduce the damage in FF3.0 */
79	position: absolute;
80	bottom: -10px;
81	left: 30px;
82	width: 0;
83	border-width: 10px 10px 0;
84	border-style: solid;
85	border-color: #0000ff transparent;
86}
87</style>
88
89</head>
90<body>
91<!--
92Bubbles: http://nicolasgallagher.com/pure-css-speech-bubbles/
93-->
94<div class="outer">
95	<div style="position: relative; width: 480px; height: 20px;">
96		<div class="triangle-isosceles marquee-position">
97			<blockquote>
98				<p class="ticker">昔ながらのマーキーのようなスクロール表示。</p>
99			</blockquote>
100		</div>
101
102		<div style="position: absolute; left:30px;top: -30px; width: 300px;">
103			<pre>
104Background text one
105Background text two
106Background text three
107Background text four
108five
109six
110seven
111eight
112nine
113ten
114eleven
115			</pre>
116		</div>
117	</div>
118</div>
119
120</body>
121</html>