Webサイトデザインと制作の教科書
「見てわかる」「作れるようになる」をテーマに、Webサイト制作の基礎から応用、デザイン思考、最新技術までを網羅的に解説する、初心者から中級者向けの体系的なラーニングプラットフォーム。
アイデアを形にするHTML/CSS入門
-
1-1_Web制作の旅へ！アイデアをカタチにする最初のステップ
Webクリエイターとは、単にコードを書く人ではなく、アイデアや課題解決のソリューションをデジタル空間に具現化す…
-
1-2_Webの仕組み：コードとブラウザの協働作業
私たちが目にするWebサイトは、ブラウザ（Google Chrome, Safariなど）がコードという設計図…
-
1-3_Web制作の最強コンビ：HTMLとCSSの役割分担
Webサイト制作の根幹をなすのが、この2つの言語です。 技術名 役割 例え HTML 構造の定義：コンテンツ（…
-
2-1_HTMLの基本構文
タグと要素の基本 HTMLはすべてタグと呼ばれる記号で記述されます。タグはコンテンツに意味を持たせる役割を果た…
-
2-2_テキスト情報を構造化する
見出し（<h1>〜<h6>）と段落（<p>） 文章構造を明確にするための基本タグです。<…
-
2-3_画像とリンクの扱い
2.3.1. 画像の表示（<img>） 画像を表示する**<img>タグ**は、終了タ…
-
2-4_Web構造を明確にするセマンティックタグ
現代のWebサイトでは、コンテンツの役割をタグ名で示すセマンティック（意味論的）タグの使用が強く推奨されます。…
-
3-1_CSSの基本構造と適用方法
CSSはHTMLに対してデザインの指示を与えます。 3.1.1. CSSの基本構文 CSSの命令は、セレクタ、…
-
3-2_空間を制御する：ボックスモデルの理解
すべてのHTML要素は、矩形の箱（ボックス）として扱われています。この箱の構造を定義するのがボックスモデルです…
-
3-3_現代のレイアウト技術：Flexboxの基礎
Flexboxは、Webサイトの部品を柔軟に配置するための強力なCSS機能です。特に横方向の要素の整列や中央寄…
-
4-1_必須スキル：レスポンシブデザイン
Webサイトをスマートフォンやタブレットなど、あらゆる画面サイズに最適化する手法がレスポンシブデザインです。 …
-
4-2_次の扉：動きを学ぶJavaScriptへのロードマップ
HTMLとCSSの基礎を固めたあなたは、見た目と構造が整ったWebサイトを作成できる段階に到達しました。 次の…
WordPress入門
-
WebとWordPress マニュアル一覧（初心者向け）
ご案内：このマニュアルの読み進め方 ようこそ、Webサイト制作の世界へ！ このマニュアル一覧は、「Webサイト…
-
1-1. インターネットとWebサイトの基本構造
🎯 このマニュアルで学ぶこと Webサイトを作るには、まず**「Webサイトがどうやってインタ…
-
1-2. Webサイトの見た目の仕組み（HTMLとCSS）
🎯 このマニュアルで学ぶこと Webサイトのデータの中身は、主に「HTML」と「CSS」という…
-
1-3. Webデザインの「良い」「悪い」判断基準
🎯 このマニュアルで学ぶこと 「Webサイトのデザイン」と聞くと、色や形といった**「見た目の…
-
2-1. 【実践】サーバーとドメインを準備する簡単ガイド
🎯 このマニュアルで学ぶこと Webサイトを公開するために必須の「サーバー」と「ドメイン」は、…
-
2-2. 5分でできる！WordPressをインストールする方法
🎯 このマニュアルで学ぶこと サーバーとドメインの準備が整ったら、いよいよWebサイトの中身で…
-
2-3. 最初にやっておくべき初期設定と「テーマ」の選び方
🎯 このマニュアルで学ぶこと WordPressのインストールが終わったら、Webサイトの「骨…
-
3-1. ブログ記事（投稿）の書き方と公開方法
🎯 このマニュアルで学ぶこと WordPressには、「投稿」と「固定ページ」という2種類のペ…
-
3-2. 会社の情報ページ（固定ページ）の作り方と役割
🎯 このマニュアルで学ぶこと 前回の「投稿」は日々更新する情報に使いますが、今回は**「会社概…
-
3-3. サイトの機能を増やす「プラグイン」の使い方
🎯 このマニュアルで学ぶこと 「プラグイン」とは、WordPressの基本的な機能にはない、新…
-
3-4. 【超基本】SEOって何？（検索エンジン対策の第一歩）
🎯 このマニュアルで学ぶこと Webサイトを立ち上げ、記事を公開したら、次は多くの人に見てもら…
ポートフォリオサイトの作り方
-
ポートフォリオサイト（実績）の作り方（基本編）
🎯 このマニュアルで学ぶこと ポートフォリオサイトは、あなたの実績を公開し、クライアントに信頼…
-
📌 付録：プロが実践するポートフォリオ制作詳細ガイド
ポートフォリオサイトを「仕事の獲得ツール」にするために このガイドは、マニュアル「3-5. ポートフォリオサイ…
-
ポートフォリオサイト（実績）の作り方（実践編）
🎯 このマニュアルで学ぶこと この「実践編」では、基本編（3-5）で作成したシンプルなポートフ…
Web Tips
-
【効率重視】WordPress「フルサイト編集」はパターン活用で手軽にスタート！
はじめに：サイト構築は「作る」から「組み合わせる」時代へ 「WordPressが大きく変わったらしい」「フルサ…
-
【入門編】ヘッダーもフッターもブロックで編集！WordPressの新しい常識「フルサイト編集」とは？
0. はじめに：なぜ今、フルサイト編集（FSE）なのか？ Webサイト制作の現場は、常に進化しています。HTM…
-
Visual Studio Code（VS Code）-エディタ設定の完全ガイド
1. はじめに：VS Code設定の重要性 Visual Studio Code（VS Code）は、軽量であ…
-
Webデザイン基礎入門
企画→デザイン（設計）→実装→テスト→公開→運用の6フェーズの定義と流れについて解説します。 1. プロジェク…
-
WebクリエイターとWebデザイナーの違い
WebクリエイターとWebデザイナーは、どちらもWebサイトやWebコンテンツの制作に携わる職業です。しかし、…
-
Webデザイナー向け ポートフォリオページの作り方
「作品詳細ページ（実績）に掲載すると良い内容」 Webデザイナーのポートフォリオは、Webデザイナーとしての実…
-
Webデザイナー向け ポートフォリオサイトの作り方
Webデザイナーとして、ポートフォリオは自分のスキルや実績をアピールするための重要なツールです。しかし、ポート…
-
ホームページ制作のポイント
ホームページを作るときには、いくつかのポイントに注意する必要があります。ホームページは、あなたのビジネスやサー…
-
Webサイト？ホームページ？言葉の違いや使い分け
Webサイトとホームページという言葉は、よくインターネットに関する話題で使われますが、実は正確には違う意味を持…
-
WordPressのマルチサイト化の設定方法
WordPressのマルチサイト化の設定方法について、この記事では詳しく説明します。マルチサイトとは、一つのW…
-
デザインの基本と原則
デザインとは、何かを目的に沿って形にすることです。デザインには、美しさや機能性だけでなく、意味や感情も含まれま…
-
ホームページの必要性
ホームページは、企業や個人がインターネット上で自らの情報やサービスを発信するためのものです。ホームページは、イ…
-
HTMLを使った自作ホームページの作り方
初心者の方でもシンプルなホームページであれば簡単に作れます。 ホームページを初めて作る方に向けて、HTMLを使…
-
ホームページの作り方
ホームページを作るには、いくつかの方法があります。 自分でHTMLやCSSを書いてホームページを作るのは、最も…
-
Webサイトの制作の流れ
Webクリエイター養成科｜2015年1月開講コース募集中！
-
インターネットとは？
インターネットとは、世界中のコンピューターや情報機器をネットワークで接続することで、世界中の情報をやりとりする…
Webサイトデザインと制作の教科書
| 名称 | Webデザインの教室 |
|---|---|
| 所在地 | 茨城県日立市 |
| メールアドレス | info@garan.ne.jp |
| サイトURL | https://www.garan.ne.jp/d-classroom/ |
お問い合わせ