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