どうも、れいです。
私はゲームブログを運営していますが、こういったことも解説してみたいなと思い、やってみることにしました。(エンジニアブロガーへの憧れ)
ちゃんとこのサイトを見て手順を踏めば、どなたでも自分のウェブコンテンツを作ることができます。
シリーズ化するかはわかりませんが、まずは「初めてのボタン編」ということで、ボタンを作るとこまで解説していきたいと思います。
- プレイ済ゲーム300以上
- 所持ハード20以上
- PC自作経験とGBASP改造経験
- インディーゲー好き
- デザイン等のクリエイティブなことが好き
よろしくね！
＠れい
必要なもの
- PC1台
- WindowsのPCに標準で入ってる「メモ帳」
この2つだけです。
使える人はテキストエディタを使ってもいいですが、今回は超初心者向けの解説なので、「メモ帳」主体で説明していきます。
メモ帳ってどこにあるの？って方は、ホーム画面左下のWindowsの検索バーで「メモ帳」と入力してみましょう。
メモ帳の見つけ方(クリックで開きます)
準備段階
メモ帳を開いたら、以下の内容をコピーして、メモ帳に貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>コピーして貼り付けるだけでいいです。
貼り付けたら、一旦そのメモ帳を保存しましょう。
もちろん左上の「ファイル」から「保存」を選んでもいいです。
「index.html」という名前で、わかりやすく「デスクトップ」に保存しておきましょう。
index.htmlという名前で保存できたら、このようになるかと思います。
ブラウザ(Edge)のアイコンになっているのが分かりますか？
こうなれば保存は成功です。
ブラウザアイコンが表示されない場合
もしかして、このような状態になっていませんか？
このアイコンで保存されているようであれば、「テキストファイル」として保存されていることになっています。
ファイル名を修正して「htmlファイル」に直してあげましょう。
以下の手順を踏めば、簡単に直すことができるので大丈夫です。
開くフォルダは何でもいいです。
Enterを押します。
そしたら、index.htmlをダブルクリックして開いてみましょう。
真っ白なブラウザ画面が出てくると思います。
それは、ネット上に表示される自分だけのキャンバスのようなものです。
ネット上に表示といっても、そのキャンバスを見れるのは自分だけなのでご安心ください。
そこにボタンを作りこんで表示させていきますよ。
いよいよボタン制作！
まず、先ほどコピペして頂いたこれの
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>この部分についてです。
<body>
</body>bodyと書いてありますが、この中にキャンバスに表示させたい内容を入力していきます。
このbodyと/bodyの間に以下をコピペしてください。
<a href="#">button</a>これがボタンの基礎の部分です。
これを追記した後にメモ帳を保存して、真っ白なブラウザ画面をクリックし、更新(ctrl+R)してみましょう。
buttonと書かれた青い文字が表示されていると思います。
この文字に装飾をいろいろ加えて、立派なボタンの見た目にしていきますよ。
見た目を装飾するための「CSSファイル」をつくろう！
先ほど保存してもらったindex.htmlは、htmlファイルと呼ばれるものです。
htmlファイルだけでは「見た目」を装飾することは難しいので、cssファイルというものを作ります。
作り方はindex.htmlファイルを作ってもらった時と一緒です。
メモ帳を開き、今度は「style.css」という名前で保存してもらいます。
保存先はindex.htmlの時と同じく、デスクトップにしてください。
以下のように表示されていればOKです。
CSSファイルに記述していこう！
今回は初心者の方が理解できなくて離脱しないように、説明は控えめでいきます。
れいそんなぁ！仕組みをちゃんと知りたいから説明してよ！
という方もご安心ください。
アコーディオンメニューの中に説明を書いておきます。
仕組みもしりたい！という方はアコーディオンメニューを開いてください。
【見本】これがアコーディオンメニューです。クリックで開きます。
れい見つかっちゃった！
この中に説明を書いていくから仕組みを知りたい人はドンドンクリックしてね！
CSSファイルへ記述する内容
style.cssへ以下をコピペして保存してください。
a {
padding: 10px 30px;
margin: 10px;
display: inline-block;
border-radius: 30px;
background-color: #fff;
border: 2px solid red;
color: red;
font-weight: bold;
text-decoration: none;
}このコードの説明
padding: 10px 30px;
- 内側の余白を設定します。
- 縦方向（上下）の余白が
10px、横方向（左右）の余白が30pxです。 - リンクのクリック範囲が広がり、ボタンのような見た目になります。
margin: 10px;
- 外側の余白を設定します。
- ボタンの周囲に
10pxのスペースを作り、他の要素との間隔を確保します。
display: inline-block;
- インライン要素だったボタンを、ブロック要素の特性を持つインラインブロック要素に変更します。
- この設定により、
paddingやmarginが有効になり、ボタンのような形を維持できます。
border-radius: 30px;
- 要素の角を丸めるプロパティです。
30pxの値により、完全な丸みを帯びた外観が作られます。
background-color: #fff;
- ボタンの背景色を白 (
#fff) に設定します。
border: 2px solid red;
- ボタンの周りに、赤い (
red) 2ピクセル幅の実線（solid）の枠線を指定します。
color: red;
- テキストの色を赤 (
red) に設定します。
font-weight: bold;
- フォントの太さを「太字」に設定します。
text-decoration: none;
- リンクの下線を消します。
このコードには、ボタンを装飾するための命令が記述されています。
さらに、index.htmlファイルの「title」の下、「head」の上に以下をコピペしましょう。
<link rel="stylesheet" href="style.css">このコードの説明
style.cssで記述した見た目の内容を、index.htmlへ反映させることができます。
これを書かなきゃcssの内容は絶対に反映されないので必ず忘れないようにしてください。
このコードには、「index.html」と「style.css」を紐づける役割があります。
cssファイルに書いた内容がhtmlファイルにも反映されるようにするために紐づけます。
これでindex.htmlファイルとstyle.cssファイルを両方保存し、ブラウザをクリックで選択して更新してみると下記のようなボタンが出来上がってるはずです。
こうなっていればバッチリです。
現在のhtmlとcssがどうなってるのか不安な方はこちら
この通りに記述できていれば正しいです。
この時点でのindex.htmlファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#">button</a>
</body>
</html>この時点でのstyle.cssファイル
a {
padding: 10px 30px;
margin: 10px;
display: inline-block;
border-radius: 30px;
background-color: #fff;
border: 2px solid red;
color: red;
font-weight: bold;
text-decoration: none;
}+α 動きをつけてみよう！
ここからはもっと挑戦したい人向けの内容です。
見た目的には完成のように見えますが、現時点だとこのボタンにマウスカーソルを乗せても何も起こりません。
これでは面白くないので、「ボタンにカーソルを乗せたときにボタンの見た目が変わる」動きをつけてみましょう。
style.cssファイルに以下を追記して保存してください。
a:hover {
background-color: red;
color: #fff;
transition: .4s;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}このコードの説明
このコードは、リンク要素 (<a> タグ) にホバー効果(マウスを重ねたときの効果)を追加するためのCSSスタイルを定義しています。
ユーザーがリンクにマウスカーソルを重ねた際に、見た目や挙動が変化する仕組みを設定しています。
コードの詳細な説明
a:hover
- これは、ユーザーがリンク (
<a>タグ) にカーソルを合わせたときに適用されるスタイルを指定します。
適用されるスタイル
background-color: red;
- 背景色を赤色 (
red) に変更します。
color: #fff;
- テキストの色を白色 (
#fff) に変更します。
transition: .4s;
- CSSのスタイル変更がスムーズにアニメーションするようにします。
0.4秒かけて、ホバー時のスタイル変更（背景色やテキスト色の変化など）が徐々に適用されます。- 背景がパッと変わるのではなく、フェードインのような動きになります。
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
- ホバー時に要素に影を付けます。
影の構成:
0: 水平方向の影の距離（左または右に移動しない）。8px: 垂直方向の影の距離（下方向に影が落ちる）。15px: ぼかし半径（影を柔らかく広げる）。rgba(0, 0, 0, 0.2): 透明度20%の黒い影。
要素が浮いているような立体感を演出します。
ブラウザで更新をかけてください。
ボタンにマウスカーソルを当てると、ボタンの見た目が切り替わって表示されることが分かります。
実際の動作はこちら
(スマホの人は長押し！)
これで立派なボタンが完成しました！
最終的なhtmlとcssがどうなってるのか不安な方はこちら
この通りに記述できていれば正しいです。
最終的なindex.htmlファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#">button</a>
</body>
</html>最終的なstyle.cssファイル
a {
padding: 10px 30px;
margin: 10px;
display: inline-block; /* marginが適用されるように */
border-radius: 30px;
background-color: #fff;
border: 2px solid red;
color: red;
font-weight: bold;
text-decoration: none;
}
a:hover {
background-color: red;
color: #fff;
transition: .4s;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
まとめ
ボタンを作るための説明はこれで以上になります。
ここまでの説明を簡単に以下にまとめてみました。
- htmlファイルを作成
- cssファイルを作成
- htmlファイルとcssファイルを紐づける
- htmlファイルにコードを記述
- cssファイルにコードを記述
- コードを記述する度ファイルを保存
- ブラウザを更新するとファイルの内容が反映される
ボタン以外でも、ウェブ上に何かコンテンツを作成したいときは大体同じ流れになります。
今作ったcssファイルの数値や色を変えてボタンの見た目を変更できるので、気になる方はやってみてください。
れいこんな風に自由にボタンの見た目をつくることができるよ！
私のモチベが続けば、パート2も検討したいと思います。
JavaScriptにも触れてみよう！
この記事が気に入ったら
フォローしてね！
コメント