-
Figma実践講座を公開｜ワイヤーフレームからWebデザイン・プロトタイプまで学ぼう
WebTraining.jpに、Figma実践講座を追加しました。 Figmaは、Webサイトやアプリのデザインを作成するときによく使われるデザインツールです。 図形や文字を配置するだけであれば比較的簡単に操作できますが、実際のWeb制作では、 「どのくらいの幅で作れば... -
Web制作の学習ロードマップ｜初心者がHTML・CSS・JavaScript・WordPressを学ぶ順番
Web制作を勉強してみたいけれど、何から始めればいいのかわからない HTMLとCSSの次はJavaScript？それともWordPress？ FigmaやPHPまで全部勉強しないと、Webサイトは作れないの？ Web制作をこれから学び始める方にとって、最初につまずきやすいのが学習す... -
Web制作の本を探せる書籍検索ツールを公開しました｜HTML・CSS・Figma・WordPress
Web制作を学んでいると、 「HTML・CSSの入門書を探したい」 「WordPressやFigmaの本には、どのようなものがあるのだろう」 「生成AIやプログラミングの新しい本を確認したい」 と思うことがあります。 しかし、書店や販売サイトで検索すると幅広い商品が表... -
HTML・CSS・JavaScript・PHP・Gitを学べる無料の基礎テストサイトを公開しました
Web制作を学んでいる方向けに、HTML・CSS・JavaScript・PHPなどの基礎知識を問題形式で確認できる「Web制作 基礎テスト」を公開しました 現在は、次の基礎テストを用意しています。 HTML基礎テスト CSS基礎テスト JavaScript基礎テスト PHP基礎テスト Word... -
Web制作の練習や確認に使えるジェネレーターサイト「kobeya.com」を公開しています
Web制作を学習していると、HTMLやCSSの書き方を覚えるだけでなく、「実際にどのように表示されるのか」「値を変えると見た目がどう変わるのか」を確認しながら進めることがとても大切です。 特にCSSは、色、余白、角丸、影、グラデーション、文字装飾など... -
Webサイトを作れるようになるまでの学習ロードマップ
〜まったくの初心者から制作できる人へ〜 「Webサイトを作ってみたい」 「職業訓練でWebデザインを学ぶことになった」 「HTML？CSS？何からやればいいの？」 はじめてこの世界に入る方のほとんどが、ここで立ち止まります。実はWeb制作には、正しい順番が... -
コードを書く前に。HTML・CSS学習者のためのタイピング練習ツールを作りました
HTMLやCSSを勉強し始めたとき、「内容は分かるのに、コードを書くのが遅い」「キー入力に気を取られて、考える余裕がなくなる」そんな経験はありませんか？ Webデザインの学習では、文法の理解と同じくらい、「指と目がコードに慣れていること」がとても大... -
HTML/CSS・JavaScript AIを使ったWebサイトの正しい作り方
AIを「答えを出す道具」ではなく、「一緒に考えるパートナー」にするために ChatGPTやGeminiなどの生成AIが身近になり、Web制作の学習や実務でもAIを活用することが当たり前の時代になりました。AIを使えば、 HTMLやCSSのコードを作成してもらえる JavaScr... -
スマホ幅を考える前に…まず知りたい “メディアクエリに依存しないCSS”
Web制作を学び始めると、必ずといってよいほど耳にする言葉があります。「レスポンシブ対応」「ブレークポイント」「メディアクエリ」。 しかし、いざ実際にサイトを作ってみると、こんな壁にぶつかりがちです。 iPhone 375px に合わせたはずなのに、Galax... -
JavaScript を学ぶとどこまでできる？その後に続く学習ロードマップ完全ガイド
Web制作を学ぶなら、HTMLとCSSの次はJavaScript」 このような学習順序を聞いたことがある方は多いと思います。 しかし、実際にJavaScriptを学び始めると、次のように感じることがあります。 JavaScriptは、思っていたより学ぶことが多いどこまで勉強すれば... -
◯◯エンジニアが多すぎて混乱している人へ
― マークアップ／フロントエンド／Web／SaaS／プロダクトの違いを整理する ― なぜ「エンジニアの肩書き」はこんなに増えたのか 最近、Web業界を学び始めた人から、こんな声をよく聞きます。 マークアップエンジニアとフロントエンドエンジニアは何が違うの... -
Figma基礎講座を公開しました｜Webデザイン初心者でも安心して学べる入門コースから
WebTraining.jp の新しいトレーニングに、Figma基礎講座 を公開しました。Figma は、WebデザインやUIデザインの現場で必須となっているデザインツールです。デザイン的なツールのトレーニングは初めてですが、デザインというより、サイトやプログラムを設... -
パソコンのローカル環境で WordPress を始めよう｜初心者にもできる導入ガイド
WordPress を学習したいけれど、いきなりレンタルサーバーを契約するのは不安…そんな方は、まず ローカル環境（自分のパソコン）に WordPress をインストールして練習する方法 がおすすめです。 ローカル環境を使えば、インターネット上に公開されていない... -
【保存版】GitHubって何？学習・コード管理に最適な使い方＆Pagesで公開する方法も紹介
「制作したHTMLやCSSをオンライン上で管理したい」「変更前のコードと比較したい」「制作したWebサイトをURLで共有したい」 そんなときに役立つのが、GitHub（ギットハブ） です。 GitHubは、ソースコードや制作ファイルと、その変更履歴をオンライン上で... -
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の要素一覧。どこから覚える？ HTMLにはたくさんのタグがありますが、最初からすべてを覚える必要はありません。まずは、見出しや段落などの「文章を作るタグ」から始め、次にリンク・画像・リストを覚えていきましょう。これらが使えるようになると、... -
言語は違っても、基礎を押さえれば大丈夫！
プログラミング言語は多すぎる 「プログラミングを始めたい！」と思ったとき、最初にぶつかる壁のひとつが、「プログラミング言語って多すぎない？」という悩みです。 実際、プログラミング言語には以下のようなものがあります Python（AIやデータ分析で人...
1