Q&A
コードは必要です。最低限、font-familyとfont-weightを指定しているCSSのコードをご提示ください。
そのスタイルを反映させようとしている対象の、HTML側のコードもご提示ください。
aタグの文字(リンクの文字)の太さを変えたいです。試したことは、font-weightの数字を変えたりしてみましたが、変わりませんでした。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>iSara[イサラ] | バンコクのノマドエンジニア育成講座</title> 6 <link rel="stylesheet" href="css/iSara.css"> 7 </head> 8 <body> 9 <header> 10 <div class="header-left"> 11 <img src="image/isaralogo.png"> 12 </div> 13 <div class="header-right"> 14 <a href="">お問い合わせ / 資料請求はこちら</a> 15 </div> 16 17 </div> 18 </header> 19 <div class="title"> 20 <div class="title-top"> 21 22 </div> 23 24 </div> 25 </body> 26</html>
scss
1@charset "utf-8"; 2*{ 3 margin:0; 4 padding:0; 5} 6body{ 7 width:1425px; 8 font-family: "Hiragino Kaku Gothic Pro",Meiryo, Osaka,"MS PGothic",sans-serif; 9} 10header{ 11 height:75px; 12 background-color:white; 13 .header-left{ 14 float:left; 15 16 img{ 17 height:45px; 18 margin-top: 14px; 19 margin-left:127px; 20 21 } 22 p{ 23 display: inline-block; 24 font-size: 14px; 25 letter-spacing: 1.5px; 26 font-weight: 600; 27 color:#333333; 28 vertical-align: bottom; 29 margin-bottom:9px; 30 } 31 } 32 .header-right{ 33 float:right; 34 a{ 35 display: inline-block; 36 background-color:#da6b64; 37 line-height: 22px; 38 text-decoration: none; 39 color:rgb(255, 255, 255); 40 font-size: 14px; 41 font-weight:300; 42 letter-spacing:2px; 43 border-radius: 25px; 44 padding:11px 40px; 45 margin-top: 16px; 46 margin-right:127px; 47 &:hover{ 48 background-color:#d84940; 49 } 50 } 51 } 52} 53.title-top{ 54 height:500px; 55 background-image:url("https://isara.life/wp-content/themes/isara_v2/img/main.jpg"); 56 background-size:cover; 57}
上の画像のようにしたいのですが、ずっと下の画像のままです。
>必要であれば後ほど書き足します。
コードが提示できるようになってから質問しましょう。
質問する際にコードがいらないケースの方が珍しいので急いで質問したところで解決しません。
だって、結局コード検証しないと解決にならないでしょ？それとも質問ではなくもともと作業依頼のつもりですかね。
とりあえず丸投げと問題・課題がない の両方の低評価は避けられませんね。
ご提示のコードはSCSSのように見えますが、これをCSSにコンパイルしたものがiSara.cssという認識であっていますか？
thyda.eiqauさん、はい、そうです
回答2件
0
ベストアンサー
font-weight: 300; の指定で、通常よりも細い文字で表示されるかどうかは、使用しているフォントが太さ300に対応しているかどうかによります。
bold (もしくは 700) の指定をしたときに太くなるのに、 300 だと細くない (normalと同じに見える) という場合、フォントが 300 に対応していない可能性が高いです。
font-weight - CSS: カスケーディングスタイルシート | MDN
それとは別の問題で、もしご提示のコードが iSara.css なのであれば、CSSの構文ルールを満たしていないので、正常に評価されないでしょう。ご提示のSCSSコードをCSSにコンパイルしたものが iSara.css であるならば、問題ありませんが。
Feb 8, 2020 PM11:14追記
下記のコードで、font-familyを適当に変えてみたら、そのフォントがどの数値の指定に対応しているか確認できると思います。
html
1<!doctype html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <style>#preview { font-family: Noto Serif; }</style> 6</head> 7<body> 8 <input type="range" min="100" max="900" step="100" value="400" id="gauge"> 9 <p>Current Value: <i id="current_weight">400</i></p> 10 <p id="preview">Lorem ipsum dolor sit amet, consectetur adipisici elit</p> 11 <script> 12 document.getElementById('gauge').addEventListener('change', evt => { 13 const val = evt.currentTarget.value; 14 document.getElementById('preview').style.fontWeight = val; 15 document.getElementById('current_weight').textContent = val; 16 }); 17 </script> 18</body></html>
投稿2020/02/08 13:47
編集2020/02/08 14:14総合スコア2982
font-familyを指定して、font-weightも変更してみましたが、全く太さは変わりませんでした。
ちなみに、font-familyを指定していない時でも変わりませんでした。
400にしたときと700にしたときでも差は無いのですか？
確かに７００だと変わりました！
しかし、３００だと細くないので、fontが対応していないのかなと思います。
font-familyも見本の物を「WhatFont」で調べて入力したのですが、、
もしかして、fontがうまく適用されてないのでしょうか？
はい、だいたいのフォントはnormalとbold (400と700) には対応していると思いますが、それ以上細かい段階に対応しているかどうかはフォントによります。フォントによるということは、閲覧者がそのフォントをもっているかどうかにもよります。同一のUIを提供したいということであればWeb Fontを利用するしかないです。
Fontがうまく適用されているのかいないのかは、そちらの環境によるので、現状提供されている情報を見る限りでは「わからない」という回答になります。ブラウザの開発者ツールで、実際にどのフォントで表示されているかを確認できると思いますので、期待通りの挙動になっているか確認するのがよいと思います。
Chromeであれば、開発者ツールのElementsタブ、右側のStyles | Computed | Event Listeners | >>となっているComputedを選んで一番下に出てきます。
あと、ご提示のCSSはfont-familyがゴリゴリに文字化けしているので、再確認されることをおすすめします。
ありがとうございます！やはり、フォントが適用されてませんでした
fontの書き方を変えました。しかし、fontが変わっている様子もなく、aタグの太さも変わっていません。
やはり、webfontで探してlinkを探してくるべきでしょうか？
computed propertiesのところもAccessibility node not exposed
Element not interesting for accessibility.になってるので。
font-weightが変更できない原因はわかりました、ありがとうございました！
0
html
1<a href="#">リンク</a>
css
1a { 2 /* font-size: xx-large; 大きさ*/ 3 font-weight:bold; 4}
投稿2020/02/08 07:47
編集2020/02/08 07:49
総合スコア876
説明不足ですみません、font-weightを変えたいです
largeの部分に太さを書けばいいですか？
これでできませんか？
作業依頼に応じなくても良いと思います。
暇つぶしなのでそのへんはよしなに
sola-msrさん、すみません、codeを追加しました
あなたの回答
tips
プレビュー
