ツバサのメモ帳
CSSとは?Webページの見た目を整えるスタイルシートの話

CSSとは?
Webページの見た目を整えるスタイルシートの話

CSSとは

CSS(Cascading Style Sheets)は、Webページの見た目を定義するスタイルシート言語だ。文字の色、フォント、余白、背景色、レイアウトなど、ページのデザインに関わる部分を指定する。

HTMLが「ここは見出し、ここは段落」と構造を定義し、CSSが「見出しは青色で太字、段落は16pxでグレー」と見た目を定義する。この2つを組み合わせてWebページが完成する。

ブログ運営での使い方

テンプレートのstyleタグで一括管理

このブログではHTMLファイル内の<style>タグにCSSを書いている。一度デザインを決めてしまえば、全ページで同じ見た目を維持できる。

レスポンシブデザイン

CSSの@mediaクエリを使うと、PC・スマホ・タブレットそれぞれに最適なレイアウトを指定できる。このブログも画面幅600px以下でフォントサイズやレイアウトを切り替えている。

覚えておきたいポイント

CSSもAIに書いてもらえる

「落ち着いた配色にしてほしい」「スマホでも読みやすいデザインにして」のような指示でAIがCSSを生成してくれる。CSSの文法を覚えるより、デザインの要望を言語化する方が重要だ。

FAQ

Q. CSSとは何ですか?

A. Webページの色・フォント・レイアウトなどの見た目を定義するスタイルシート言語です。HTMLが構造を作り、CSSがデザインを付けます。

Q. CSSとHTMLの違いは?

A. HTMLはページの構造(見出し・段落など)を定義し、CSSは見た目(色・フォント・余白など)を定義します。両方を組み合わせてWebページが完成します。

Q. CSSを知らなくてもブログは作れますか?

A. AIに要望を伝えてCSSを生成してもらうことができるため、文法を完璧に覚える必要はありません。

Q. レスポンシブデザインとは何ですか?

A. PC・スマホ・タブレットなど画面サイズに応じてレイアウトを切り替えるデザイン手法です。CSSの@mediaクエリで実装します。

Q. CSSはどこに書きますか?

A. HTMLファイル内のstyleタグに書く方法と、別ファイル(.css)に書いてHTMLから読み込む方法があります。このブログではstyleタグ内に記述しています。

ツバサ

ツバサ

EC関連の会社で働いています。少人数の職場なので、ささげ業務の手配から画像の外注管理、ページ更新、バイトさんへの作業指示まで守備範囲は広めです。Photoshopは苦手なので本格的な画像加工は外注に出していますが、何社も試した分、業者選びや納品チェックには慣れました。このブログは仕事の中で身につけたことの記録です。