HTML・CSS・JavaScriptで作ったサイトを仕上げる：動作確認・SEOの基本・公開手順
HTML・CSS・JavaScriptで作ったサイトの確認方法と静的公開の流れを解説。noindex・canonical・説明文、フォームの制約と拡張課題を整理します。
EXPLORE THE STACK
HTML・CSS開発ノート
HTMLの入門からCSSのスタイル変更・レイアウト・レスポンシブ対応、JavaScriptを使ったサイト制作まで。全10回の解説、動く見本、完成コードで順番に学べます。
HTMLから、動くWebサイトを作るまで
架空の学習会サイトを1つの題材に、HTMLの文書構造からCSSの色・余白・レイアウト、JavaScriptによる操作まで段階的に学ぶ全10回の連載です。
- 各回の完成コードと、ブラウザーで開ける見本
- 見出し・画像・フォームからレスポンシブなレイアウトへ
- メニュー・ダークモード・入力確認を実装して仕上げる
HTML → CSS → JavaScript、全10回の学習順
1つのサイトを少しずつ育てます。途中から学ぶ場合も、その回の完成コードをダウンロードできます。
記事一覧
10 ARTICLES
HTML・CSSとJavaScriptを連携する：メニュー・テーマ切り替え・入力確認を実装
HTMLとCSSにJavaScriptを連携。レスポンシブメニュー、ダークモード、保存失敗への対応、送信しない入力確認フォームを実装します。
CSS応用：カスタムプロパティ・部品設計・状態表現でスタイルを整理する
カスタムプロパティで配色を管理し、共通ボタン、フォーカス、無効状態、動きを減らす設定に対応。完成版CSSへ整理します。
レスポンシブCSS：スマートフォンからPCまで読みやすいサイトにする
モバイルを基準にメディアクエリーで列数を変更。viewport、clamp、文字拡大、横のはみ出しを確認し、レスポンシブなサイトへ育てます。
CSSレイアウト実践：FlexboxとGridでナビゲーションとカードを配置する
Flexboxでナビゲーション、Gridでカードを配置。gap、minmax、auto-fitを比較し、HTMLの読み順を保ったレイアウトを作ります。
CSSのボックスモデルと優先順位：余白・幅・継承を理解する
padding・border・margin、border-box、最大幅、継承・詳細度・記述順を学習。開発者ツールでCSSが効かない原因を切り分けます。
CSS入門：HTMLにスタイルシートを読み込み、文字と背景色を変更する
外部CSSの読み込みからセレクター・プロパティ・値、文字色・背景・行間まで。HTMLのどの要素にCSSが効くかを確かめます。
HTMLの画像とフォーム：パス・alt・labelを使って内容を充実させる
画像の相対パス、alt、幅と高さ、labelとinput、requiredを学び、CSSとJavaScriptの土台になるHTMLを完成させます。
HTMLの文書構造：見出し・リンク・セマンティック要素でページを組み立てる
h1〜h3、header・nav・main・footer、sectionとarticleを使い、紹介サイトの構造を作成。ページ内リンクとキーボード操作も確認します。
HTML入門：最初のindex.htmlを作り、ブラウザーで表示する
HTML・CSS・JavaScriptの役割を整理し、index.htmlを作ってブラウザーで表示。タグ、属性、headとbody、保存と再読み込み、文字化けの対策を学びます。