Cascading Style Sheet(CSS)は、Webブラウザに表示されたHTMLコンテンツをどのように表示するか、どのように配置するかを定義したルールを含んだファイルです。
CSSはページのコンテンツを記述しているHTMLとは別に、ページをどのように表示するかを定義することができます。コンテンツと、その見せ方の定義を分離できるということは重要です。複数ページに対してCSSを再利用することができるからです。また、HTMLに直接CSSを埋め込まずに、CSSファイルとして独立させることで、プロジェクトの規模が大きくなった時にメンテナンスしやすくなるという利点もあります。
Webサーバによって配信されるHTMLファイルには、コンテンツを表示するために必要なCSSファイルへの参照が含まれています。ChromeのWeb Developer Toolsで確認できるように、WebブラウザはHTMLファイルをリクエストした後にCSSファイルをリクエストを行います。
fsp.cssファイルへのリクエストはFull Stack Pythonのページがtheme/css/fsp.cssを参照しているためです。以下のスクリーンショットを見てください。
CSSプリプロセッサはCSSに変換される言語です。CSSプリプロセッサは変数、ミックスイン、コードの重複を減らすための関数と言った機能をCSSに追加しています。CSSプリプロセッサで利用できる文法を使うことで、デザイナーが基本的なプログラミングの構造でメンテナンス性の高いフロントエンドのコードを書くことができるようになります。
HTMLとCSSについての応用的なガイドでpreprocessorsに関する詳しい章があります。
CSSフレームワークはWebアプリケーションのデザインに構造と基本スタイルを提供しているものです。
CSS Positioning 101は、CSSを使って要素の配置を正しく行う方法を学ぶことができます。
基本的な要素を含んだ簡単なHTMLを作りましょう。python -m SimpleHTTPServerコマンドを使って、サーバを起動し、HTMLを配信します。HTMLの<head>セクションに<style></style></style>を用意し、HTML内の要素に対して色々なスタイルを適用してみましょう。
BootstrapやFoundationのようなフロントエンドのフレームワークを調べて、実際に使ってみましょう。
フレームワークのグリッドシステム、スタイルオプション、カスタマイズ方法について学び、実際に使えるようになりましょう。
あなたのWebアプリケーションにCSSフレームワークを導入し、より良いデザインにしていきましょう。
