はじめに
こんにちは。Qiita株式会社で主にQiita Zineの記事制作を担当しています。非エンジニアです。記事やサイトは見るのも作るのも好きで、そこからHTMLやCSSに興味を持って調べるなどして、少し勉強しています。
ボタンを作ってもらう
さて今回は、サイトを見ていると大抵ある遷移ボタンのデザインがどのような仕組みでできているのかを調べます。Chat GPT先生にコードを教えてもらって、そのコードをいじって、仕組みを知るという流れ。
HTMLのコードを教えてもらう
私「シンプルでかっこいい遷移ボタンを教えて」
Chat GPT「どうぞ」
<html>
<head>
<style>
/* スタイルの設定 */
.transition-button {
display: inline-block;
padding: 10px 20px;
background-color: #000;
color: #fff;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.transition-button:hover {
background-color: #333;
}
</style>
</head>
<body>
<!-- ボタンの表示 -->
<a href="遷移先のURL" class="transition-button">遷移する</a>
</body>
</html>
どのような見た目か表示させる
シミュレーションサイトで上のコードを入力し、どのような見た目になるか教えてもらいます。こちら。
指定した「シンプルでかっこいい」、なかなか的を射ていますね。もう完成で良いやと思ってしまいますが、それでは勉強にならないので変更してみます。
コードを見てみる
（雑談）
少し話が逸れますが、これまで記事を作るときはすでにあるコードの中身を変更しながらだったので、指定している内容は分かるけれど大枠はなんとなくしか分からないです。例えば上のコードも、 <style>タグの中にCSSで見るコードを入れているのはなぜ、って。こちらはのちのち勉強します。
display って何
さっそく何を意味するのか分からないプロパティが。displayて何。調べてみるとCSSで使われるプロパティの1つで、大まかに言うと要素の表示形式を決めるものだそう。（参考：サルワカ）
で、今回の値はinline-block。これも調べると、まずblockとinlineという値があって、それらが組み合わさっているような内容ですね。「横に並べるボタンないからblockだけでも良いんじゃないの？」と思ったので、inline-blockをblockに変更してみます。するとこうなった。
超横長、これはダメだ。inline-blockに戻します。
padding
続いてはpadding。これは分かるぞ、上下左右の「何か」を変更するプロパティだ。けれどどこが変わるのかは分からない。上下の余白かな、そしたら今回変更しても分からないんじゃ...？と思いつつも、変更してみます。違いが分かりやすいように大袈裟に。
10px 20pxを50px 20pxに。
なるほど、ボタンの上下幅を指定していたのか。ということは20pxを変更したら、横幅が変わるということ。実際変更したらその通りでしたので、見た目は割愛。
色の指定
色指定の仕組みは理解していますのでまとめて。
background-colorは背景色を、colorは文字色を指定するもの。せっかくなので変更します。色コードを紹介してくれているサイトへ行き、「どれが良いかな...もうすぐ夏じゃん、海へ行きたい」と思ったので、海っぽい色をチョイス。
darkturquoise#00ced1にしました。ついでにテキストも変更。
海を見たくなりました。
前編おわり
長くなるので前編後編に分けます。後編書いたらリンク貼ります。