WEB制作 なぜWebサイトに「動き」が必要なのか？
Webサイトの魅力は、ただ情報が並んでいるだけではありません。ユーザーがボタンにマウスを合わせると色が変わったり、新しいコンテンツが画面に滑らかに表示されたりするような、視覚的なフィードバックが、ユーザー体験を豊かにします。この「動き」を生...
基礎
WEB制作 
WEB制作 Webサイトの「設計図」を描こう！
**CSS Grid（グリッド）です。Gridは、Webサイトの全体的なレイアウトを縦横の格子（グリッド）**で定義するのに最適な方法です。まるで建築家が家の設計図を描くように、あらかじめWebページの配置を決めることができます。
WEB制作 Webサイトの「配置」を思い通りに操る！
Webページの配置を自由自在に操るためのCSSの力が登場します。今回は、特に重要で現代のWeb制作に欠かせない**「Flexbox（フレックスボックス）」**というレイアウト方法について、初心者の方でもすぐに使えるように、その基本的な考え方と使い方を解説します。
WEB制作 CSSの「誰に？」を正確に指定する
前回の記事で、CSSがWebサイトを装飾する魔法だと学びましたね。その魔法をかけるとき、「どの部分に魔法をかけるか？」を正確に指定する必要があります。
この「誰に？」を指定する役割を担うのが、セレクタです
WEB制作 関数を組み合わせて、小さな「Webアプリ」を作ろう！
JavaScriptの関数は、特定の仕事をまとめておく便利な「道具箱」だと学びましたね。今回は、この関数を組み合わせて、より実践的なWebページ、まるで小さなWebアプリのようなものを作ってみましょう。
WEB制作 JavaScriptの「道具箱」を整理しよう！
JavaScriptのイベントリスナーを使ってWebサイトに動きをつける方法を学びましたね。あの時、function() { ... }というカタチでコードをまとめました。これが**「関数」**です。
関数は、特定の仕事をまとめておくための「道具箱」のようなものです。同じ作業を何度も書く手間を省き、コードを整理整頓するのに役立ちます。
WEB制作 Webサイトの「観察者」を雇おう！
まるでWebサイトに「観察者」を雇うように、特定の出来事（イベント）が起こるのをじっと待ち、それが起こったら決まった行動をさせる。これがイベントリスナーの役割です。
今回は、このイベントリスナーを使って、Webサイトにさらに面白い動きをつけてみましょう。
WEB制作 JavaScriptを「動かす」方法を学ぼう！
JavaScriptの基本的な「ことば」（文法）を学びました。しかし、覚えた文法をどこに書けば、Webサイトが動くようになるのでしょうか？
今回は、HTMLとCSSで作ったWebサイトに、JavaScriptを組み込んで実際に動かす方法を、簡単な例を交えながら学んでいきましょう。
WEB制作 JavaScriptの「ことば」を理解しよう
JavaScriptがWebサイトに「動き」をつける魔法だと学びましたね。今回は、その魔法の呪文、つまりJavaScriptの基本的な「ことば」（文法）を一緒に見ていきましょう。
WEB制作 Webサイトに命を吹き込む「CSS」の魔法
前回の記事で、HTMLタグを使ってWebサイトの「骨組み」を作る方法を学びましたね。でも、HTMLだけのWebサイトは、まるでモノクロのスケッチのようで、ちょっと物足りないかもしれません。 そこで登場するのが、**CSS（Cascading...