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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

1回答

1371閲覧

header ボタンが反映されません

free_teku

総合スコア103

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2021/07/15 08:59

前提・実現したいこと

ボタンの文字を白色にし、ボタン背景をグラデーション(右からピンクと紫)にしたい

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

ありません。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>中級編</title> 8 <link rel="stylesheet" href="CSS/destyle.css"> 9 <link rel="stylesheet" href="CSS/style.css"> 10</head> 11<body> 12 <header class="header"> 13 <div class="header-inner"> 14 <a href="#"> 15 <img class="img-logo" src="image/Logo.png" alt="ロゴ"> 16 </a> 17 <h1 class="logo-text">コーディング</h1> 18 <nav class="nav"> 19 <ul class="header-list"> 20 <li class="list-item"><a href="#">特徴</a></li> 21 <li class="list-item"><a href="#">価格</a></li> 22 <li class="list-item"><a href="#">お問い合わせ</a></li> 23 </ul> 24 </nav> 25 <div class="cmn-link header-link"> 26 <a href="#">お問い合わせ</a> 27 </div> 28 </div> 29 </header> 30

header.css

1@charset "UTF-8"; 2/*色*/ 3/*basic*/ 4/*ボタン*/ 5/*fv*/ 6/*contact*/ 7html { 8 font-size: 62.5%; 9} 10 11body { 12 max-width: 1366px; 13 max-height: 768px; 14 background-color: #fff; 15 font-size: 1.6rem; 16 font-family: 'Noto Sans JP' sans-serif; 17 color: #333333; 18} 19 20img { 21 width: 100%; 22 height: auto; 23} 24 25a { 26 text-decoration: none; 27} 28 29/*共通タイトル*/ 30.main-title { 31 margin-bottom: 20px; 32 text-align: center; 33 font-size: 3.2rem; 34 margin: 0 auto; 35} 36 37.sub-title { 38 margin-bottom: 67px; 39 text-align: center; 40 font-size: 1.6rem; 41 color: #3BA6C9; 42} 43 44.wrapper { 45 width: 1022px; 46} 47 48/*ボタン*/ 49.cmn-link { 50 background-color: #FA41CC; 51 background-color: #6020B0; 52 -webkit-box-shadow: 0px 3px 6px #00000029; 53 box-shadow: 0px 3px 6px #00000029; 54 border-radius: 10px; 55} 56 57.cmn-link > p { 58 display: block; 59 font-size: 1.4rem; 60 text-align: center; 61} 62 63.header { 64 background-color: #FFFFFF; 65 max-height: 94px; 66 position: fixed; 67 top: 0; 68 z-index: 999; 69 width: 100%; 70 -webkit-box-shadow: 0px 3px 6px #00000029; 71 box-shadow: 0px 3px 6px #00000029; 72} 73 74.header-inner { 75 max-width: 1022px; 76 margin: 0 auto; 77 padding: 0 20px; 78 display: -webkit-box; 79 display: -webkit-flex; 80 display: -ms-flexbox; 81 display: flex; 82 -webkit-box-align: center; 83 -webkit-align-items: center; 84 -ms-flex-align: center; 85 align-items: center; 86 -webkit-box-pack: justify; 87 -webkit-justify-content: space-between; 88 -ms-flex-pack: justify; 89 justify-content: space-between; 90 height: 100%; 91} 92 93.header .img-logo { 94 width: 55px; 95 height: 55px; 96} 97 98.nav .header-list { 99 display: -webkit-box; 100 display: -webkit-flex; 101 display: -ms-flexbox; 102 display: flex; 103 -webkit-box-pack: justify; 104 -webkit-justify-content: space-between; 105 -ms-flex-pack: justify; 106 justify-content: space-between; 107 -webkit-box-align: center; 108 -webkit-align-items: center; 109 -ms-flex-align: center; 110 align-items: center; 111} 112 113.nav .header-list .list-item + .list-item { 114 padding-left: 46px; 115} 116 117.nav .header-link { 118 width: 155px; 119 height: 37px; 120 background-color: linear-gradient(to right, #FA41CC, #6020B0); 121} 122 123.nav .header-link > a { 124 color: #fff; 125 font-size: 1.4rem; 126 text-align: center; 127} 128 129

header.scss

1.header{ 2 background-color: #FFFFFF; 3 max-height: 94px; 4 position: fixed; 5 top: 0; 6 z-index: 9999; 7 width: 100%; 8 box-shadow: 0px 3px 6px #00000029; 9 10 &-inner{ 11 max-width: 1022px; 12 margin: 0 auto; 13 padding: 0 20px; 14 display: flex; 15 align-items: center; 16 justify-content: space-between; 17 height: 100%; 18 19 } 20 .img-logo{ 21 width: 55px; 22 height: 55px; 23 24 } 25 26 .logo-text{ 27 font-size: 2.4rem; 28 font-weight: bold; 29 margin-left: 16px; 30 31 } 32 } 33 .nav{ 34 .header-list{ 35 display: flex; 36 justify-content: space-between; 37 align-items: center; 38 .list-item{ 39 + .list-item{ 40 padding-left: 46px; 41 } 42 43 } 44 45 } 46 47 .header-link{ 48 width: 155px; 49 height: 37px; 50 >a{ 51 color: #fff; 52 font-size: 1.4rem; 53 text-align: center; 54 } 55 56 } 57 58 } 59 60

試したこと

グーグルアナリティクスで原因追及し、color: などを指定できることが分かった。
→そもそも、反映されてないことに気づく
CSS反映されない
こちらを調べ、確認したものの解決できずにします

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

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

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

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

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

guest

回答1

0

何をしたいかわかりませんが「.nav .header-link」の半角スペースと「background-color」を下記に直せばグラデーションが効くと思います(私のローカルで確認した上では)
.nav,.header-link {
width: 155px;
height: 37px;
background: linear-gradient(to right, #FA41CC, #6020B0);

}

投稿2021/07/15 14:18

himazin_bivar

総合スコア23

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

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

free_teku

2021/07/16 00:33

直りました。ありがとうございます。 私、変数を使っているのですが、変数のどの部分に原因があるのでしょうか? ※コンパイルはされています。 {base.scss} /*色*/ /*basic*/ $bg-color: #eefbfb; $sub-ttl-color: #3BA6C9; $txt-color: #333; /*ボタン*/ $btn-color: linear-gradient( to right, #FA41CC, #6020B0); /*fv*/ $pic-color: linear-gradient( to right, #05a5fa, #63fbd7); /*contact*/ $contact-bg:linear-gradient( to right, #05A5FA,#63FBD7,#67FFD6);
himazin_bivar

2021/07/18 08:38

どこの話ですか? ソース全部提示してください
free_teku

2021/07/21 07:25

以前、」回答いただいたコードで解消されました。グラデーションで表示できましたが、base.scssのように変数を使って、headerのぼたんなどを変更したいです。 base.scssに問題があるように思いますが、ないようなので関連するリソース送ります! 何卒宜しくお願い致します。
free_teku

2021/07/21 07:27

style.scss @import "./foundation/bace"; @import "./foundation/general"; @import "./layout/header"; @import "./content/fv"; @import "./content/features"; @import "./content/price"; //@import "./content/faq"; @import "./content/blog"; @import "./content/works"; @import "./content/contact"; @import "./layout/footer";
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問