>> スタイルシート講座

スタイルシート講座

ここではスタイルシートというものをやっていこう。基本的にはHTML講座と進め方は一緒だよ。スタイルシートって聞いたことあるかな?
いままでHTMLというものを勉強してきたんだけど、あれはホームページを作る、だから文字を書くというのが基本的な機能だったんだ。
スタイルシートというのはさらにデザインをよくしていくために使われるものなんだ。
HTMLでもきれいなデザインがたくさん出来たんだけどさらにもっと良くしたかったらスタイルシートというものを使ってみよう。
もっと、いいホームページが作れるよ。


ホーム Q&A 情報掲示板 なんでも質問箱 実践編

講座について・・・

■ 講座の進め方

スタイルシート講座では各項目ごとに分けて解説しています。
それぞれの項目では[基本編・標準編・応用編]と3つの難易度に分けて解説しています。
必ずしもはじめから読む必要はありませんが、
新しい用語の解説などもしていますので、基本的には前から読んでもらうとわかりやすいと思います。
また、一度読んだだけでは理解しにくい部分もいくつも出てくると思いますが、わかるところから覚えていけば自然と身についていきます。
あまり深く考えずに楽しく勉強していってください。

■ アイコンについて

※ 勉強の仕方は様々です。目次から自分の知りたいものを調べてもいいし、最初から順番に勉強してもらっても結構です。
初めから順番にやってもらえるように作っていますので、初心者の方はできれば初めから読んでいただくことをお勧めします。
各コンテンツは基本編標準編応用編と分かれています。それぞれの講座の後には
top.gif (583 バイト)back2.gif (978 バイト)back.gif (1116 バイト)next.gif (705 バイト)next2.gif (967 バイト)というのがありますので、全てのコンテンツの基本編を先に勉強して、次は標準編、そして応用編と勉強してもらってもいいですし、コンテンツごとに基本から応用まで一気にやっていってもらって全てのコンテンツを読んでもらってもいいです。様々な勉強法があると思いますので、ご自由に利用ください。

※ わかりにくい言葉(例えば上のソースという言葉)などはできるだけ説明していきたいと思います。また、はじめから読んでいただくと大体の言葉の説明を加えていると思いますのが、それでもわからない語句がある場合は質問してください。本当はわかりにくい言葉は簡単な言葉として全て書き直してもいいんですが、本などを読む時にやっぱりわからない言葉がたくさん出てくるんですね、だからここで説明しながらそういう言葉を使っていくことによって書店に並んでいる本もわかりやすく読めるようになっていくと思います。

※ ブラウザによって使用できるものとできないものがあります。以下のように示したいと思います。
インターネット.gif (941 バイト)・・・インターネットエクスプローラー対応 ネットスケープ.gif (918 バイト)・・・ネットスケープ対応 なし・・・わかりません

デフォルトという言葉が出てくることがあります。デフォルトとは、初めから指定されている設定のことです。

more.gif (135 バイト)ではさらに詳しく説明しています。難しい人は特に読む必要はありません。

ステップアップ編

1. スタイルシートについて
  ・
スタイル指定の書き方
  ・スタイルシートの取り込み方

2. テキスト
  ・
≪SPANとDIVについて≫
   [基本編]
  ・文字の色を指定したい!
  ・文字の水平位置を指定しよう!
  ・文字を飾ろう!
  ・文字の大きさを変えよう!
   [標準編]
  ・段落の始まりに空白を入れたい!
  ・文字の間隔を指定しよう!
  ・文字に蛍光ペン!?
  ・文字の背景を画像にしたい!
  ・フォントを指定しよう!
  ・行間隔を指定しよう!
  ・スモールキャップ文字
  ・文字のスタイルを一気に指定!
  ・簡単リンク装飾
  ・簡単リンク装飾U
   [応用編]
  ・
文字の均等割付をしたい!
  ・≪ボックス要素とインライン要素≫
  ・文字の垂直位置を指定したい!
  ・大文字・小文字を指定!
  ・思いどうりに配置したい!
  ・ルビを指定しよう!
  ・禁断処理を追加しよう
  ・
改行処理を指定しよう!
  ・システムフォントを使おう!
  ・表示形式を変更しよう!

3. 背景
  [基本編]
  ・
背景を固定しよう!
  ・背景の敷き詰め方を指定しよう!
  ・背景画像の位置を指定しよう!
    [標準編]
  ・背景の指定をまとめてしよう!

4. ボックス
  [基本編]
  ・
≪指定の仕方≫
  ・枠線のスタイルを指定
  ・枠線の太さを指定
  ・枠線の色を指定
  ・ボックスのスタイルの一括指定
  ・マージンを指定しよう!
  ・文字と枠の間隔を指定
  ・ボックスの大きさを指定
  [標準編]
  ・
