こんにちは、ツバサです。
HTMLでブログの骨組みができたあと、「デザインはCSSで調整します」と言われた。CSSはHTMLが作った構造に「色」や「形」を付ける役割を担っている。
CSSとは
CSS（Cascading Style Sheets）は、Webページの見た目を定義するスタイルシート言語だ。文字の色、フォント、余白、背景色、レイアウトなど、ページのデザインに関わる部分を指定する。
HTMLが「ここは見出し、ここは段落」と構造を定義し、CSSが「見出しは青色で太字、段落は16pxでグレー」と見た目を定義する。この2つを組み合わせてWebページが完成する。
ブログ運営での使い方
テンプレートのstyleタグで一括管理
このブログではHTMLファイル内の<style>タグにCSSを書いている。一度デザインを決めてしまえば、全ページで同じ見た目を維持できる。
レスポンシブデザイン
CSSの@mediaクエリを使うと、PC・スマホ・タブレットそれぞれに最適なレイアウトを指定できる。このブログも画面幅600px以下でフォントサイズやレイアウトを切り替えている。
覚えておきたいポイント
CSSもAIに書いてもらえる
「落ち着いた配色にしてほしい」「スマホでも読みやすいデザインにして」のような指示でAIがCSSを生成してくれる。CSSの文法を覚えるより、デザインの要望を言語化する方が重要だ。
