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

スタイルシート講座 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 

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

気になるキーワードが含まれるページ
CSSとは | セレクタ | プロパティ | | 使える単位 | id | class | ブロックレベル要素 | インライン要素 | DOCTYPEスイッチ | 余白と外枠の解釈 | CSSで段組 | 全称セレクタ

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