いいねボタンを作ってみた


お疲れ様です。MS部の上原です。

福岡制作拠点でウェブコーダーを務めております。

ウェブコーダーとは、ウェブサイトのフロントエンド領域の実装屋さんです。

デザインの静的なビジュアルを動的なウェブページに変換する役割を担っています。

この変換過程では、主にHTML、CSS、JavaScriptという3つの言語を使い分けることで実現されます。
HTML、CSS、JavaScript はウェブサイトを構築するために使用する三大技術です。

今回は仕事紹介がテーマということで、ウェブコーダーが扱うこれら3つのフロントエンド言語の役割と、実際に使ってみて簡易的なパーツを実装する過程を紹介します！

※フロントエンド（クライアントサイドとも言われる）はChromeやSafariなどのウェブブラウザで実行され、反対にバックエンド（サーバーサイドとも呼ばれる）はサーバー上で実行されます。

言語の役割について

231114_blog-001

3つの言語をそれぞれ簡単にひとことで言うと、
HTMLは”構造”、CSSは”デザイン”、JavaScriptは”動き”です。

HTML

231114_blog-004

ウェブページの骨組みを作ります。
ウェブページ上にどのようなコンテンツがあるか（テキスト、画像、ビデオなど）、そしてそれらがどこに配置されるべきかを定義します。骨組みの部品にあたるHTMLタグ（例えば <h1> タグは大見出しを意味する）を使って、構造を形成します。

CSS

231114_blog-003

見た目を作ります。
HTMLで作られた枠組みに「見た目」を適用し、文字のサイズ、間隔、色などを制御し、レイアウトを整えて、ウェブサイトを視覚的に魅力的にします。基本的には、レスポンシブデザインもCSSの役割です。デスクトップ、タブレット、スマートフォンなどの異なるデバイスでコンテンツが最適な見え方に変えられます。

JavaScript

231114_blog-004

ウェブページに「動き」を与えます。
JavaScriptはユーザーのクリック、スクロール、キーボード入力などの行動に反応し、それに応じてウェブページ上で様々な操作を行います。例えば、商品の画像をクリックすると、その商品画像が大きく表示されるなど、ユーザーとウェブページの間でのやり取りをスムーズにし、より良いユーザー体験を提供する役割を果たしています。

実際に「いいねボタン」を作ってみる

HTML,CSS,JavaScriptを使った例として、ミニマムでちょうどよい簡単なUIパーツ「いいねボタン」を作成する手順をご紹介します。

以下のデザインを前提にコーディングします。

231114_blog-005

1. HTMLでマークアップ

まずはHTMLでボタンの構造を作ります。ユーザーがクリックできるように<button>タグを使用し、その中にハートアイコンをSVG形式で挿入します。

<button type="button" class="likeButton">
 <svg class="likeButton__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M91.6 13A28.7 28.7 0 0 0 51 13l-1 1-1-1A28.7 28.7 0 0 0 8.4 53.8l1 1L50 95.3l40.5-40.6 1-1a28.6 28.6 0 0 0 0-40.6z"/></svg>
 いいね
 </button>

231114_blog-007

2. CSSでスタイリング

次に、CSSでボタンにスタイルを適用します。
色、サイズなどの見た目を定義します。

.likeButton {
 color: #888;
 font-size: 1.5em;
 background-color: transparent;
 border: 0.1em solid;
 border-radius: 1em;
 padding: 0.333em 1em 0.25em;
 line-height: 1.2em;
 box-shadow: 0 0.25em 1em -0.25em;
 cursor: pointer;
 transition: color 150ms ease-in-out, background-color 150ms ease-in-out, transform 150ms ease-in-out;
 outline: 0;
 }
 .likeButton__icon {
 display: inline-block;
 fill: currentColor;
 width: 0.8em;
 height: 0.8em;
 margin-right: 0.2em;
 }

231114_blog-008

この時点では、動きありきで変わる見た目が未定ですので、
ホバーした時、いいねされた時のCSSも追記して忘れずに定義しておきます。

.likeButton {
 color: #888;
 font-size: 1.5em;
 background-color: transparent;
 border: 0.1em solid;
 border-radius: 1em;
 padding: 0.333em 1em 0.25em;
 line-height: 1.2em;
 box-shadow: 0 0.25em 1em -0.25em;
 cursor: pointer;
 transition: color 150ms ease-in-out, background-color 150ms ease-in-out, transform 150ms ease-in-out;
 outline: 0;
 }
 .likeButton__icon {
 display: inline-block;
 fill: currentColor;
 width: 0.8em;
 height: 0.8em;
 margin-right: 0.2em;
 }
 .likeButton:hover {
 color: #e5348c;
 }
 .likeButton.liked {
 color: #ffffff;
 background-color: #e5348c;
 border-color: #e5348c;
 }

231114_blog-009

あともう少しです。

3. JavaScriptで動かす

最後に、JavaScriptでユーザーのクリック操作を受け取って、ボタンが押された時にいいねされた状態の見た目に変更する処理を書いていきます。

document.addEventListener('DOMContentLoaded', function() {
 var likeButtons = document.getElementsByClassName('likeButton');
 Array.from(likeButtons).forEach(function(likeButton) {
 likeButton.addEventListener('click', function() {
 likeButton.classList.toggle('liked');
 });
 });
 }, false);

231114_blog-010

これでクリックに反応してスタイルが変化する「いいねボタン」が完成しました！

 

いかがでしたでしょうか？
この記事では、職務の中心にあるHTML、CSS、JavaScriptという3つの言語の基本的な使い方と、具体的な「いいねボタン」の制作過程を紹介しました。ほんの一例に過ぎませんが、ウェブコーダーの業務を垣間見ていただけたかと思います。

ご相談、ご意見、ご感想はお気軽にお寄せください。

次回のブログはMS部 谷本さんです！
よろしくお願いいたします。

+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-+:-+:-+:-+:-+
ブログを見ていいね！したくなった方はこちら…
－ジオブレインfacebook－

http://www.facebook.com/GeoBrainCorporation

もっとジオブレインの仕事内容を知りたくなった方はこちら…
－ジオブレインHP－

https://www.geo-brain.com/

+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-+:-+:-+:-+:-+


Related posts