ボタンのスタイルが変更できません

解決済

回答 2

投稿 編集

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

fuzno

score 12

失礼いたします。

【問題】
トップへ戻るボタンの文字の大きさや背景の色を変更できません。
cssの記述を変更したのですが、望んだ形に反映されず、原因がわかりませんでした。

【目標】
文字を大きく、背景を見やすい色へ変更したいです。

【現状】
検証ツールでの変更は、反映されます。
cssでスタイルを指定、
jQueryで動きを実装してあります。
できれば、cssでスタイルを管理したいです。

よろしくおねがいいたします。


11:35html追記
11:40css追記

実際のコードです。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="image/dtpfavicon.ico">
<link rel="stylesheet" href="reset.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<title>DTP・WEBデザイナー養成科</title>
</head>
    <body>
    <header>
    <p class="ordinal">へこ山県内の求職者の方へ</p>
    <p class="logo">DTP・WEBデザイナー養成科開講のお知らせ</p>
   <p>平成28年2月2日(火)〜平成28年8月1日(月)<br>
   ☆土日祝は休み<br>
   9:30〜16:00<br>
   定員:20名 <br>
   受講料:無料<br>
   申込締め切り:平成28年1月7日<br>
   委託元:ポリテクセンターへこ山(<a href="#nyushobasho">地図</a><br>
   <a href="#c9" class="button">申し込む</a></p>
     </header>
     <ul id="menu">
   <li class="yoko"><a href="#c1">目的</a></li>
   <li class="yoko"><a href="#c2">受講場所</a></li>
   <li class="yoko"><a href="#c8">チラシ</a></li>
   </ul>
   <div id="ham-menu">
    <ul>
   <li class="ham"><a class="ham" href="#c1">目的</a></li>
   <li class="ham"><a class="ham" href="#c2">受講場所</a></li>
   <li class="ham"><a class="ham" href="#c8">チラシ</a></li>
    </ul>
</div>
<div id="menu-background"></div>
   <div id="c1">
   <h3>目的</h3><br>
   <p class="bun">
   へこ山県は、地方では珍しく、印刷業の盛んな土地です。<br>
   日々高まる業界からの要請に応じ、<br>
   即戦力となるデザイナーを育成するコースとしてこの度、本コースが設置されました。<br>
   <br>
H28年 就職実績 web:30% 印刷業界:40% その他:10%
   <h5>☆応募は、求職者の方に限らせていただきます。</h5><br></p>
   </div><!--c1-->
   <div id="c2">
 <h3>受講場所</h3>
 <div id="jyukobasho" class="clearfix">
 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3282.2143247068298!2d133.9221955152309!3d34.649289880447746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x355407b879131d31%3A0x14e589272f3f5c97!2z5Lit5Zu944OH44K244Kk44Oz5bCC6ZaA5a2m5qChIO-9ie-9kOmkqA!5e0!3m2!1sja!2sjp!4v1468304771086" width="400" height="300" frameborder="0" style="border:0" allowfullscreen class="chizu"></iframe>
 <p class="bun">デザイン専門学校</p>
 <h5><a href="https://www.google.co.jp/maps/place/%E3%80%92700-0861+%E5%B2%A1%E5%B1%B1%E7%9C%8C%E5%B2%A1%E5%B1%B1%E5%B8%82%E5%8C%97%E5%8C%BA%E6%B8%85%E8%BC%9D%E6%A9%8B%EF%BC%93%E4%B8%81%E7%9B%AE%EF%BC%94%E2%88%92%EF%BC%91%EF%BC%90/@34.6492964,133.9221906,17z/data=!3m1!4b1!4m5!3m4!1s0x355407b87912afc3:0x9b07d8db37806728!8m2!3d34.6492964!4d133.9243793">へこ山県へこ山市北区清輝橋3-4-10</a></h5>
    </div><!--c9-->
    <footer>
    <p class="pagetop"><a href="#wrap">▲ページトップ</a></p>
    <div id="c10">
    <h3>お問い合わせ先</h3>
    <p class="bun">
    独立行政法人高齢・障害・求職者雇用支援機構へこ山支部<br>
    へこ山職業能力開発促進センター(ポリテクセンターへこ山)<br>
    〒1000-0951 へこ山県へこ山市北区田中980(<a href="#nyushobasho">地図</a><br>
    TEL:086-246-2530<br>
    FAX:086-241-1909<br>
    訓練科 事業主係<br>
    http://www3.jeed.or.jp/hecoyamasan/poly<br>
    <a href="banner.html"><img src="image/taro.gif"></a>
    <h5>&copy;fuzno rensyu</h5>
    </p>
    </div><!--c10-->

    </footer>

    <script>
$(document).ready(function() {
  var pagetop = $('.pagetop');
    $(window).scroll(function () {
       if ($(this).scrollTop() > 100) {
            pagetop.fadeIn();
       } else {
            pagetop.fadeOut();
            }
       });
       pagetop.click(function () {
           $('body, html').animate({ scrollTop: 0 }, 500);
              return false;
   });
});
</script>
<script>
$(function() {
  var offsetY = -10;
  var time = 500;
  $('a[href^=#]').click(function() {
    var target = $(this.hash);
    if (!target.length) return ;
    var targetY = target.offset().top+offsetY;
    $('html,body').animate({scrollTop: targetY}, time, 'swing');
    window.history.pushState(null, null, this.hash);
    return false;
  });
});
</script><!--http://phiary.me/jquery-page-link-smooth-scroll/#post-h2-id-1-->
    </body>
</html>
@charset "UTF-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
 body{
color:#fff;
background-color:#dbbe92;
font-family: 'Noto Sans JP', sans-serif;
font-size:14px;
font-weight:100;
}

@media screen and (max-width: 900px) {
.a { display: block; }
.b { display: block; }
.c { display: block; }
}

@media screen and (min-width: 791px) {
#menu-background{ display: none; }
#ham-menu{ display: none; }
}

@media screen and (max-width: 790px) {
#menu-background{ display: block; }
#ham-menu{ display: block; }
#menu { display: none; }
}

@media screen and (max-width: 479px) {
.chizu { display: none; }
#menu { display: none; }
}

header{
    padding-top:20px;
    background-image:url(image/DTPweb_03.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position:120% 10%;
background-color:#e0ae9c;
}


p{
    margin:30px;
    font-weight:100;
    }

p.logo{
    margin-top:-20px;
    height:100px;
    background-image:url(image/kaiko_03.png);
    background-repeat: no-repeat;
    text-indent:-9999px;
}

p.ordinal{
padding-left:5px;
padding-bottom:0;
text-align:left;
}

.bun{
    margin:30px;
    font-weight:100;
    }

div{margin:0;
padding:0;
    }

.button {
    padding:10px 20px 10px 20px;
    margin:-10px 0px 20px 30px;
    border:solid 1px #ffffff;
    border-radius:4px;
    width:auto;
    display: inline-block;
    background-color:transparent;
    position: left;
    font-weight:100;
}

.button:hover {
    border:solid 1px #d81d40;
    background-color: #d81d40;
}

.button,
.button::before,
.button::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

div.c1{
    background-color:#0C6;
    }

ul{
margin:0 0 0 10px;
padding:0 0 20px 0;
}

li.yoko{
display:inline;
margin:0px;
padding:10px 20px;
border-right: solid 1px #fff;
font-weight:100;
}

a:link{
    text-decoration:none;
      color:#fff;
    font-weight:100;
    }

a:hover{
color:#ffffff;
font-weight:100;
background-color: #d81d40;
}

a:visited{
font-weight:100;
    color:#fff;
}

a,
a::before,
a::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
a.button{
padding:10px;
text-align:left;
margin:20px 0 40px 0px;
}


.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}
.pagetop a {
    display: block;
    background-color: #f30024;
    text-align: center;
    color: #222;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
    filter:alpha(opacity=90);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.pagetop a:hover {
    display: block;
    background-color: #000000;
    /*background-color: #b2d1fb;*/
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

footer{
    background-color:#8b6b3d;
    margin:0px;
    padding:20px 0px 20px 0px;}

#c1{
    margin:10px 0 0 0;
    padding:20px 0 10px 30px;
}

#c2{
    margin:10px 0 0 0;
    padding:20px 0 10px 30px;
}

#c3{
    margin:10px 0 0 0;
    padding:20px 0 10px 30px;
}

#c4{
    margin:10px 0 0 0;
    padding:20px 0 10px 30px;
}

