Web制作 (HTML/CSS)

【図解】Flexbox完全ガイド:これだけでレイアウトに困らない(初学者向け備忘録)

CSSのFlexbox(フレックスボックス)を初学者向けに図解。中央揃えや横並び、検証ツールの使い方も解説!レイアウトに迷わないための保存版備忘録です。
Web制作 (HTML/CSS)

脱・div職人!SEOに劇的に効く「セマンティックHTML」の書き方

Webサイトを作っていると、ついつい何でも <div> タグで囲んでしまいたくなりますよね。これをプロの世界では親しみを込めて(?)「div職人」と呼んだりします。しかし、SEO(検索順位を上げること)を意識するなら、脱・div職人が必須で...
Web制作 (HTML/CSS)

【図解】マージンとパディングの正体|余白を制する者はデザインを制す(初学者向け備忘録)

CSSで最も大切な「余白(margin/padding)」の使い分けを徹底解説。図解による違いの解説、ショートハンドの書き方、中央揃えのコツ、初心者がハマる「マージンの相殺」まで網羅。デザインの違和感を解消し、プロっぽいレイアウトを作るための保存版ガイドです。
Web制作 (HTML/CSS)

【図解】HTMLの要素・属性・値の違いとは?用語のキホンを世界一わかりやすく解説

HTMLを勉強していると必ず出てくる「要素」「属性」「値」という言葉。「これって結局どこのこと?」と混乱していませんか?実はこれ、私たちの身近な**「持ち物」や「SNSのプロフィール」**に例えると一瞬で理解できます。この記事を読めば、もう...
Web制作 (HTML/CSS)

【実務レベル】HTML主要タグ30選|辞書代わりに使える「使い分け」完全ガイド

「タグの種類が多すぎて、どれを使えばいいか迷う」 「divタグばかり使ってしまうけれど、もっと適切なタグがあるはず…」HTMLには数百種類のタグがありますが、実務で頻繁に使うのはそのうちの30個ほどです。この記事では、それらをカテゴリー別に...
開発環境・ツール

【神ツール】Chrome検証ツール(DevTools)基本操作ガイド|初心者のためのデバッグ備忘録

Web制作の必須ツール「Chrome検証ツール(DevTools)」の基本を初学者向けに徹底解説!HTML/CSSをリアルタイムで編集してデザインを試す方法や、スマホ表示の確認、エラーの原因特定まで。デザインが崩れた時に役立つ「デバッグ術」を凝縮した保存版の備忘録です。
開発環境・ツール

【完全図解】VS Code 導入・初期設定ガイド(初学者向け備忘録)

VS Codeのインストールから日本語化、Web制作に必須の初期設定までを初心者向けに徹底解説!「まずはコードを書き始めたい」という方のための導入備忘録です。爆速でHTMLが書けるEmmetや、リアルタイムで表示確認できるLive Serverの使い方も紹介します。
WordPress

【完全保存版】超初心者向けWordPressブログ開設・全手順ロードマップ

【初心者必見】WordPressでのブログの始め方を、ドメイン・サーバー取得から初期設定まで1万文字超の圧倒的ボリュームで徹底解説!エックスサーバーの「クイックスタート」を使えば、知識ゼロでも最短10分で開設可能です。この記事を読みながら進めるだけで、今日からあなたもブロガーになれます。
Web制作 (HTML/CSS)

【保存版】CSSデザイン・レイアウト完全ガイド(初学者向け備忘録)

Web制作に必須のCSS知識を凝縮。基本文法、レスポンシブ対応(メディアクエリ)、要素の中央揃えなど、実務で頻出のプロパティをコード例付きでまとめています。「これどう書くんだっけ?」を即解決したい方のためのデザイン備忘録です。
Web制作 (HTML/CSS)

【保存版】HTML基本構造・タグ完全ガイド|Web制作の土台をマスターする備忘録

HTMLの基本を初心者向けにわかりやすく解説!タグの意味や使い方、基本構造のテンプレートまで、「Webの仕組み」が理解できる備忘録です。コードの書き方に迷ったとき、いつでも見返せる保存版としてご活用ください。TN Sandboxの制作備忘録第1弾。