ネタ記事：SEO的に“本当に不利なのはどっち？阿部寛 vs いとうまい子の公式サイトで比較してみた
はじめに Web制作界隈で、定期的にバズる話題があります。 一方で、同じ芸能人公式サイトでも、いとう...
続きを読む
初級 HTMLとCSSの基礎
全57件の記事中、1-30件を表示
LP（ランディングページ）の広義・狭義と、SEO集客との関係
LPだけでは成果が出にくい理由と、広告と併用するべき理由 Web集客において「LP（ランディングペー...
続きを読むHTMLのidとclassの違い・使い分けと構造タグの基本
はじめに HTMLを書くときによく迷うのが「idとclassの使い分け」そして「構造タグ（heade...
続きを読むモバイルファーストの本当の意味｜GoogleのMFIとUX思想から理解する
はじめに 「モバイルファースト」と聞くと、PCデザインをスマホ風にすることだと誤解している人をよく見...
続きを読む【無料】SEOに効くHTMLアウトライン設計ツール｜見出しタグを自動検証できる
HTMLアウトラインチェッカーとは？正しい文書構造を学ぶための無料ツール Web制作において、見出し...
続きを読む【無料】CSSセレクター学習ツール｜スマホとPCで使い分ける練習法
はじめに：CSSセレクターを学ぶならツール活用が近道 CSSセレクターは、HTML要素を指定してデザ...
続きを読む
Figma模写 #7｜配色センスが身につく3色デザイン練習
使用したFigmaテンプレート このテンプレートの特徴 模写のルール（今回の練習方針） 「配色センス...
続きを読むデザインを言語化する練習帳｜“なぜ良いのか”を説明できる力を鍛えよう
はじめに｜“あえて”を言い訳にしていませんか？ 「このデザイン、ちょっとごちゃついてませんか？」「い...
続きを読むHTMLタグ一覧【フロントエンド向け使用例付き】
1. はじめに｜タグの意味を“見た目”で決めていませんか？ HTMLを書くとき、つい「見た目」に頼っ...
続きを読むh1〜h6見出しタグの正しい使い方とSEO対策【完全ガイド】
1. はじめに｜見出しタグが「適当」になっていませんか？ Webサイトやブログ記事を作っていると、&...
続きを読むグリッドレイアウトの基礎｜Webデザインで崩れない設計と使い方解説｜ワイヤーフレーム対応
Webデザインの設計を学ぶ中で、よく見かける失敗の一つに「グリッドレイアウトが崩れている」ことがあり...
続きを読む黄金比・白銀比・白金比の使い方｜バナーやロゴに応用できるデザイン理論｜初心者向け解説
はじめに Webデザインの世界で、「よく見える」と言われるレイアウトには、多くの技術的背景が存在しま...
続きを読むFigma模写 #6：選べる3パターン！シンプルカードレイアウトで模写力を高めよう
Figma模写シリーズ第6弾は、3つのカード型レイアウトのうち、どれか1つを選んで模写できる初級編で...
続きを読むVSCodeおすすめ拡張機能11選｜フロントエンド開発を効率化する必須ツール｜初心者対応
Web制作やWordPress開発で使われるエディターの中でも、今や定番となったのが「Visual ...
続きを読むCSSでフォントを自在に操る！基本から応用まで徹底解説
Webデザインにおいて「フォント」は第一印象を左右する重要な要素です。この記事では、CSSでのフォン...
続きを読む【比較】formrun・Tayori・Googleフォーム｜無料で使える問い合わせフォーム3選を徹底解説
はじめに 問い合わせフォームを設置する際、どのツールを選べばいいか迷う方も多いのではないでしょうか？...
続きを読むノーコードだけじゃ稼げない！フリーランスWeb制作者の成長ステップ
ノーコードだけじゃ稼げない！フリーランスWeb制作者の成長ステップ 「初心者からフリーランスWeb制...
続きを読むdiffツール5選｜GUI＆オンラインでコード差分比較【初心者OK】
diffツール5選｜GUI＆オンラインでコード差分比較【初心者OK】 プログラミングをしていると、&...
続きを読むMindMeisterとTrelloで学習効率を高める方法
MindMeisterとTrelloで学習効率を高める方法 現代の学習では、「やみくもに勉強する」の...
続きを読むWeb制作者のための基本知識｜HTML・WordPress・メールのサーバー構成まとめ
はじめに Web制作をしていると「HTMLはどのサーバーで動くの？」「WordPressは何が必要？...
続きを読むCSSが反映されない原因と対処法｜初心者がつまずきやすいエラー解決チェックリスト｜CSS学習者向け
Web制作において「CSSが反映されない」「デザインが変わらない」という問題に一度はぶつかるものです...
続きを読むMAMPとXAMPPの導入方法｜ローカル環境構築の手順と違いを徹底解説｜PHP開発入門
Web開発を学び始めたばかりの方にとって、まず必要なのがローカル環境の構築です。 この記事では、PH...
続きを読む「デザイン理論」とは？UI/UXデザインの質を上げる6つの基本原則
はじめに 「UI/UXデザインをもっと良くしたい」「なんとなく整っていない気がする」──そんなとき、...
続きを読むFigmaとAdobe XDの違いとは？初心者向けに基本操作から実践チュートリアルまで徹底解説！
Webデザインの現場で人気のデザインツール「Figma」と「Adobe XD」。 どちらのツールも優...
続きを読むCanvaとAdobe Expressの違いとは？初心者向けデザイン練習ガイド
デザイン初心者でも簡単にSNS画像やバナーを作成できる「Canva」と「Adobe Express」...
続きを読むWebパフォーマンス向上のための基本ガイド｜高速化のポイントと実践方法
Webサイトのパフォーマンスは、ユーザー体験を大きく左右する要素です。ページが遅いと、ユーザーはすぐ...
続きを読むWebアクセシビリティの基本｜ユーザー全員に配慮したウェブデザインの実践方法
Webアクセシビリティの基本 Webアクセシビリティとは、障害のあるユーザーを含むすべてのユーザーが...
続きを読むウェブデザインの基本！ナビゲーションの作り方と最適化
ウェブサイトのナビゲーションは、ユーザーが情報を探しやすくするための重要な要素です。ナビゲーションメ...
続きを読むWebデザインにおけるホワイトスペースの重要性と活用方法
1. ホワイトスペースとは？ ホワイトスペース（または余白）は、デザイン内の「空白部分」のことを指し...
続きを読むレスポンシブデザイン入門｜スマホ対応で必須の基本原則と実装方法を解説｜Web制作初心者向け
ウェブサイトが様々なデバイス（PC、タブレット、スマートフォン）で最適に表示されるようにするためには...
続きを読む