スタイルシートについて学べるリファレンスサイト

スタイルシート講座 CSS

digilog. CSSでは、CSS(Cascading Style Sheets／カスケーディング・スタイル・シート)の基本から応用まで、実践で使える記述などを交えて紹介しています。

スタイルシートとは

スタイルシート(Style Sheet)とは、HTMLやXMLなどと同じようにWEBページ制作に欠かせないマークアップ言語の一つです。一般的に広く知られているものがCSSであり、最も使用されている事から、本サイトでは「スタイルシート＝CSS」として説明していきます。

スタイルシートを使うメリット

CSSを使うメリットは、Webページを作る際に文章構造と見た目の表示を分けて管理することにあります。
そのため、多くのページを持つWEBサイトのデザインをリニューアルする際に管理が楽になります。また、ブラウザがHTMLドキュメントを読み込む効率を良くして、ユーザーのストレスを軽減することができます。更に、今までHTMLだけでは不可能だった様々な表現方法を、画像を使う事なく実現出来ます。HTMLタグの記述が簡潔になるため、SEOに有効です。
今では、WebデザイナーにとってCSSは欠かせない技術となりました。まずは、具体的な記述方法を覚える前に、基礎知識から学んでいきましょう。

CSSのプロパティ一覧表

スタイルシートのプロパティ一覧表です
背景関連	background、background-attachment、background-color、background-image、background-position（x y）、background-repeat
フォント関連	font、font-size、font-weight、font-family、font-style、font-variant、font-size-adjust、font-stretch
テキスト関連	color、font-size、vertical-align、line-height、text-indent、text-decoration、text-transform、white-space、letter-spacing、word-spacing、text-justify、text-underline-position、text-autospace、line-break、word-break、word-wrap、text-shadow
幅・高さ	width、max-width、min-width、height、max-height、min-height
余白関（マージン・パディング）	margin、padding
外枠関連（ボーダー）	border（top right bottom left）、border-color、border-style、border-style、border-width
表示・配置	overflow（x y）、position、top、right、bottom、left、display、float、clear、z-index、visibility、clip、direction、unicode-bidi、writing-mode
リスト	list-style、list-style-type、list-style-image、list-style-position、marker-offset
テーブル	table-layout、caption-side、border-collapse、border-spacing、empty-cells
内容挿入・引用符	content、quotes
アウトライン	outline、outline-color、outline-style、outline-width
カーソル	cursor
入力補助	ime-mode
印刷関連	page-break-before、page-break-after
スクロールバー【IE独自】	scrollbar-base-color、scrollbar-arrow-color、scrollbar-face-color、scrollbar-3dlight-color、scrollbar-highlight-color、scrollbar-darkshadow-color、scrollbar-shadow-color
フィルター・効果【IE独自】	filter、zoom

スタイルシートに関するキーワード

digilog.シリーズ
digilog.TOP | digilog.HTML | digilog.CSS | digilog.SEO | digilog.img

WEB SEARCH

CONTENTS