簡単ではありますがサンプルサイトのトップページを作成してみました。おさらいの意味を含めトップページ制作に使用したCSSを以下に記しました。 実は十数個のプロパティーしかつかっていません。実際に構築されるホームページもそんなものです。要件により他にも使用されるプロパティーはありますが、まずはよく使われる今回つかったプロパティーをしっかり覚えることでより実践的にCSSを覚えていく事ができます。
外部CSSファイルを読み込む場合はhtmlのhead内に
<link rel="stylesheet" href="ファイルへのパス/styles.css">
文字系とは文字通り文字の事に関する設定をするプロパティーです。サンプルサイトで使った文字系のプロパティーは以下の通り
文字色を設定する
文字サイズを設定する
文字揃えを設定する
文字の装飾を設定する
文字の太さを設定する
行間を設定する
要素の表示領域を設定するデザイン的な概念の事をボックスモデルといいます。下図の領域で成り立っています。
要素の境界線を設定する。
要素の背景を設定する
要素の表示形式を設定する
要素の配置位置を設定する
要素のはみ出る部分の表示形式を設定する
要素の外側の余白を設定する
要素の外側の余白を設定する
要素の横幅を設定する
