皆さんこんにちは! 未来のかたち四ツ橋校です!
Webサイトを見ていると、「詳しく見る」「お問い合わせ」「購入する」など、いろいろなボタンがありますよね。
普段何気なくクリックしているこれらのボタンですが、「どうやって作っているんだろう?」と考えたことはありますか?
実は、Webサイトのボタンも、HTMLやCSSなどを使って作ることができます!
HTMLは、Webサイトの「骨組み」を作る役割があります。
例えば、「これはボタンです」「ここには文字を表示します」といった、Webページの基本的な構造を作ります。
そしてCSSを使うと、ボタンの色や大きさ、文字のサイズ、角の丸みなどを変えることができます。
例えば、同じ「お問い合わせ」という文字でも、文字だけで表示するのと、青い背景に白い文字のボタンにするのとでは、印象が大きく違いますよね。
さらに、マウスをボタンの上に置いたときに色が変わったり、クリックしたときに別のページへ移動したりする仕組みを加えることもできます!
このように、普段使っているWebサイトには、実はたくさんの工夫が詰まっています!
Web制作の面白いところは、自分でコードを書いたものが、実際にWebブラウザ上で形になって見えることです。
最初は「コードって難しそう……」と思うかもしれません。
でも、まずは文字を表示してみたり、色を変えてみたり、ボタンを作ってみたりと、小さなところから始めることができます。
「このボタン、自分でも作れるのかな?」というちょっとした興味が、Web制作を始めるきっかけになるかもしれません!
普段何気なく使っているWebサイトも、少し視点を変えて見てみると、「どうやって作っているんだろう?」という発見がたくさんあります!
気になるボタンを見つけたら、ぜひその仕組みにも注目してみてください!










