【初心者向け】「ボタンを作成してみよう」 Web制作を独学で学ぶ人の為のコーディング講座 part1

この記事の対象者

実務未経験者
学習を始めたての人
独学で学んでいる人
挫折してしまった人

Web制作を独学で学ぶ人のためにHTML・CSSを実務で通用するレベルで学習していきます。
それでは早速始めていきます。

わからないことがある場合

HTMLやCSSでわからないことがある場合、公式で確認しましょう。

一番情報が信用できます。

書いてあることがわからなくても構いません。

何回か調べているうちにわかるようになってきます。

おすすめの検索方法は、

mdn color

等、わからないcssとmdnをくっつけて検索することです。

公式

https://developer.mozilla.org/ja/

目次非表示

「ボタンを作成してみよう」
ボタンの作成方法
幅と高さを指定して作成するボタン
余白で作成するボタン
hoverについて
まとめ

目次へ

「ボタンを作成してみよう」

今回のテーマは、「ボタンを作成してみよう」です。
ボタンはWebサイトではほとんどと言って良い程出現します。
とても簡単に作成できるのでやっていきましょう。

今回作成するボタンはこちらです。
※画像クリックで拡大できます。

ちょっと多いかもしれませんが、
7つの種類を作ってみようと思います。

環境
・mac 11.6.4
※windowsでも適宜置き替えていただければ大丈夫です。

ボタンの作成方法

ボタンは、二つの作成方法があります。
・幅と高さを指定して作成するボタン(見本1〜7)
・余白で作成するボタン(見本8〜10)

この二つの作成方法を押さえておけば、
実務でほとんど対応できます。

幅と高さを指定して作成するボタン

作成する際の手順について、以下の通りです。

どういう役割かを考える
HTMLで適切なタグ選定
コードを書く
CSSで見た目の装飾

どういう役割かを考える

まず、どういう役割のボタンか考えてみましょう。
詳細へという文字がかかれているので、ボタンを押すと詳細へページに遷移する役割をもったボタンだとわかります。

HTMLで適切なタグ選定

役割が決まったので、HTMLで適切なタグを選定します。
遷移することを実現するためには、aタグを使用します。

コードを書く

使用するHTMLのタグが決まったら、コードを書いていきます。

vscodeを起動してください。
フォルダーを開くをクリックして、好きな場所を選択してください。
わからなければデスクトップでも大丈夫です。
そのうちわかってきます。

フォルダーを作成するをクリックしてフォルダー名をつけましょう。
なんでもいいですが、今回はbtnにしました。

ここをクリックしてファイル名を入力します。
index.htmlというファイル名はよく使用されるので覚えてください。

index.htmlを作成したら、こんな感じでコードを書いてください(キーボードの!ボタンを押してtabボタンを押すと、同じになると思います)。

軽く説明すると、1行目でHTML5を使用します宣言をしています。
HTMLはタグ付けして情報を表現します。
3〜8行目のタグは、ファイルのパスだったり、meta情報だったりが入ります(今はよくわからなくて大丈夫です)。
9〜11行目のタグは、実際に画面に表示される内容が入ります。

ここまで作成できたら、タグの中にコードを書いていきましょう。
こんな感じです。
10行目を追加してます。

aタグのhref属性が実際の遷移先のURL(画面には表示されない)です。
aタグの間に囲まれているテキストが画面に表示される文字です。

実際に書いたコードをブラウザで確認してみましょう。
Chromeを起動して、index.htmlファイルをドラッグ&ドロップ。

すると、こんな感じで表示されていると思います。

※エラー等でうまく表示できない方は、Finderからこのファイルをドラッグ&ドロップしてください。

ここまで出来たら次にcssを使って見た目を整えていきます。

CSSで見た目の装飾

手順としては、以下の通りです。

cssファイルの作成
デザイン情報の確認
cssファイルで見た目の作成
htmlファイルにcssファイルのパスを通す

cssファイルの作成

早速、cssのファイルを作成します。
index.htmlを作成した時のように、
新しいファイルをクリックしてファイル名を入力します。
style.cssはよく使われているファイル名なので覚えてください。

ファイルの作成が完了したら、
index.htmlからstyle.cssを読み込めるようにパスを通します。
8行目を追加しています。
こんな感じです。

デザイン情報の確認

続いて、デザイン情報の確認をしていきます。
xdリンクをクリックしてください。
https://xd.adobe.com/view/09ec0ea5-cccf-4625-83a1-68fa104ced52-5cbf/

今回は①黒いボタンを作成します。

必要な情報は、

ボタンの横のサイズ(横幅)
ボタンの縦のサイズ(高さ)
ボタンの色(背景色)
フォントの色
フォントのサイズ
フォントのスタイル

これらがあれば作成できそうです。

それではデザイン情報を確認していきます。
デザイン情報の確認方法は別記事にしましたのでそちらでご確認ください。

デザイン情報の確認方法

2022年8月16日【初心者向け】デザインデータ確認方法 Adobe XD Web制作を独学で学ぶ人の為のコーディング講座

以下の情報がわかればいい感じです。

ボタンの横のサイズ(横幅) -> W: 220px
ボタンの縦のサイズ(高さ) -> H: 80px
ボタンの色(背景色) -> カラー: #000000
フォントの色 -> #ffffff
フォントのサイズ -> 18px
フォントのスタイル -> Noto Serif JP, Regular

これで必要な情報が手に入ったので、コードを書いていきます。

cssファイルで見た目の作成

cssで見た目を装飾する際、何のhtml要素を装飾するのかを指定してあげます。
今回は、aタグの詳細へボタンなのですが、
これにクラス名をつけてあげます。
名前付けと思って大丈夫です。

htmlファイルを開いて、btnというクラス名をつけてあげましょう。
14行目のaタグに
class=”btn”
を追加しました。
こんな感じです。

cssファイルを開いて、先程指定したbtnクラスにデザイン情報通りのスタイルを指定しましょう。
こんな感じです。

内容を説明します。

width -> 横幅を指定します。
height -> 高さを指定します。
background-color -> 背景色を指定します。
color -> 文字の色を指定します。
display -> 最初は少し難しいのでセットで覚えるだけでも大丈夫です。意味としては、htmlにはボックスモデルという概念があります。ブロック、インライン、インラインブロックの3つが基本です。このボックスモデルをdisplayを使用して変えています。今回はflexを指定したので、中の要素を並び替えたり位置を変えたりすることができます。
align-items -> display: flex;とセットで使用します。高さ(Y軸)の指定位置に要素を配置します。
justify-content -> display: flex;とセットで使用します。横(x軸)の指定位置に要素を配置します。
text-decoration -> デフォルトで指定しているテキストのスタイルを変更できます。

フォントの設定のやり方

2022年8月19日【初心者向け】Google Fontsの設定方法 Web制作を独学で学ぶ人の為のコーディング講座

先程index.htmlを表示したブラウザを更新してみてください。
デザインと同じようなボタンが作成されていればOKです。
ブラウザを閉じてしまった人は、
Chromeを起動して、index.htmlファイルをドラッグ&ドロップすると表示されます。