HTML/CSS・JavaScript・PHP・WordPress初心者のためのAIの正しい使い方
― 考えなくていい学習にならないために ― AI（ChatGPT など）が身近になり、Web制作の学習や現場でも AI を使うことが当たり前になってきました。 コードを書いてもらえる エラーの原因を教えてくれる 説明までしてくれる とても便利な存在です。一方で、...WordPress関数一覧｜まず覚えたい基本と全体像
WordPress でテーマ制作やカスタマイズを行う際、避けて通れないのが WordPress関数（テンプレートタグ・API関数） です。 ただし、実際に学習を進めてみると、 関数の数が多く、どこから覚えればいいのか分からない 公式リファレンスは英語が中心でハード...スマホ幅を考える前に…まず知りたい “メディアクエリに依存しないCSS”
Web制作を学び始めると、必ずといってよいほど耳にする言葉があります。「レスポンシブ対応」「ブレークポイント」「メディアクエリ」。 しかし、いざ実際にサイトを作ってみると、こんな壁にぶつかりがちです。 iPhone 375px に合わせたはずなのに、Galax...
JavaScript を学ぶとどこまでできる？その後に続く学習ロードマップ完全ガイド
「Web制作を学ぶなら、まず HTML / CSSから学習して、その次は JavaScriptかな〜」そんな言葉を聞いたことがある方も多いと思います。しかし、実際には、JavaScript を少し学び始めた頃に多くの人がぶつかる壁があります。 JavaScriptって思ったより奥深い...
CSSだけで「if」を考える時代が来た？
― 新しい if() 関数と、いま使うべきかどうかの判断基準 ― 「CSSに if はない」は、もう半分だけ正しい CSSを学んでいると、必ず一度はこう言われます。 CSSに if 文はありません。条件分岐は JavaScript の役割です この説明は、考え方としては正しいので...
◯◯エンジニアが多すぎて混乱している人へ
― マークアップ／フロントエンド／Web／SaaS／プロダクトの違いを整理する ― なぜ「エンジニアの肩書き」はこんなに増えたのか 最近、Web業界を学び始めた人から、こんな声をよく聞きます。 マークアップエンジニアとフロントエンドエンジニアは何が違うの...
Figma基礎講座を公開しました｜Webデザイン初心者でも安心して学べる入門コースから
WebTraining.jp の新しいトレーニングに、Figma基礎講座 を公開しました。Figma は、WebデザインやUIデザインの現場で必須となっているデザインツールです。デザイン的なツールのトレーニングは初めてですが、デザインというより、サイトやプログラムを設...
パソコンのローカル環境で WordPress を始めよう｜初心者にもできる導入ガイド
WordPress を学習したいけれど、いきなりレンタルサーバーを契約するのは不安…そんな方は、まず ローカル環境（自分のパソコン）に WordPress をインストールして練習する方法 がおすすめです。 ローカル環境を使えば、インターネット上に公開されていない...
WebTraining.jp の右下チャットの効率的な使い方
WebTraining.jp では、学習者が「詰まった瞬間」にすぐ質問できるよう、画面右下に WebtrainingAI チャットを設置しています。操作はとてもシンプルですが、質問の仕方によって回答の精度が大きく変わるため、この記事では 使い方のポイントと効率的な質問...
【保存版】GitHubって何？学習・コード管理に最適な使い方＆Pagesで公開する方法も紹介
「制作したHTMLや課題ファイルを安全に保存したい」「過去のコードと比較したい」「チームでコードを共有したい」そんなときに役立つのが GitHub（ギットハブ） です。 GitHubは、デザイナーやエンジニアがコードやファイルを保存したり、履歴を管理したり...
JSがないと無理だったUIが、CSSだけでできる時代に
スクロールするとヘッダーがスッと消えて、上に戻るとふわっと再表示される。 スマホサイトやSNSアプリ、企業サイトなどでよく見かけるこの動きは、長らく「JavaScriptでしか作れないUI」の代表例でした。 しかし最近、CSSだけで同じことを実現できる仕組...
【保存版】CSS Gridカードレイアウト完全ガイド｜auto-fit・minmaxでレスポンシブ対応する方法
1. はじめに：なぜCSS Gridでカードレイアウトを組むのか Webサイトのトップページやブログ一覧、制作実績ギャラリーなどで頻繁に使われるのが「カードレイアウト」です。画像＋テキストを整然と配置できるため、視認性が高く、情報を整理して伝えるのに適...
【保存版】CSSセレクタの使い方完全ガイド｜子セレクタ・隣接・属性・:not まで
CSSセレクタとは？まずは基本をおさらいしよう CSSセレクタとは、「どのHTML要素にスタイルを適用するのか」を指定するためのルールです。HTMLが「骨組み（構造）」、CSSが「見た目（デザイン）」を担当するのは知っている方も多いと思いますが、CSSセレク...
CSSのclass属性の使い方・命名ルール・詳細度（specificity）まで徹底解説
Webサイト制作で欠かせないのが、CSSでスタイルを指定する際に使用するclass属性（クラス属性）です。「なんとなく付けているけど、正しい使い方や命名方法まではわかっていない…」「idとの違いは？詳細度（specificity）って何？」という初心者〜中級者の...
「最初の設計がすべて」ではない。現場で学ぶデータベース設計の見直し方
現場でも「最初のDB設計が足りなかった」「要件が増えて構造が限界」──再設計・再構築は日常茶飯事です。 「システムを作っていたら、途中でSQLが複雑になりすぎてよく分からなくなった…」「処理をPHPで無理やり書いているけど、これでいいのかな？」 そん...
HTMLのmeta要素まとめ｜最小限の基本設定からSEO・OGPまで徹底解説
HTML ページの <head> 内に記述する meta 要素を用いて、「文字コード」「レスポンシブ対応」「検索エンジン向け設定」「SNS（シェア）表示」など基本設定を行えるようになることを目指します。つまり、ただ HTML を書くだけでなく、Web ページを実...
PHP開発環境を準備しよう｜XAMPP（ザンプ）で簡単ローカル構築ガイド
Webサイト制作やプログラミングを学んでいく中で、PHPを動かす環境を整えることは最初の大切なステップです。HTMLのようにファイルをダブルクリックしてブラウザで開くだけでは動かないのがPHPの特徴。そこでここでは初心者でもすぐに使える統合環境「XAMP...
positionプロパティを正しく理解しよう｜デザイン再現の落とし穴と使い分け
デザインの再現性でよく悩むのがこの部分です。 「Figmaのデザイン通りにコーディングしたいのに、どうしてもうまくいかない…」「見た目を合わせようとすると、position: absolute が増えてしまう…」 これは決して悪いことではありません。むしろ「デザイ...
Reset CSSとは？Webデザインを始めるなら必ず押さえておきたい初期化スタイル+モダンCSS
Webサイトをコーディングしていて、「ブラウザによって少し見た目が違うな…？」と感じたことはありませんか？実はそれ、ブラウザごとに設定されている「初期スタイル（User Agent Stylesheet）」が原因です。 この差をなくし、すべてのブラウザで同じ状態...
Webデザイナーになるには？ロードマップ
Webデザイナーは「作る力」と「伝える力」の両方が必要 Webデザイナーは、「作る力」と「伝える力」の両方が求められる仕事です。 デザインセンスに自信がない… HTML/CSSはかなり勉強しないとダメ？ そもそも何から始めればいいの？ という質問をよくいた...
Visual Studio Codeの使い方【HTML入門編】｜フォルダ作成・ファイル保存・Live Serverプレビューの手順
Web制作・プログラミングの学習を始めたばかりの方へ。この記事では、無料のコードエディタ「Visual Studio Code（VS Code）」を使って、HTMLファイルを作成し、保存して、Live Serverでブラウザプレビューする基本操作をやさしく解説します。 フォルダを...
Web制作者が知っておきたい「ランサムウェア対策」｜WordPressとPHPで守るための基本チェック
ランサムウェアとは？Web制作者にも関係ある攻撃 ランサムウェア（Ransomware）とは、感染するとパソコン内やサーバー上のファイルを暗号化し、「元に戻してほしければ身代金を支払え」と脅迫するマルウェアの一種です。最近では、企業だけでなく、個人が...
HTMLの要素一覧。どこから覚える？
HTMLにはたくさんの要素がありますが、最初から全部を覚える必要はありません。まずは「文章の構造を作るタグ」と「リンク・画像・リスト」の基本から始めましょう。下の表は、初心者が最初に覚えるべきタグをグループごとに整理しています。実際のコーデ...
MVCモデルとは？Webアプリを支える設計の基本
Webアプリやシステム開発を学ぶとよく出てくる「MVCモデル」。これは、アプリの構造を整理してわかりやすくするための設計パターンです。Laravel、CakePHP、CodeIgniter、Ruby on Rails、Djangoなど、ほとんどのWebフレームワークがこの考え方をベースにし...
12