#c5{
    margin:10px 0 0 0;
    padding:20px 0 10px 30px;
}

#c6{
    margin:10px 0 0 0;
    padding:20px 0 10px 30px;
}

#c6c{
    margin:10px 0 0 0;
    padding:20px 0 10px 30px;
}

#c7{
    margin:10px 0 0 0;
    padding:20px 0 10px 30px;

}

#c8{
    margin:10px 0 0 0;
    padding:20px 0 10px 30px;
}


#c9{
    margin:10px 0 0 0;
    padding:20px 0 10px 30px;
}

#c10{
    margin:10px 0 0 0;
    padding:20px 0 10px 30px;
    background-color:transparent;
}

h3{
font-size:18px;
padding:10px 20px 10px 20px;
    margin:0px 0px 0px 0px;
    border:solid 1px #ffffff;
    width:auto;
    display: inline-block;
    background-color:transparent;
    position: left;
    font-weight:300;
}

h4{
font-weight:400;
}

h5{
    font-size:12px;
    padding:0 0 0 30px;
    font-weight:100;
    }

.chizu{
float:left;
margin-right:10px;
}
#ham-menu {
    background-color: #fff;
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px; 
    position: fixed;
    right: -300px; 
    top: 0;
    transition: transform 0.3s linear 0s; 
    width: 300px;
    z-index: 1000;
}

