こばゆた
こんにちは！
このシリーズでは、完全初心者でもWebサイトが作れるようになるためのステップを丁寧に解説していきます。
第1章では、「Web制作ってそもそも何なの？」「どういう順番で学べばいいの？」といった、スタートラインに立つための知識を整理していきましょう。
今日のテーマ
- Web制作の基本とできることがわかる
- Web制作に必要なものがわかる
目次
1.Web制作でできること
Web制作を学ぶと、次のようなことが自分の力でできるようになります！
- お店やサービスの紹介サイトを自分で作れる
- WordPressを使えば自分だけのブログも簡単に始められれる
- SNSのようなアプリや、予約・チャットなどの機能（ちょっと上級）
副業や転職を考えている方にとっても、Web制作はスキルとしてとても強力です。
2.フロントエンドとバックエンドの違い
Web制作は大きくわけて2つの役割に分かれます。
| 名前 | 内容 | 例 | 使う言語・技術 |
|---|---|---|---|
| フロントエンド | ユーザーに見える部分（デザイン・動き） | サイトのデザイン、ボタン、メニューなど | HTML / CSS / JavaScript |
| バックエンド | サーバーやデータベースまわり | 会員登録、データ保存、メール送信など | PHP / Python / Ruby / SQL など |
初心者の方はまず「フロントエンド」から始めるのがおすすめです！
HTML・CSS・JavaScript を使えば、自分のWebページをすぐに作って見せることができます。
3.HTML・CSS・JavaScriptの役割とは？
これら3つは、Web制作の基礎三本柱です。それぞれ役割があります。
| 技術 | 何をするもの？ | 例 |
|---|---|---|
| HTML | ページの骨組み（構造）を作る | 見出し・文章・画像の配置など |
| CSS | ページの見た目（デザイン）を整える | 色、フォント、レイアウトなど |
| JavaScript | ページに動きをつける（動作） | メニューの開閉、ボタンの反応など |
↑クリックするとメッセージが表示されます
- HTML：ボタンの存在そのもの
- CSS：ボタンの色や大きさ
- JavaScript：クリックしたときの動き
このように、3つを組み合わせることで魅力的なWebページが作れます。
4.Web制作を始めるために必要な道具
最初に揃える道具は、たったの2つだけ！
4-1.コードを書くソフト（エディタ）：Visual Studio Code（VS Code）
- 無料・軽量・日本語対応
- 拡張機能が豊富で初心者にも使いやすい
- 公式サイトはこちら
4-2.Webページを見るブラウザ：Google Chrome
- 開発者ツール（DevTools）という便利な機能付き
- 多くのWeb開発者が使っている標準的なブラウザ
- ダウンロードはこちら
この2つをインストールすれば、もうWeb制作の準備は完了です！
これらの詳細はコチラの記事にもあります
5.まとめ
まとめ
- Web制作を学べば、サイトやアプリを自分で作れる！
- 初心者は「フロントエンド（HTML/CSS/JS）」から始めるのがおすすめ
- 必要な道具はVSCode と Chromeだけですべて無料でそろう！
6.次回の内容：HTMLの基本構造とは？
次回はいよいよ Webページの「骨組み」を作るHTML を学びます！
「タグ」って何？ どうやってブラウザに表示されるの？を一緒に見ていきましょう。
[第2章：HTMLの基本構造を学ぼう（準備中）]
コメント