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

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

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

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

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

JavaScript

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

HTML

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

CSS

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

Q&A

2回答

616閲覧

IE11で、円形の中にテキストをはみ出さないように表示させたい

Kuroame

総合スコア6

CSS3

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

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

JavaScript

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2020/07/17 06:56

IE11で、円形の中にテキストをはみ出さないように表示させたいです。

https://www.mitsue.co.jp/knowledge/blog/frontend/201905/30_1655.html
こちらを参考に、shape-outsideを使用し円形にテキストを表示するようにしました。

IE11ではshape-outsideは反映されないので、shape-outsideをIE対応させる以下のcss-shapes-polyfillを使用しましたが、表示が崩れてしまいました。
https://github.com/adobe-webplatform/css-shapes-polyfill

イメージ説明

該当のソースコード

html

1<div class="box shape-inside"> 2 <div class="left"></div> 3 <div class="right"></div> 4 <ul><li>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</li></ul> 5</div>

css

1.box { 2 padding: 5px; 3 width: 200px; 4 height: 200px; 5 border-radius: 50%; 6 border: 2px solid #9d9d9d; 7 box-sizing: border-box; 8} 9.left, 10.right { 11 height: 200px; 12 width: 33.33%; 13 clear: none !important; 14} 15.left { 16 float: left; 17 shape-outside: polygon(0% 0%, 0% 100%, 100% 100%, 0% 70%, 0% 30%, 100% 0%); 18} 19.right { 20 float: right; 21 shape-outside: polygon(100% 0%, 100% 100%, 0% 100%, 100% 70%, 100% 30%, 0% 0%); 22}

css-shapes-polyfillの影響でshapes要素にclearがかかっていたので、clear: noneを入れてみましたが片側しか反映されませんでした。

css

1.box div:nth-child(1), 2.box div:nth-child(2){ 3clear: none !important; 4}

イメージ説明

IE11で、円形の中にテキストをはみ出さないように表示させる方法はあるのでしょうか?
ご教授いただけましたら幸いです。

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

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

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

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

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

guest

回答2

0

IE11で、円形の中にテキストをはみ出さないように表示させる方法はあるのでしょうか?

CSS以外の別の方法を検討する必要があります。


IE11 標準で未対応の機能を偽装するために JavaScriptによる polyfill を導入されています.

この polyfill を用いても対応できない場合にできることは 3つ です。

  1. 別の方法で対応する(yambejp さんの回答も代替案の一つです:SVGを使う)。

SVGの他にも、Canvasで画像として表現する方法もあるはずです。
別の方法(代替案)は時間コストも比較的抑えつつも期待する表現ができるのではないでしょうか。
2. polyfill の上位互換となるよう、JavaScriptで追加実装する(CSSに拘る場合はこの方法になります)。
時間コストこそ必要ですが、JavaScriptで polyfillの実装を拡張して対応します。
スクラッチでライブラリを書いた経験があるのであれば、不可能ではないはずです。
3. 表現を諦める。
上記のどちらも採用できない場合は表現を諦めるしかありません。

投稿2020/07/17 22:00

AkitoshiManabe

総合スコア5432

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

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

0

特殊なことをIEにやらせるのは難しいとおもいますけどね
SVGとかで円に内接する四角形におさめるようにテキストを配置するとかで
がまんできないですか?

投稿2020/07/17 08:42

yambejp

総合スコア114572

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問