第7回 授業ページ

今回の授業の内容
Step1. ボタンを作成する。
Step2. ボタンの形を変更する。
Step3. ボタンのサンプルを使用する。

●Step1. ボタンを作成する。

CSSを使えばリンクをボタンに変更することが出来ます。
まずはシンプルなボタンを作成しましょう。


１．「CSS教育_202○」フォルダーの中で右クリックする
２．「新規作成（X)」→「テキスト ドキュメント」をクリック
３．テキストのファイル名（新しいテキスト ドキュメント.txt）をクリック
４．「lesson07.html」を入力して「Enter」キーを押す。
５．作成したテキストを右クリックして、「プログラムから開く(H)」→「メモ帳」をクリックする
６．下の内容をテキストにコピーして貼り付ける。
７．テキストを閉じる。
８．「保存する(S)」をクリック
９．作成したテキストをダブルクリックしてブラウザで表示する。
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<style type="text/css">

.btn1 {
  padding: 10px 30px;
  text-decoration: none;
  width: 200px;
  height: 30px;
  color: black;
  background-color: lightgreen;
  border-radius: 0px;
}

</style>
</head>
<body>

<a href="http://chibahakkyo.net/index.htm" class="btn1">緑色で四角いボタン</a>

</body>
</html>



●Step2. ボタンの形を変更する。

ボタンのパラメータを変更することでボタンの形を変えることが出来ます。
次は青くて丸いボタンを作成してみましょう。


１．「lesson07.html」を右クリックして、「プログラムから開く(H)」→「メモ帳」をクリックする
２．下の赤い文字の部分をコピーして貼り付ける。
３．テキストを閉じる。
４．「保存する(S)」をクリック
５．作成したテキストをダブルクリックしてブラウザで表示する。
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<style type="text/css">


.btn1 {
  padding: 10px 30px;
  text-decoration: none;
  width: 200px;
  height: 30px;
  color: black;
  background-color: lightgreen;
  border-radius: 0px;
}

.btn2 {
  padding: 10px 30px;
  text-decoration: none;
  width: 300px;
  height: 50px;
  color: black;
  background-color: lightblue;
  border-radius: 20px;
}

</style>
</head>
<body>

<a href="http://chibahakkyo.net/index.htm" class="btn1">緑色で四角いボタン</a>
<br><br><br>
<a href="https://ameblo.jp/chibahakkyo70/" class="btn2">青色で丸いボタン</a>

</body>
</html>


「.btn1」で設定したパラメータは「class="btn1"」のボタンの形を変更します。
「.btn2」で設定したパラメータは「class="btn2"」のボタンの形を変更します。

それぞれのパラメータを変更してオリジナルのボタンを作成してみましょう。
width: 200px;　　　←ボタンの横幅を変更します。
height: 30px;　　　←ボタンの縦幅を変更します。
color: black;　　　←ボタンの文字の色を変更します。
background-color: lightgreen;　　　←ボタンの背景の色を変更します。
border-radius: 0px;　　　←ボタンの丸みを変更します。0に近いほど四角くなります。

●Step3. ボタンのサンプルを使用する。

ボタンのデザインを掲載したサイト「cssbuttons.app」から好きなボタンを探してみてください。
サイト内のボタンを押すと、そのボタンを作るためのhtmlとcssが表示されます。
コピーして使ってみましょう。




前のページに戻る