Q&A
前提・実現したいこと
ボタンを押し込んでいる表現をしたいのですが、うまくできません
発生している問題・エラーメッセージ
写真の さっそく開発する のボタンが押し込めれるようにしたいのですが、できませんf
該当のソースコード
CSS、HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> <!-- ここでFont Awesomeを読み込んでください --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> </head> <body> <!-- ここにコードを書いていきましょう --> <header> <div class="container"> <div class="header-left"> <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png" > </div> <div class="header-right"> <a href="#" class ="login">ログイン</a> </div> </div> </header> <div class="top"> <div class="container"> <h1>LEARN TO CODE.</h1> <h1>LEARN TO BE CREATIVE.</h1> <p>Progateはオンラインプログラミング学習サービスです。</p> <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> <div class="btn-wrapper"> <a href="#" class="btn signup">新規登録はこちら</a> <P>or</P> <a href="#" class="btn facebook"> <span class="fa fa-facebook"></span> Facebookで登録 </a> <a href="#" class="btn twitter"> <span class="fa fa-twitter"></span> Twitterで登録 </a> </div> </div> </div> <div class="lesson-wrapper"> <div class="container"> <div class="heading"> <h2>Learn Where to Get Started!</h2> </div></div> <div class="message-wrapper"> <div class="container"> <div class="message-list"> <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか？</h2> <h3>Let's learn to code. learn to be creative!</h3> </div> </div> <span class="btn message">さっそく開発する</span> </div> <div class="bot"></div> <footer> </footer> </body> </html><div class="lessons"> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/html.png"> <p>HTML & CSS</p> <a class="txt-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</a> </div> </div> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/jQuery.png"> <p>jQuery</p> <a class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</a> </div> </div> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/ruby.png"> <p>Ruby</p> <a class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</a> </div> </div> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/php.png"> <p>PHP</p> <a class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</a> </div> </div> </div> </div>
ここからCSS
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
margin: 0;
padding: 0;
}
body {
font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
/* ここからCSSを書いていきましょう */
.container{
width:1170px;
margin:0 auto;
}
.top{
background-image:url(https://prog-8.com/images/html/advanced/top.png);
background-size:cover;
padding:180px 0 100px 0;
color:white;
text-align:center;
}
.top h1{
font-size:45px;
letter-spacing:5px;
opacity:0.7;
}
.top p{
opacity:0.7;
margin-bottom:15px;
}
.btn{
padding:8px 24px;
color:white;
display:inline-block;
opacity:0.8;
border-radius:4px;
}
.signup{
background-color:#239b76;
margin-top:15px;
margin-bottom:15px;
}
.twitter{
background-color:#55acee;
}
.facebook{
background-color:#3b5998;
margin-right:10px;
}
.btn:hover{
opacity:1;
}
header{
height:65px;
width:100%;
background-color:rgba(34,49,52,0.9);
position:fixed;
top:0;
z-index:10;
}
.logo{
width:124px;
margin-top:20px;
}
.header-left{
float:left;
}
.header-right{
float:right;
background-color:rgba(255,255,255,0.3);
transition: all 0.5s;
}
.header-right:hover{
background-color:rgba(255,255,255,0.5);
}
.header-right a{
line-height:65px;
padding:0 25px;
color:white;
display:block;
}
.lesson-wrapper{
height:580px;
background:#f7f7f7;
text-align:center;
}
.heading{
padding-top:80px;
padding-bottom:50px;
color:#5f5d60;
}
.heading h2{
font-weight:normal;
}
.lesson{
float:left;
width:25%;
}
.lesson-icon{
position:relative;
}
.lesson-icon p{
position:absolute;
top:90px;
width:100%;
color:white;
}
.txt-contents{
font-size:13px;
display:inline-block;
width:80%;
margin-top:15px;
color:#b3aeb5;
}
.message-wrapper{
padding-bottom:80px;
text-align:center;
color:#5f5d60;
border-bottom:1px solid #eee;
}
.message-list h2{
font-weight:normal;
}
.message-list h3{
padding-bottom:50px;
}
.message{
background:#5dca88;
padding:15px 40px;
border-radius:4px;
box-shadow:0 7px #1a7940;
cursor:pointer;
}
.message :active{
position:relative;
top:7px;
box-shadow:none;
}
試したこと
答えも見たのですが、特に間違ったてるとこがわからなかったです。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
ベストアンサー
typo（打ち間違え）です。余分なスペースがあります。
.message :active{→.message:active{
CSSではスペースや改行に「結合子」という意味があるので、気を付けた方がいいです。
通常は単一の空白文字 ( ) で表される
投稿2021/03/08 05:16
総合スコア36087
0
javascriptを使わずにCSSだけでボタン押し込みを実装する場合はinputのcheckboxが簡単です。
htmlを扱いやすいように以下のように変えます。
html
1<label> 2 <input type="checkbox" name="join" value="submit" style="display:none;"> 3 <span class="btn message">さっそく開発する</span> 4</label>
CSSでcheckを付けたinputの隣のspanを指定してあげます。
css
1input:checked + span { 2 position:relative; 3 top:7px; 4 box-shadow:none; 5}
ポチポチすると上下するようになったかと思います。
投稿2021/03/07 04:52
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。