#ham-menu::before {
    background-color: #fff;
    border-radius: 0 0 0 10px;
    color: #333; 
    content: "≡";
    display: block;
    font-size: 50px; 
    height: 50px;
    line-height: 50px;
    right: 100%;
    text-align: center;
    top: 0;
    width: 50px;
}

#menu-background {
    background-color: #333;
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right:0px;
    width: 100%;
    z-index: -1;
}

#ham-menu:hover {
    transform: translate(-300px);}

#ham-menu:hover + #menu-background {
    opacity: 0.5;
    z-index: 999;}

.ham a{
color:#000;
margin:0px;
font-weight:100;
}

a.ham:hover{
color:#000;
font-weight:100;
background-color:transparent;
letter-spacing: 5px;
}

a.ham:visited{
color:#000;
font-weight:100;
}

a,
a::before,
a::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2016/09/20 11:24

    「望んだ形」とはどのようなものでしょうか。また現状はどうなっているのでしょうか。

    キャンセル

  • fuzno

    2016/09/20 11:30

    ありがとうございます。
    ソースをそのまま貼ろうとしたのですが、長すぎて記載できていないです。
    少々お待ちくださいませ。
    上記のコードでは問題なく動いたのですが、
    実際のコードでは、何らかの原因で、スタイルが反映されない状態なのです。
    質問に欠陥があり、申し訳なかったです。

    キャンセル

回答 2

checkベストアンサー

+2

普通にfont-sizebackground-colorは効いているので、そこを変更してあげればOKですよ。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/09/20 11:59

    ありがとうございます。検証ツールでは、
    ▲ページトップ
    には、.pagetop以外でクラスやidはかかっていなかったです。
    もうすこしみてみたいとおもいます。

    キャンセル

  • 2016/09/20 12:00

    今見たところ、やはり普通にちゃんと見えていますよ?

    キャンセル

  • 2016/09/20 13:36

    ありがとうございます…本当ですね、申し訳ないです。
    環境のせいなのか、けずったところに問題があったのかですね…。
    いただいたアドバイスをもとに、自分の環境でもうすこし確認してみます。

    キャンセル

+1

ソースのHTMLに問題がある場合スタイルが適切にあたらない事があります。タグの対応(閉じタグが適切にあるか)や " の抜け、入れ子に出来ないタグの入れ子が発生しているなどを確認してみてください。

確認する場合はデベロッパーツールよりブラウザで「ページのソースを表示」を使用したほうが崩れが判る場合があります。デベロッパーツールに表示されるHTMLはブラウザが解釈した後のHTMLなので、実際のHTMLと違うことがあります。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/09/20 13:40

    ありがとうございます。デベロッパーツールの件、勉強になりました。
    一度ソースで見てみます。

    キャンセル

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

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