スタイルシート[CSS]覚書

目次T「基礎編」目次U「CSSの組込みと、適用対象」目次V「ページ全体にCSSを適用」目次W 「文字と画像にCSSを適用」
目次X「CSSの基本使用例」目次Y「リンクにCSSを適用」目次Z 「文字や画像にフィルターを適用する | 目次[「その他にCSSを適用」 | 
| 目次[ エクラ(eclat.CyberCity)で使うCSS || 付録 「表(テーブル)を作る」 | インラインstyle属性 |

       お気に入りの登録は右のボタンから「donbey sunroom」へお願いします。

HTMLでは、いろいろなタグを使って、見出しや本文・表組みや画像の貼り付け等、
WEBページ(ホームページ)を構成している要素を指定します。
しかし、見出しや本文をどの様に表示するかは、基本的にプラウザに任されていますので、
HTMLだけで、きちんとレイアウトやデザインをして作ったWEBページでも、
プラウザによって見栄えが変わったり表示位置が違っていたりして、あわてることが有ります。
そこで、HTMLとは別に、WEBページのデザインを指定する為の仕組みが考案されました。これがスタイルシートです。
WEBページで使われているスタイルシートは、正式にはカスケーディングスタイルシート(略してCSS)と呼ばれます。
スタイルシートは、InternetExplorerをはじめとするたいていのプラウザが対応しており、
いまやWEBページ作成に欠かせないものになっています。
と言う事で、スタイルシートを勉強しようと思い今まで少しずつWEBページに取り込みながら覚えてきましたが、
全てが理解できるには、奥が深いというか、難しい事がいっぱい有ってまだまだですが。
donbeyが自作のホームページに割合簡単に使えそうなものだけを集めて、覚書のページを作りました。


この覚書のページを作成する前にも、スタイルシートをページを作成しながら少しずつ覚える為に作ったページ
StudyTime」が有りますが「StudyTime」を見る前にこの「覚書」のページで「CSS」に少し慣れてから、
StudyTime」を見ながらページ作成にかかると理解しやすいと思います。


目次 T 基礎編・「一通り読んで見てください。」
スタイルを定義するタグ プロパティの種類
スタイルシートをコメントで囲む プロパティ一覧
スタイルを定義する プロパティの値
スタイルシートの書式 要素一覧
スタイルシートの書式(複数のプロパティの指定) ボックスについてcontent・padding・border・margin
目次  U CSSの組み込みと、適用する対象 *各ページのサンプル画像をクリックして拡大画像を見てください。
CSSの書かれたファイルを読み込む    <linkrel="stylsheet"href="URL"type="text/css>
任意の要素にstyle属性の値として組み込む   <要素名 style="スタイルシート">                               
                                 <要素名 style="スタイルシートスタイルシート・・・・">
style要素の内容として組み込む  <style type="text/css">〜</style>
特定の要素に適用させる   要素名 {〜} 一行目に適用させる   要素名:first-line {〜}
複数の要素に適用させる   要素名,要素名,要素名, {〜} 1文字目に適用させる  要素名:first-letter {〜}
すべての要素に適用させる  * {〜} ;
特定の要素に含まれる要素に適用させる   要素名 要素名 {〜}
IDやクラスを指定した要素に適用させる     #ID名 {〜} .クラス名 {〜} 要素名#ID名 {〜} 要素名.クラス名 {〜}
リンク部分に適用させる     要素名:link {〜} 要素名:visited {〜} 要素名:hover {〜} 要素名:active {〜}
目次  V ページ全体にCSSを適用する。
ページ全体の背景色を指定する 背景色を指定する 
背景画像を指定する 背景画像の並び方を指定する
背景画像をまとめて指定する 背景画像の表示位置を指定する
背景画像を固定する(1) 背景画像の位置を指定して固定する(1)
背景画像を固定する(2) 背景画像の位置を指定して固定する(2)
CSSを使って枠線を付ける @ ページを枠線で囲む @
CSSを使って枠線を付ける A ページを枠線で囲む A
CSSを使って枠線を付ける B ページを枠線で囲む B
ページに余白を空ける :
目次  W 文字と画像にCSSを適用する  *各ページのサンプル画面をクリックして拡大画像を見てください。
文字色を指定する 文字色を指定する
フォントサイズを指定する 文字のサイズを指定する
数値で文字のサイズを指定する 見出しの文字のサイズを変更する
フォントを指定する  フォントを指定する
フォントスタイルを指定する フォントの種類を指定する
フォントの太さを指定する フォント関係をまとめて指定する
太字・斜体を指定する 行間を設定する
全体を大文字または小文字で表示させる 文章の行間を自由に変更する
行揃えを指定する 文字間隔・単語間隔を設定する
文字と文字の間隔を指定する 縦方向の位置を指定する
文字飾りを指定する 一行目のインデントを設定する
改行しないで表示させる 文章に下線を付ける指定方法
文字にアンダーラインを引く 文章の最初の一文字に装飾を指定する
文字列に背景色を指定する 文章の最初の一行目にだけ装飾をを指定する
特定の文字の大きさを変える 蛍光ペン効果を指定する
影付きメニューボタン 文章を縦書き表示にする指定をする
ボタンに影を付ける 文字に影を付ける
h1と画像にCSSを指定する 特定の文字列の行間を指定する
画像の上に文字を重ねる指定をする 特定の文字のそろえ方を変える
マージンを設定する 内容の周りの空間を設定する
クラスを使ってCSSを指定する。 画像の枠線を自由に設定する
画像に影を付ける(1) 画像に影を付ける(2)
枠線の太さを指定する 枠線の色を指定する
枠線の形式を指定する 枠線をまとめて指定する
幅と高さを指定する 左右への配置と回り込みを指定する
絶対的な位置に配置する 回り込みを解除する
相対的な位置に配置する 表示されないようにする
重なる順序を指定する はみ出る部分の処理方法を指定する
センタリングする :
目次  X スタイルシートの基本使用例  *各ページのサンプル画面をクリックして拡大画像を見てください。
スタイルシートを適用するページ(T)  ここで作成したページに以下のスタイルシートを適用して見ます。 
ページに余白を空ける   文字のサイズを指定する  
文字に色を付ける  ページ全体の背景色を指定する  
スタイルシートを適用するページ(U)  ここで作成したページに以下のスタイルシートを適用して見ます。
文字のフォントを指定する   行間を指定する  
特定の文字にスタイルを指定する     :
見出しに背景色を付ける 見出しに枠線を付ける
見出し枠の内側の余白を指定する 枠線のパターンを変える
目次  Y リンクにCSSを適用する  *各ページのサンプル画面をクリックして拡大画像を見てください。
リンク部分に適用させる リンクのアンダーラインを表示しない
リンクをボタンの様に見せる指定をする Y型 リンクをボタンの様に見せる指定をする T型
目次  Z 文字や画像にフィルターを適用する  *各ページのサンプル画面をクリックして拡大画像を見てください。
グラデーションフィルタ(画像に適用) グラデーションフィルタ(文字列に適用)
「BLUR」(ぼかし)フィルタ 「DROPSHADOW」(影の作成)フィルタ
「GRAY」(モノクロ)フィルタ 「GLOW」(輪郭のにじみ)フィルタ
「WAVE」(うねり)フィルタ 「FLIRH」(左右反転)「FLIPV」(上下反転)フィルタ
「ALPHA」(グラデーション)フィルタ @ 「ALPHA」(グラデーション)フィルタ B
「ALPHA」(グラデーション)フィルタ A 「ALPHA」ぼかし(半透明)フィルタ C
目次  [ その他CSS適用例  *各ページのサンプル画面をクリックして拡大画像を見てください。
CSSでインラインフレームを作成する プルダウンメニューの背景色を指定する
: :
目次  \  エクラ(eclat.CyberCity)のデザイン変更で使うCSS
エクラで使うスタイルシート(1) 「プロフィール」 エクラで使うCSSの基礎(1)
エクラで使うスタイルシート(2) 「メニューフレーム」 エクラで使うCSSの基礎(2)
エクラで使うスタイルシート(3) 「BBSのページ」 文字/テキスト のCSS指定
エクラで使うスタイルシート(4) 「リンク集のページ」 背景色 のCSS指定
エクラで使うスタイルシート(5) 「日記のページ」 ページタイトル の付け方
エクラホームページ Q&A :
付録 「表(テーブル)を作る」 (表のデザインを出来るだけ解り易く書いてみます。)
@表を構成する要素 A表を作る
B表に罫線を付ける C列の横幅を指定する
Dセルの行揃えを指定する E表にキャプション(タイトル)を付ける
Fセルを結合する属性 G複数のセルを結合する(1)
H複数のセルを結合する(2) I表に罫線を付ける(罫線の色と種類を指定する)
Jセルの余白を指定する K表の罫線を単線にする
L表に背景色を指定する Mセルに背景色を指定する
Nデータのセルに色を付ける O表の様々なスタイル

Click Here!

donbey sunroomへ  donbey secondhouseへ donbey sunroom2へ