ハーマ先生
は～い！今日の講義を担当させていただくハーマ先生です！
ハーマ先生って誰やねんと思ったら記事の最下部に説明書いてあるから見てね～(投げやり)
世界一わかりやすい！～講義形式で学ぶサイト制作～:第10回
ハーマ先生
こんにちは、ウィーブ君！今日は静的サイトについて詳しく学んでいこう！まずは、静的サイトって何か分かるかな？
うーん、正直よく分からないけど、動かないウェブサイトってこと？
ウィーブ・ウェブ君
ハーマ先生
まぁ、ざっくり言えばそうだね。静的サイトは、あらかじめ作成されたHTMLファイルがそのままサーバーにアップロードされて、ユーザーがアクセスするとそのファイルが表示されるんだ。動的サイトとは違って、ユーザーが何か操作してもコンテンツが変わったりしない。今から使われる言語についても詳しく説明するね！
1. HTML：ウェブサイトの骨格
ハーマ先生
まずは基本中の基本、HTMLからだよ。HTMLは、ウェブページの骨格を作るマークアップ言語なんだ。
骨格っていうと、建物でいうと柱とか屋根の部分？
ウィーブ・ウェブ君
ハーマ先生
そうそう！HTMLでは、見出しや段落、画像、リンクなど、ページに表示される要素を配置するんだ。HTMLタグを使って、ブラウザに『この部分は見出し』『ここは画像』と指示を出しているんだよ。
なるほど、だからウェブページを構築するためには欠かせない言語なんだね。
ウィーブ・ウェブ君
例:
<!DOCTYPE html>
<html>
<head>
<title>ウィーブ君の静的サイト</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これはHTMLで作成した静的サイトです。</p>
</body>
</html>
ハーマ先生
これが基本のHTML。とてもシンプルだけど、これでウェブページをブラウザに表示できるんだ！
→HTMLの詳細はこちら(第11回)
2. CSS：ウェブサイトのデザイン
でも先生、ページがちょっと味気ないね。もっとおしゃれにできないの？
ウィーブ・ウェブ君
ハーマ先生
そこで登場するのがCSSだよ！CSSは、HTMLの要素にデザインを適用するための言語。色、フォント、レイアウトなどを調整して、ページを見た目よくカスタマイズするんだ。
なるほど、CSSはウェブサイトに服を着せる感じだね！
ウィーブ・ウェブ君
ハーマ先生
その通り！HTMLが骨格なら、CSSはその上にデザインを施すための要素だよ。背景の色を変えたり、テキストのサイズを変えたり、ページ全体のレイアウトを調整したりできるんだ。
例:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
これで見た目がすっきりして、ページがもっと魅力的に見えるんだね！
ウィーブ・ウェブ君
→cssの詳細についてはこちら(第12回)
3. JavaScript：ウェブサイトのインタラクション
ウィーブ君: 「静的サイトっていうから、全部固まったままかと思ってたけど、少し動きをつけたいなあ。ユーザーがボタンを押したら何かが起こるようにしたりできない？」
静的サイトっていうから、全部固まったままかと思ってたけど、少し動きをつけたいなあ。ユーザーがボタンを押したら何かが起こるようにしたりできない？
ウィーブ・ウェブ君
ハーマ先生
もちろんできるよ！JavaScriptを使えば、ウェブページに動的な動作を追加できるんだ。例えば、ボタンをクリックしたときにポップアップを表示したり、スライドショーを作ったりすることができるんだ。
それって面白そう！でも、JavaScriptって難しいの？
ウィーブ・ウェブ君
ハーマ先生
初めはちょっと難しいけど、慣れるといろいろなインタラクションを実現できるから、とっても便利だよ。
例:
document.getElementById('button').onclick = function() {
alert('ボタンがクリックされました！');
};
わぁ、これでウェブページに動きが出るんだね！やっぱり静的なサイトでも動きがあると楽しいね！
ウィーブ・ウェブ君
→JSの詳細についてはこちら(第13回)
4. Markdown：シンプルなコンテンツ作成ツール
でも先生、HTMLって全部手動で書くのはちょっと大変だよね。もっと簡単にページを作成する方法はないかな？
ウィーブ・ウェブ君
ハーマ先生
それならMarkdownを使うのも手だよ！Markdownは、HTMLみたいにタグを使わず、もっとシンプルにテキストを整形できるんだ。特に、静的サイトジェネレーターと一緒に使うことが多いよ。
へぇ、シンプルに書けるのは良いね！HTMLよりも楽そう。
ウィーブ・ウェブ君
ハーマ先生
Markdownで文章を書けば、それをHTMLに変換して静的ページにできるんだ。だからブログやシンプルなページにはぴったりだよ！
例:
# ウィーブ君のブログへようこそ！
これはMarkdownで書かれたウェブページです。
5. 静的サイトジェネレーターの活用
でも、たくさんのページを作るのは大変だよね？もっと効率よくページを作る方法はないの？
ウィーブ・ウェブ君
ハーマ先生
それなら**静的サイトジェネレーター（SSG）**を使うといいよ！JekyllやHugo、Next.jsみたいなツールを使うと、Markdownやテンプレートを使って簡単に複数のページを生成できるんだ。
Jekyll
- 特徴: Rubyベースで、GitHub Pagesと連携が強い。個人ブログや小規模サイトに最適。
- 強み: Markdownで簡単に記事を書いて自動で静的HTMLに変換できる。
- 使用例: ブログやシンプルなポートフォリオサイト。
Hugo
- 特徴: Go言語ベースで、非常に高速なビルドが可能。大規模なブログに適している。
- 強み: 大量のコンテンツがあっても、ビルド速度が速い。
- 使用例: 大規模ブログやドキュメンテーションサイト。
へぇ、静的サイトジェネレーターを使えば、たくさんのページを効率よく作れるんだね！
ウィーブ・ウェブ君
6. 静的サイトのメリットとデメリット
静的サイトにはメリットが多そうだけど、デメリットはあるの？
ウィーブ・ウェブ君
ハーマ先生
もちろんあるよ。まずはメリットから説明するね。
メリット
- 速い読み込み速度: データベースやサーバーサイドの処理がないから、ページの読み込みがとても速い。
- セキュリティが高い: データベースがないので、ハッキングリスクが低い。
- コストが安い: 静的ファイルだけなので、安価なホスティングサービスでも運営できる。
デメリット
- 動的な機能が難しい: ユーザーごとのカスタマイズやフォームの送信など、動的な機能は外部サービスを使わないと難しい。
- コンテンツの更新が面倒: 内容を変更するたびに手動で編集して、再度アップロードする必要がある。
うーん、静的サイトはシンプルで速いけど、動的なサイトには向いていないんだね！
ウィーブ・ウェブ君
ハーマ先生
今日の内容をまとめると、静的サイトは読み込みが速く、セキュリティも高いという大きなメリットがあるけど、動的な機能には向いていないというデメリットもあるんだ。HTMLやCSS、JavaScriptを使って、しっかり構築すれば、シンプルで軽量なウェブサイトが作れるよ！
うん、よくわかった！静的サイトはシンプルだけど、しっかりとした知識があれば十分活用できそうだね。特に、JekyllやHugoみたいなツールを使えば、更新も楽になりそうだし。
ウィーブ・ウェブ君
ハーマ先生
そうだね！静的サイトは小規模なウェブサイトやポートフォリオにぴったりだし、ブログやドキュメンテーションサイトでも活躍できるよ。まずは、簡単なHTMLとCSSで基本をマスターしてから、静的サイトジェネレーターに挑戦してみるといいよ！
ありがとう、ハーマ先生！これで静的サイトのことがよく理解できたし、自分でサイトを作る第一歩を踏み出せそう！
ウィーブ・ウェブ君
おすすめリソースと次に学ぶべきこと
ハーマ先生
次に学ぶべきこととしては、SEO対策やレスポンシブデザインだね。静的サイトは、読み込み速度が速いからSEOにも効果的だよ。さらに、スマホやタブレットでも快適に表示できるように、レスポンシブデザインも学んでおこう！
- SEO対策: 検索エンジンで上位表示させるために、HTMLのタグやメタデータ、ページの構造を最適化することが重要だよ。
- レスポンシブデザイン: スマホやタブレットでも見やすいように、CSSでページのデザインを柔軟に変更する技術だよ。メディアクエリを使って、デバイスに応じたレイアウトを作成しよう。
まとめ
じゃあ、次はSEOとレスポンシブデザインの勉強に進めばいいんだね！
ウィーブ・ウェブ君
ハーマ先生
その通り！静的サイトは基本を押さえれば誰でも作れるけど、少しずつ機能を追加して、検索エンジンに強いサイトを作ることもできるよ。時間をかけてじっくりと自分のスキルを磨いていこう！
これで、静的サイトの基本から主要な言語、さらには次のステップまで、しっかりと学べる準備が整いました。これから自分のウェブサイトを作成する際の参考にしてみてください！
→SEOの具体的な対策案はこちら（第6回part1） (第28回part2)
コメント