今ならAmazonで一冊無料で本が読める↓

今ならAmazonで一冊無料で本が読める↓

【HTMLとCSSでボタンデザイン】クリックしたときにボタンが押される(へこむ)アクションを付ける方法

HTML&CSS

今回はボタンをクリックしたときに押される(凹む)アクションを付ける方法とその仕組みについて説明します。

以下のようなボタンです。
凹むボタン
WordPressでボタンを設置する方法については以前書いたので、参考にしてください。

 

今ならAmazonで一冊無料で本が読める↓

今ならAmazonで一冊無料で本が読める↓

大まかな流れ

作業に移る前に全体像をはっきりさせておこうと思います。

  1. 投稿画面のテキストにhtml記述(ボタン設置)
  2. スタイルシートにcss記述(ボタンデザイン

の2段階となります。

コピペするだけで済むのでサラッと説明します。

 

ボタンを設置する

まずはボタンの元となるものを設置します。

まずはボタンを作ってみましょう。

WordPressの投稿画面でテキストエディタを選択します。

以下の様に記述します。

「凹むボタン」というテキストが表示されました。

ここからデザインをしていきます。

 

ボタンをデザインする

WordPressメニューの「外観」→「テーマ編集」とすすみ、「スタイルシート(style.css)」というファイルに書き込んでいきます。

スタイルシート(style.css)」の一番最後の部分に以下のコードを貼り付けてください。

ファイルを更新すれば作業は完了です。

実際にボタンが凹むか試してみてください。

※注意

ブラウザのキャッシュが残っているとボタンデザインが反映されない可能性があるので、シークレットモードで試すかキャッシュを消すかしてください。

 

また、投稿画面にコピペした以下のコードですが

href=”#”の 「#」の部分にリンク先を置き換えればボタンリンクの完成となります。

例えばhref=”https://www.google.co.jp/”てな具合です。

 

さらにリンク先を別タグで表示させたいときは以下の様にします。

Google

 

以上で凹むボタンの設置方法については終了です。

その仕組みについて説明するので、興味がある人は見ていってください。

 

ボタンが押される(へこむ)仕組み

ボタンが凹むのは、もちろんCSSを設定しているからなのですが、じゃあどのようなCSSを設定しているのかを簡単に説明しようと思います。

 

言葉だけだとわかりづらいので図解にします。(出てくる数値は例えばです。)

もともとボタンの上に10pxの空白をつくっておきます。

ボタンを押すと空白が15pに増えるように設定します。

これをCSSで書くと「margin-top: 10px;」⇒「margin-top: 15px;」となります。

 

同時にボタンの影を消すCSSを書きます。

box-shadow: none;」です。

 

ボタンのライトグリーン部分が影のグリーンの部分に移動したようになり、まるでボタンが押されたかのように見えるのです。

非常にわかりづらいかもしれませんが、上図で理解して頂ければと思います。

 

もっというとmargin-bottomも設定していて

もともと「margin-top: 10px;」だったのを「margin-top: 5px;

にしています。

そうすることによってボタンより下にあるものすべてが移動するバグを直すことができます。

 

ちなみにクリックしたときにデザインの変化させるっていうのは

疑似要素の「:active」というものを使います。

押された時のデザインの記述が以下の部分です。

opacityってのは透明度。

margin-topが上の空間。

margin-bottomが下の空間。

box-shadowが影の設定です。

 

仕組みについては以上です。

 

最後に

長々と説明してきましたが、ボタン自体は簡単に設置できるので、もし興味があったらやってみてください。

実際に自分でコードを書いてみて色々試してみると、理解が深まると思います。

僕自身はhtmlやcssが好きなのでこの記事も楽しく書けましたし、あっという間に時間が過ぎました

htmlとcssを勉強したい人がいたら以下の記事をどうぞ。

 

今日は以上です。

コメント