Web開発– category –
-
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業界を学び始めた人から、こんな声をよく聞きます。 マークアップエンジニアとフロントエンドエンジニアは何が違うの... -
【保存版】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 ページを実... -
positionプロパティを正しく理解しよう｜デザイン再現の落とし穴と使い分け
デザインの再現性でよく悩むのがこの部分です。 「Figmaのデザイン通りにコーディングしたいのに、どうしてもうまくいかない…」「見た目を合わせようとすると、position: absolute が増えてしまう…」 これは決して悪いことではありません。むしろ「デザイ... -
Reset CSSとは？Webデザインを始めるなら必ず押さえておきたい初期化スタイル+モダンCSS
Webサイトをコーディングしていて、「ブラウザによって少し見た目が違うな…？」と感じたことはありませんか？実はそれ、ブラウザごとに設定されている「初期スタイル（User Agent Stylesheet）」が原因です。 この差をなくし、すべてのブラウザで同じ状態... -
HTMLの要素一覧。どこから覚える？
HTMLにはたくさんの要素がありますが、最初から全部を覚える必要はありません。まずは「文章の構造を作るタグ」と「リンク・画像・リスト」の基本から始めましょう。下の表は、初心者が最初に覚えるべきタグをグループごとに整理しています。実際のコーデ... -
MVCモデルとは？Webアプリを支える設計の基本
Webアプリやシステム開発を学ぶとよく出てくる「MVCモデル」。これは、アプリの構造を整理してわかりやすくするための設計パターンです。Laravel、CakePHP、CodeIgniter、Ruby on Rails、Djangoなど、ほとんどのWebフレームワークがこの考え方をベースにし... -
PHP スーパーグローバル変数まとめ
スーパーグローバル変数とは？ PHPでプログラムを書いていると、フォームの入力内容を受け取ったり、URLに含まれる値を使ったり する場面がよく出てきます。こうした「外部から渡されるデータ」や「サーバーの情報」を簡単に扱えるように、PHPには あらか...
1
