Webページの「見た目」を書くための言語。色・文字の大きさ・余白・配置・アニメーションまで、デザインに関わる部分をすべて担当する。構造のHTMLとセットで使う。
CSS(Cascading Style Sheets)とは、Webページの見た目を指定するための言語です。文字の色や大きさ、余白、並べ方、影、アニメーションまで、デザインに関わることはすべてCSSが担当します。
「内装デザイナー」です。HTMLが建てた骨組み(構造)に対して、壁紙を貼り、家具を配置し、照明の雰囲気を決めるのがCSS。同じ骨組みでも、内装しだいで高級ホテルにも子ども部屋にもなるように、同じHTMLでもCSSしだいで見た目は別物になります。
「どこを・どうする」のペアで書きます。
h1 { color: red; } — 大見出しの文字を赤にするp { font-size: 18px; } — 段落の文字を18pxにする.button { background: blue; } — buttonという名前の部品を青背景にする
この小さなルールを積み重ねて、ページ全体のデザインが組み上がります。
訪問者は見た目で数秒のうちに「信頼できるか」を判断します。読みやすい行間、揃った余白、押しやすいボタン——CSSの丁寧さは、そのまま成約率(CVR)に響きます。なお実務では、Tailwind CSSのような「用意されたクラス名を組み合わせる道具」を使って効率よく書くのが主流です(このサイトもそうです)。
初心者がつまずきやすいポイント
「思いどおりの場所に配置できない」がCSS最大の壁です。要素の並べ方(FlexboxとGrid)だけは早めに基本を押さえましょう。もう一つ、スマホで見ると崩れる問題も定番。パソコンとスマホ両方での確認を習慣にすることが大事です。
API(エーピーアイ)
プログラム同士が情報をやり取りするための窓口。中の仕組みを知らなくても、決められた形で頼めば決められた形で返ってくる。
GitHub(ギットハブ)
プログラムのコードを保管・共有するためのWebサービス。変更の履歴がすべて残り、いつでも前の状態に戻せる。Vercelと連携すると、コードを送るだけで自動でサイトが更新される。
HTML(エイチティーエムエル)
Webページの「構造」を書くための言語。見出し・段落・画像・リンクなど、ページに何がどの順で置かれるかを定義する。Webページはすべて最終的にHTMLでできている。
JavaScript(ジャバスクリプト)
Webページに「動き」を付けるためのプログラミング言語。ボタンを押したら開く、入力をチェックする、データを取ってきて表示するなど、ページ上のあらゆる動作を担当する。
Next.js(ネクストジェイエス)
Reactをベースにした、Webアプリ開発の人気フレームワーク。画面・ページ切り替え・サーバー処理までひと揃いで作れる。本サイトもNext.jsで動いている。
Supabase(スーパベース)
データベース・ログイン機能・ファイル保管をまとめて用意してくれるサービス。サーバーを自分で用意しなくても、会員制サイトの土台が作れる。