HTML

🚀 はじめに この記事でわかること フロントエンドとバックエンドの違いが、専門用語なしで理解できる Webサイトやアプリがどうやって動いているのかの全体像がつかめる 「自分はどっちを学ぶべき？」のヒントが得られる ✅ 概要解説 フロントエンドとは何か あなたが画面で“見て触れる部分”を作る仕事です。 例： Webサイトのデザイン ボタンを押したら動くアニメーション スマホで見たときにレイアウトが変わる仕組み 使われる技術：HTML / CSS / JavaScript など イメージとしては、 「お店の内装・メニュー・接客」 を作る人。 お客さん（ユーザー）が直接触れる部分を整えます。 バックエンドとは何か 画面の裏側でデータを処理し、アプリを動かす“頭脳”を作る仕事です。 例： ログイン情報の管理 データベースに保存・読み込み 注文処理や計算 セキュリティやアクセス制御 使われる技術：Python / PHP / Ruby / Java / Node.js / データベース など イメージとしては、 「厨房・倉庫・レジの仕組み」 を作る人。 お客さんには見えないけれど、お店が動くために絶対必要な部分です。 フロントエンドとバックエンドがないとどうなる？ フロントエンドがない → 画面が真っ白で何も操作できない バックエンドがない → ログインも注文も保存もできない“飾りだけのサイト”になる どちらか片方だけでは、 「見えるけど動かない」「動くけど見えない」 という状態になってしまいます。 どんな場面で使われる？ ブログや企業サイト フロント：ページの見た目 バック：記事データの保存・管理 ネットショップ フロント：商品一覧、カート画面 バック：在庫管理、注文処理、決済 SNS フロント：投稿画面、タイムライン バック：投稿データの保存、通知処理 Webサービスは、フロントエンドとバックエンドが協力して動く“チームプレー” で成り立っています。 💡 小話・豆知識・逸話 1) フロントエンドは“昔よりずっと難しくなった” 昔のWebは「HTMLを書くだけ」で成立していました。 しかし今は、アニメーション・アプリのような動き・スマホ対応など、 フロントエンドはミニアプリ開発レベルの高度な仕事になっています。 ...

🚀 はじめに この記事でわかること ChromeなどのWebブラウザの中で何が起きているか ページが表示されるまでの流れ（レンダリング） JavaScript・HTML・CSSがどんな役割をしているか 「ブラウザって結局なに？」が具体的なイメージで理解できる ✅ 概要解説 ブラウザとは何か？ 一言でいうと、インターネットの情報を“見える形”に変えてくれるアプリです。 Chrome、Safari、Edge、Firefoxなどが有名ですね。 ブラウザは、Webサイトのデータ（HTML・CSS・JavaScript）を受け取り、 人間が読めるページに変換する“翻訳者”のような存在です。 何のためにあるのか？ ブラウザは、次のような役割を持っています。 Webページを表示する（レンダリング） 画像や動画を読み込む JavaScriptを実行して動きをつける 安全に通信する（HTTPS） タブごとに処理を分けて安定させる もしブラウザがなかったら、私たちはWebサイトのデータを ただの文字列の塊としてしか見られません。 ブラウザがないとどうなる？ Webページが文字の羅列にしか見えない ボタンやフォームが動かない 画像や動画が表示されない セキュリティが弱く、危険な通信になりやすい つまり、ブラウザはインターネットを使うための必須アプリなんです。 Chromeの中で何が起きている？（ざっくり流れ） Webページを開くと、Chromeの中では次のような処理が行われます。 URLを入力 → 「どこのサーバーにアクセスする？」をDNSで調べる サーバーからHTMLを受け取る → ページの“設計図”が届く HTMLを読みながらCSSを読み込む → 見た目の情報（色・配置・フォントなど）を取得 JavaScriptを実行 → ボタンの動きやアニメーションなどを処理 画面に描画（レンダリング） → 設計図＋見た目＋動きを組み合わせて表示 たとえるなら、 HTML＝骨組み、CSS＝服や装飾、JavaScript＝動きや仕掛け これらをブラウザが組み立てて、私たちの画面に表示してくれます。 💡 小話・豆知識・逸話 1) Chromeは「タブごとに別の部屋」で動いている Chromeはタブごとにプロセス（部屋）を分ける設計です。 これにより、1つのタブが固まっても他のタブに影響しにくい仕組みになっています。 2) ブラウザは“絵を描く職人”でもある ページを表示する「レンダリング」は、 画家がキャンバスに絵を描くような作業です。 しかも、スクロールするたびに高速で描き直しているという職人芸。 3) JavaScriptエンジン「V8」は超高速 Chromeの中には「V8」というJavaScriptエンジンが入っています。 これは自動車のV8エンジンのように速いという意味で名付けられました。 4) ブラウザは“安全の番人”でもある 怪しいサイトにアクセスすると警告が出ますよね。 これはブラウザが危険な通信や証明書の異常を検知してくれているからです。 5) ブラウザは毎日アップデートされている Chromeは数週間ごとに新バージョンが出ています。 セキュリティ強化や高速化のため、裏側では常に改善が続いています。 ...

🚀 はじめに この記事でわかること 静的サイトとは何か（HTMLファイルをそのまま配信する仕組み） なぜ速くて安全なのか（サーバー処理が不要） 動的サイトとの違い（WordPressなどとの比較イメージ） どんな場面で役立つのか（ブログ・ポートフォリオ・企業サイトなど） Hugo × Cloudflare Pages との相性が良い理由 こんな人向け 中学生〜大人まで、IT知識がほとんどない初心者 「静的サイトって聞くけど、何が“静的”なの？」と疑問に思っている人 Webサイトの仕組みをやさしく理解したい人 初心者でも安心な理由 専門用語はできるだけ身近なたとえで説明 このページだけで全体像がつかめる構成 Hugo や Cloudflare Pages を使う人にも役立つ内容 ✅ 概要解説 静的サイトとは何か あらかじめ作っておいた“完成済みのページ”を、そのまま配るサイトのことです。 Webサイトには大きく分けて2種類あります。 種類 仕組み 例 静的サイト 事前に作った HTML ファイルをそのまま配信 企業サイト、ブログ、ポートフォリオ 動的サイト アクセスのたびにサーバーがページを生成 WordPress、SNS、ECサイト 静的サイトは、完成したファイル（HTML/CSS/JS）を置いておくだけで動きます。 サーバー側で計算したり、データベースを読んだりする必要がありません。 何のためにあるのか 静的サイトは、次のようなメリットを得るために使われます。 とにかく速い → サーバー処理がないので、読み込みが早い 安全性が高い → データベースがないので攻撃されにくい 壊れにくい → “ただのファイル”なので障害が起きにくい 運用が簡単 → 更新はファイルを置き換えるだけ 特に Hugo のような静的サイトジェネレーターを使うと、Markdown から自動で HTML を生成できるため、初心者でも扱いやすくなります。 静的サイトジェネレーターがないとどうなるのか もし静的サイトジェネレーターがなかったら… すべてのページを手作業で作る必要がある → 100ページあれば100個の HTML を管理することに 更新が大変 → 共通部分（ヘッダー・フッター）を全部書き換える必要 高速配信が難しい → 動的処理が増えるほど、読み込みが遅くなる 静的サイトジェネレーターは、これらの課題を自動化してくれる便利な仕組みです。 ...