内容があふれる場合の処理 Part1
  ・内容があふれる場合の処理 Part2

5. 配置
  [基本編]
  ・
自由に配置を指定したい!
  ・重ね合わせの順序を決めたい!
  [標準編]
  ・
表示・非表示を指定しよう!
  ・回り込みを指定したい!
  ・回り込みの解除
  [応用編]
  ・
表示部分を指定したい!

6. リスト
  [基本編]
  ・
リストのマーク指定
  ・リストのマークに画像を使いたい!
  [標準編]
  ・
リストマークの配置を指定
  ・リストマークの一括指定

7. 効果
  [基本編]
  ・
グレースケールにしたい!
  ・色を反転させよう!
  ・X線フィルターをかけよう!
  ・色の透過を指定しよう!
  ・マスクをかけよう!
  ・方向を反転させたい!
  [標準編]
  ・
影をつけよう!
  ・影をつけよう!PartU
  ・ブレの効果を使おう!
  ・発光効果
  [応用編]
  ・
ウェーブをかけよう!
  ・画像を半透明にする

8. その他
  [基本編]
  ・
テーブルの表示を指定しよう!
  ・
カーソルの形を変更しよう!
  ・
スクロールバーの色を指定しよう!
  [標準編]
  ・
テーブルの表示速度をはやくしよう!
  ・フォームの入力形式を指定しよう!

 

リファレンス編
1. スタイルシートについて
  ・<LINK REL=STYLESHEET HREF="■" TYPE="text/css">
  ・<STYLE TYPE="text/css">〜</STYLE>

2. テキスト
  ・color:★;
  ・text-align:★;
  ・text-decoration:★;
  ・font-weight:★;
  ・font-style:italic;
  ・font-size:★;
  ・text-indent:★;
  ・letter-spacing:★;
  ・background-color:★;
  ・background-image:★;
  ・font-family:★;
  ・line-height:★;
  ・font-variant:★;
  ・font:★ ☆ ◆ ◇/■ □;
  ・A:link;A:visited;A:active;A:hover
  ・text-justify:★;
  ・vertical-align:★;
  ・text-transform:★;
  ・white-space:★;
  ・ruby-align:★;
  ・line-break:★;
  ・word-break:★;
  ・font:★;
  ・display:★;

. 背景
  ・background-attachment:★;
  ・background-repeat:★;
  ・background-position:★ ★;
  ・background-position:★;
  ・background:★ ☆ ■ □ ▲;

. ボックス
  ・border-style:※;
  ・border-◆-style:★;
  ・border-weight:※;
  ・border-◆-width:★;
  ・border-color:※;
  ・border-◆-color:★;
  ・border:★ ▲ ■;
  ・border-◇:★ ▲ ■;
  ・margin:★;
  ・margin-◆:★;
  ・padding:★;
  ・padding-◆:★;
  ・height:★;
  ・width:★;
  ・overflow:★;
  ・overflow-x:★;
  ・overflow-y:★;

. 配置
  ・position:★;
  ・z-index:★;
  ・visibility:★;
  ・float:★;
  ・clear:★;
  ・clip:rect(★,★,★,★);

. リスト
  ・list-style-type:★;
  ・list-style-image:url(★);
  ・list-style-position:★;
  ・list-style:■ ▲ ★ ;

. 効果
  ・filter:gray();
  ・filter:invert();
  ・filter:xray();
  ・filter:chroma(color=★);
  ・filter:mask(color=★);
  ・filter:fliph();
  ・filter:flipv();
  ・filter:dropshadow(offx=★,offy=■,color=▲);
  ・filter:shadow(color=★,derection=■);
  ・filter:blur(derection=★,strength=■);
  ・filter:glow(color=★,strength=■);
  ・filter:wave(freq=★,lightstrength=■,phase=▲,strength=☆);
  ・filter:alpha(opacity=★,finishopacity=■,style=▲,startx=☆,starty=□,finishx=△,finishy=◇);

. その他
  ・border-collapse:★;
  ・cursor:★;
  ・
scrollbar-3dlight-color:★;
  ・scrollbar-arrow-color:★;
  ・scrollbar-base-color:★;
  ・scrollbar-darkshadow-color:★;
  ・scrollbar-face-color:★;
  ・scrollbar-highlight-color:★;
  ・scrollbar-shadow-color:★;
  ・table-layout:★;
  ・ime-mode:★;


 

 

更によいページを目指すために
はじめに
1.色指定について

 

 


ホーム Q&A 情報掲示板 なんでも質問箱 実践編

back.gif (244 バイト) 戻る