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

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

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

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

CSS

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

Q&A

解決済

1回答

3297閲覧

transformで文字がぼやける

i_tkk

総合スコア11

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/11/28 00:14

編集2018/11/28 01:46

dialogBoxを上下左右中央寄せにする際、
transform: translate(-50%,-50%);を使用すると文字がぼやけてしまいます。
調べたところ、backface-visibilityなどを足したりしましたが、
ぼやけたままです。

デザインの都合上、どうしても上下左右中央寄せにしたい為、
解決方法又は別の方法がございましたらご教授お願いいたします。
よろしくお願いいたします。

html

1 <div @click="toggleLineup('#')" class="overlay"></div> 2 <div class="dialogBox"> 3 <div class="iscroll"> 4 <div class="lineup-content" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);"> 5 <div @click="toggleLineup('#')" class="sort-status--active"><span class="sort-icon open"></span></div> 6 <p class="lineupList-ttl">ああああああああ</p> 7 <ul> 8 <li><a href="">いいいいいいいい</a></li> 9 <li><a href="">うううううううう</a></li> 10 <li><a href="">ええええええええ</a></li> 11 <li><a href="">おおおおおおおお</a></li> 12 13 </ul> 14 </div> 15 </div> 16 </div>

css

1 2.dialog .dialogBox { 3position: absolute; 4width: 90%; 5top: 50%; 6left: 50%; 7transform: translate(-50%,-50%); 8display: table-cell; 9background: #fff; 10padding: 20px; 11border: 1px solid #666; 12backface-visibility: hidden; 13-webkit-backface-visibility: hidden; 14-webkit-font-smoothing: antialiased; 15} 16 17.dialog .overlay { 18position: absolute; 19top: -10px; 20left: -10px; 21bottom: -10px; 22right: -10px; 23background: #fff; 24opacity: 0.77; 25} 26 27.dialog .dialogBox { 28width: 90%; 29position: absolute; 30height: auto; 31top: 0; 32left: 0; 33right: 0; 34margin: auto; 35} 36 37.dialog .iscroll { 38height: 100%; 39overflow: hidden; 40display: inline-block; 41} 42 43.sort-status--active { 44display: block; 45width: 20px; 46height: 20px; 47position: absolute; 48top: 0; 49background-color: #d72b45; 50} 51 52.open { 53transform: translate3d(0, 0, 0) rotate(45deg); 54cursor: pointer; 55} 56 57.sort-icon { 58display: block; 59background-image: url(./images/lineup-plus.png); 60background-position: center; 61width: 20px; 62height: 20px; 63transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1); 64backface-visibility: hidden; 65transform: translate3d(0, 0, 0) rotate(0deg); 66} 67 68.lineupList-ttl { 69padding: 0 0 0 34px; 70font-weight: 600; 71} 72 73.lineup-content ul { 74display: table-cell; 75position: relative; 76width: 33.333%; 77} 78 79.lineup-content li {padding: 0 20px 20px 34px;} 80 81.dialog li:after { 82content: ""; 83display: inline-block; 84position: absolute; 85right: 0; 86width: 12px; 87height: 14px; 88background-image: url(./images/arr.svg); 89} 90

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

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

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

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

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

guest

回答1

0

自己解決

↓で修正したら、自己解決できました。

css

1.dialogBox{margin: auto;} 2 3.dialog .dialogBox { 4width: 90%; 5position: absolute; 6height: auto; 7top: 0; 8bottom: 0; 9left: 0; 10right: 0; 11display: table; 12background: #fff; 13padding: 20px; 14border: 1px solid #666; 15}

投稿2018/11/28 02:23

i_tkk

総合スコア11

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問