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

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

ただいまの
回答率

89.20%

aタグの文字の太さは変えられませんか?

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 281

reo_fukkase

score 30

aタグの文字(リンクの文字)の太さを変えたいです。試したことは、font-weightの数字を変えたりしてみましたが、変わりませんでした。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>iSara[イサラ] | バンコクのノマドエンジニア育成講座</title>
        <link rel="stylesheet" href="css/iSara.css">
    </head>
    <body>
        <header>
            <div class="header-left">
                <img src="image/isaralogo.png">
            </div>    
            <div class="header-right">
                <a href="">お問い合わせ / 資料請求はこちら</a>
            </div>

            </div>
        </header>
        <div class="title">
            <div class="title-top">

            </div>

        </div>
    </body>
</html>
@charset "utf-8";
*{
    margin:0;
    padding:0;
}
body{
    width:1425px;
    font-family: "Hiragino Kaku Gothic Pro",Meiryo, Osaka,"MS PGothic",sans-serif;
}
header{
    height:75px;
    background-color:white;
    .header-left{
        float:left;

        img{
        height:45px;
        margin-top: 14px;
        margin-left:127px;

        }
        p{
            display: inline-block;
            font-size: 14px;
            letter-spacing: 1.5px;
            font-weight: 600;
            color:#333333;
            vertical-align: bottom;
            margin-bottom:9px;
        }
    }
    .header-right{
        float:right;
        a{
            display: inline-block;
            background-color:#da6b64;
            line-height: 22px;
            text-decoration: none;
            color:rgb(255, 255, 255);
            font-size: 14px;
            font-weight:300;
            letter-spacing:2px;
            border-radius: 25px;
            padding:11px 40px;
            margin-top: 16px;
            margin-right:127px;
            &:hover{
                background-color:#d84940;
            }
        }
    }
}
.title-top{
    height:500px;
    background-image:url("https://isara.life/wp-content/themes/isara_v2/img/main.jpg");
    background-size:cover;
}


イメージ説明
イメージ説明
上の画像のようにしたいのですが、ずっと下の画像のままです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2020/02/08 19:49

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • thyda.eiqau

    2020/02/08 22:41

    ご提示のコードはSCSSのように見えますが、これをCSSにコンパイルしたものがiSara.cssという認識であっていますか?

    キャンセル

  • reo_fukkase

    2020/02/08 22:51

    thyda.eiqauさん、はい、そうです

    キャンセル

回答 2

checkベストアンサー

+1

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を適当に変えてみたら、そのフォントがどの数値の指定に対応しているか確認できると思います。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <style>#preview { font-family: Noto Serif; }</style>
</head>
<body>
  <input type="range" min="100" max="900" step="100" value="400" id="gauge">
  <p>Current Value: <i id="current_weight">400</i></p>
  <p id="preview">Lorem ipsum dolor sit amet, consectetur adipisici elit</p>
  <script>
    document.getElementById('gauge').addEventListener('change', evt => {
      const val = evt.currentTarget.value;
      document.getElementById('preview').style.fontWeight = val;
      document.getElementById('current_weight').textContent = val;
    });
  </script>
</body></html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/02/09 10:11

    ありがとうございます!やはり、フォントが適用されてませんでした

    キャンセル

  • 2020/02/09 11:00

    fontの書き方を変えました。しかし、fontが変わっている様子もなく、aタグの太さも変わっていません。
    やはり、webfontで探してlinkを探してくるべきでしょうか?
    computed propertiesのところもAccessibility node not exposed
    Element not interesting for accessibility.になってるので。

    キャンセル

  • 2020/02/09 12:53

    font-weightが変更できない原因はわかりました、ありがとうございました!

    キャンセル

+1

<a href="#">リンク</a>
a {
    /* font-size: xx-large; 大きさ*/
    font-weight:bold;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/02/08 18:18

    作業依頼に応じなくても良いと思います。

    キャンセル

  • 2020/02/08 18:23

    暇つぶしなのでそのへんはよしなに

    キャンセル

  • 2020/02/08 22:01

    sola-msrさん、すみません、codeを追加しました

    キャンセル

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

  • ただいまの回答率 89.20%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る