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

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

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

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

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

Q&A

0回答

2174閲覧

CSSに設定したAdobe fontが反映されない。

shuto0901

総合スコア16

CSS

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

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

0グッド

0クリップ

投稿2020/05/21 20:49

前提・実現したいこと

placeholderで設定したテキストにadobe fontを反映させたい。

発生している問題・エラーメッセージ

一部の文字にadobe font(a-otf-midashi-go-mb31-pr6n)が反映されない。
イメージ説明

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="css/style.css"> 7 <title>jissen</title> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 9 <script> 10 // Adobe Font 11 (function(d) { 12 var config = { 13 kitId: 'znv5pdh', 14 scriptTimeout: 3000, 15 async: true 16 }, 17 h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) 18 })(document); 19 // Adobe Font 20 </script> 21</head> 22<body> 23 24<!-- contact --> 25<section class="contact" id="contact"> 26<div class="contact-inner"> 27<div class="contact-wrap"> 28 29<div class="contact-box-left"> 30<div class="contact-form"> 31<div class="contact-form-box"> 32<label class="contact-label">お名前<span class="contact-mark">*</span></label> 33<ul class="contact-list"> 34<li class="contact-item"><input class="contact-item-txts" type="text" name="name" placeholder="名" value=""></li> 35<li class="contact-item"><input class="contact-item-txts" type="text" name="name" placeholder="性" value=""></li> 36</ul> 37</div> 38<div class="contact-form-box"> 39<label class="contact-label">お名前(フリガナ)<span class="contact-mark">*</span></label> 40<ul class="contact-list"> 41<li class="contact-item"><input class="contact-item-txts" type="text" name="furigana" placeholder="セイ" value=""></li> 42<li class="contact-item"><input class="contact-item-txts" type="text" name="furigana" placeholder="メイ" value=""></li> 43</ul> 44</div> 45<div class="contact-form-box"> 46<label class="contact-label">メールアドレス<span class="contact-mark">*</span></label> 47<input class="contact-item-txt" type="text" name="email" placeholder="abcprograming@info.jp" value=""> 48</div> 49<div class="contact-form-box"> 50<label class="contact-label">お申込み内容<span class="contact-mark">*</span></label> 51<textarea class="contact-item-txtarea" name="content" placeholder="こちらにご相談内容・お申し込み内容をご記入ください。"></textarea> 52</div> 53</div> 54</div> 55</div> 56</div> 57</section><!-- /contact --> 58 59<script src="js/javascript.js"></script> 60</body> 61</html>

css

1@charset "UTF-8"; 2vvvvvhtml, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td { 3 margin: 0; 4 padding: 0; 5 border: 0; 6 font-weight: normal; 7 font-size: 100%; 8 vertical-align: baseline; 9 -webkit-box-sizing: border-box; 10 -moz-box-sizing: border-box; 11 box-sizing: border-box; 12} 13 14article, header, footer, aside, figure, figcaption, nav, section { 15 display: block; 16} 17 18body { 19 line-height: 1; 20 -ms-text-size-adjust: 100%; 21 -webkit-text-size-adjust: 100%; 22} 23 24ol, ul { 25 list-style: none; 26 list-style-type: none; 27} 28 29.webFonts { 30 font-family: kan415typos-std, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; 31} 32 33.contact-inner { 34 width: 1200px; 35 max-width: 100%; 36 margin: 0 auto; 37 margin-bottom: 112px; 38} 39 40.contact-wrap { 41 display: flex; 42 justify-content: space-between; 43} 44 45.contact-box-left { 46 max-width: 616px; 47} 48 49.contact-tit { 50 font-size: 23px; 51 font-family: a-otf-midashi-go-mb31-pr6n, sans-serif; 52 margin-top: 54px; 53 margin-bottom: 24px; 54} 55 56.contact-tit span { 57 background: linear-gradient(transparent 60%, rgba(252, 143, 0, 0.35) 0%); 58} 59 60.contact-txt { 61 font-size: 20px; 62 font-family: a-otf-midashi-go-mb31-pr6n, sans-serif; 63 max-width: 480px; 64 line-height: 36px; 65 margin-bottom: 20px; 66} 67 68.contact-txt-sub { 69 font-size: 14px; 70 font-family: a-otf-midashi-go-mb31-pr6n, sans-serif; 71 max-width: 486px; 72 line-height: 30px; 73} 74 75.contact-form { 76 max-width: 616px; 77 border-radius: 3px; 78 background-color: #f6f6f6; 79 vertical-align: middle; 80 padding: 47px 48px 20px 20px; 81 box-sizing: border-box; 82} 83 84.contact-form-box { 85 display: flex; 86 justify-content: space-between; 87 border-radius: 3px; 88 padding: 0 0 10px 20px; 89} 90 91.contact-item-txt, .contact-item-txtarea { 92 display: block; 93 max-width: 365px; 94 float: right; 95 width: 390px; 96 height: 44px; 97 padding: 6px 12px; 98 font-size: 12px; 99 font-family: a-otf-midashi-go-mb31-pr6n, sans-serif; 100 line-height: 1.42857143; 101 color: #555; 102 cursor: pointer; 103 background-color: #fff; 104 border: 1px solid #ccc; 105 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 106 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 107 -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 108 -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 109 transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 110 margin: 0; 111 box-sizing: border-box; 112} 113 114.contact-item-txts { 115 display: block; 116 width: 180px; 117 height: 44px; 118 padding: 6px 12px; 119 font-size: 12px; 120 font-family: a-otf-midashi-go-mb31-pr6n, sans-serif; 121 line-height: 1.42857143; 122 color: #555; 123 cursor: pointer; 124 background-color: #fff; 125 border: 1px solid #ccc; 126 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 127 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 128 -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 129 -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 130 transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 131 box-sizing: border-box; 132} 133 134.contact-item-txtarea { 135 height: 112px; 136} 137 138.contact-label { 139 margin-bottom: 0; 140 text-align: left; 141 width: 113px; 142 float: left; 143 position: relative; 144 line-height: 44px; 145 font-size: 11px; 146 font-family: a-otf-midashi-go-mb31-pr6n, sans-serif; 147 min-height: 1px; 148 padding-right: 40px; 149 padding-left: 15px; 150} 151 152.contact-list { 153 display: flex; 154 list-style: none; 155 padding: 0; 156 margin: 0; 157} 158 159.contact-item:nth-child(1) { 160 margin-right: 5px; 161} 162 163.contact-mark { 164 color: red; 165} 166

試したこと

https://helpx.adobe.com/jp/creative-cloud/kb/cq03130152.html
上記サイトを参考にCreative Cloudのweb fontのオンとオフを切り替える。
➡︎効果なし。

https://on-ze.com/archives/7196
上記サイトを参考にfont-familiyでフォントを指定。
➡︎効果なし。

初心者の拙い質問ではありますが、どなたかご教授いただけたら幸いです。

補足情報(FW/ツールのバージョンなど)

Creative Cloudのデスクトップアプリはログイン中です。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問