KEN WEB BLOG ~WEB・DTPスクール パソコン教室 KENスクールのインストラクターがつづるブログ~

【こちらの記事は、約4分程でお読みいただけます。】

皆さん、こんにちは！
いつもWebブログをご覧いただき、ありがとうございます！

今回は、CSS3の疑似クラス『：nth-child』をご紹介します。

この疑似クラスはどのように使用するかと言うと、
テーブル（表）やリストなどの見出し部分または、
奇数・偶数の行の部分に、背景色を入れたいときに有効です。

例としては、下図のようなレイアウトの場合です。

まずは、テーブルを作成します。

    <table width="300" border="0" cellspacing="0" cellpadding="0">
    	<tr>
		<td width="60">1.</td>
		<td width="235">KENSCHOOL</td>
	</tr>
	<tr>
		<td>2.</td>
    		<td>KenShool</td>
    	</tr>
    	<tr>
    		<td>3.</td>
    		<td>KENスクール</td>
    	</tr>
    	<tr>
    		<td>4.</td>
    		<td>Kenスクール</td>
    	</tr>
    	<tr>
    		<td>5.</td>
    		<td>ケンスクール</td>
    	</tr>
    	<tr>
    		<td>6.</td>
    		<td>けんすくーる</td>
    	</tr>
    </table>

シンプルなテーブルが完成。

テーブルが完成したら、後はCSSを適応させます。

上図の3つ目の記述がCSS3の疑似クラスになります。

『：nth-child(odd)』を指定すると、
「奇数行」の背景色・文字の色など、変更することができます！

奇数部分以外にも、指定することができます。

・偶数行に :nth-child(even)

・先頭行に :first-child

・最終行に :last-child

・特定部分に （この場合は3行目に）:last-child :nth-child(3)

・特定部分に ※後ろから（後ろから2番目に） :nth-last-child(2)

今回は、テーブルに適応させましたが、他にも見出しやリストなどにも使用可能です！！
ぜひ、お試しくださいね♪

--------------------------------------------------------------------------------

各種ブラウザ対策も万全！Web制作スキルは、
KENスクールで実務を通して学習しよう！

⇒【CSS基礎 + 上級レイアウト講座】
IE6の見栄えを整える際に、CSSのhackというテクニックを覚えるのは
必須になります。
CSS基礎講座では、はじめてでも安心のCSSレイアウトを組める学習を、
そして、CSS上級レイアウト講座では、どんなブラウザにも対応できる、
CSSの記述方法を伝授します。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 野口

【こちらの記事は、約3分程でお読みいただけます。】

皆さん、いつもKENスクールのブログを見ていただき、
ありがとうございます！

Webサイトを制作するときに、
1ページの中に情報を詰め込みすぎてしまうことは、ありませんか？

特にコーポレイトサイト（企業サイト）では、
企業として余裕を感じられる印象を演出したいため、
余白の作り方が非常に大事になります。

その余白を作る際に必要なのが、「マージン」ですね！

CSSでmargin指定を用いて余白を設けていきますが、
その時によく起こる現象...

「マージンの相殺」は、ご存知ですか？

要素（タグ）間のマージンが隣り合っているときは、
お互いのマージンが相殺され、一つになってしまう現象です。

例えば、上記の図のように、
上の<p>の下マージンに20px、
下の<p>の上マージンに40pxが設定されている場合、
合わせて60pxのマージンが入るわけではありません。

値の大きい40pxのマージンが適用されます。

※プラスの値の場合は大きい値が、
マイナスの値の場合は小さい値が適用されます。

※マージンの相殺は上下のマージンのみで、
左右のマージンには適用されません。

しかし、例外があります。

・floatを指定している要素と隣り合う要素間

・position：absolute；　を指定している

・position：fixed；　を指定している

上記の場合、マージンの相殺は発生しません。


このようにマージンをしっかり理解し、余白を生かした
Webサイトを制作しましょう！＾＾

--------------------------------------------------------------------------------

各種ブラウザ対策も万全！Web制作スキルは、
KENスクールで実務を通して学習しよう！

⇒【CSS基礎 + 上級レイアウト講座】
IE6の見栄えを整える際に、CSSのhackというテクニックを覚えるのは
必須になります。
CSS基礎講座では、はじめてでも安心のCSSレイアウトを組める学習を、
そして、CSS上級レイアウト講座では、どんなブラウザにも対応できる、
CSSの記述方法を伝授します。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 藤澤

【こちらの記事は、約5分程でお読みいただけます。】

皆さん、こんにちは！
いつもWebブログを見ていただいて、ありがとうございます！

短い期間で学習をする場合に、ソフトや言語の隅から隅まで、
ということは難しいですよね。。実際に勉強をしたとしても、
業種や会社によっては「まったく使わない」機能も出てきます。
知識としては有効であっても、実践的ではない機能は、やはり存在します。

スクールでは、極力「主要な機能、且つ実践的」なことを中心に勉強します。
もちろん、それ以外のことでも、インストラクターに質問いただければ
解説をさせていただきます＾＾ 気兼ねなく、ご質問してくださいね！
 

さて、今回はCSSのセレクタで、一般的に省略されることが多いですが、
それが原因で勘違いやミスを起こしやすいところを、ご紹介・解説させていだきます。

<div id="wrapper"> 
   
  <div id="global_navi"> 
    <ul class="menu"> 
      <li>ホーム</li>
      <li>製品情報</li>
      <li>会社概要</li>
      <li>お問合せ</li>
    </ul> 
  </div> 

</div> 
（※アンカータグ等は省略）

上記のHTMLにて、ulタグに対しスタイルをつける際に、
.menu{margin-left:20px;}
と書くことができます。

.menuがセレクタということになりますが、実はこの前には
「*」や「div」が入るのが厳密な書き方です。

*.menu{margin-left:20px;}もしくはdiv.menu{margin-left:20px;}

省略をした場合には「*」が入っているのと同じ意味になります。
ですので、もしこのHTMLの他の場所に
<p class="menu">とか
<ol class="menu">などがあった場合には、
そちらも同時にマージンの設定が行われる、ということになります。

div.menu{margin-left:20px}と書いた場合には、
<p class="menu">とか
<ol class="menu">には、スタイルはかかりません。

「*」の場合には、menuというクラスがついている全てのタグに対して
「div」を入れれば、menuとうクラスがついているdivタグ全てに対して
という意味になります。

KENスクールのDreamweaverのテキストに置き換えていいますと、
CSSパネルを使って設定をすると、
HTMLのタグを選択している場合には、初期設定でセレクタ名に
『#wrapper #global_navi .menu』と表記されており、
【省略化】ボタンを押せば、
『#global_navi .menu』や『.menu』に省略することが可能です。

この省略化ボタンを使うのではなく、手動で間を消す場面も出てきますが、
間違って半角スペースを消してしまい、
スタイルが適用されないというミスも、よく起こりがちです。

本来『#wrapper .menu』と省略することが可能ですが、
『#wrapper.menu』と間の半角スペースを消してしまうことが見受けられます。 
確かに、半角スペースは見落としやすいポイントですよね＾＾

『#wrapper .menu』はIDセレクタとClassセレクタ、
子孫セレクタを組み合わせたものなので、
「wrapperというID名がついている中にあるmenuというクラス名のついたタグ」
という意味になります。

ここでスペースを消してしまうと、
「wappaerというID名がついていて、さらにmenuというクラス名がついているタグ」

つまり・・・

<div id="wrapper" class="menu"> 
  
  <div id="global_navi">
    <ul class="menu">
      <li>ホーム</li>
      <li>製品情報</li>
      <li>会社概要</li>
      <li>お問合せ</li>
    </ul>
  </div>

</div>
 

というHTMLであれば、一番最初のdivタグにスタイルがかかる、というわけです。
『#wrapper.menu』は、置き換えれば『div.menu』と同じことになります。

重要なのは、IDセレクタを使おうが、クラスセレクタを使おうが・・・

子孫、子供、属性を使おうが、スタイルは必ず「何らかしらのHTMLタグ」に
付けるものということを理解しておく必要がある、ということですね。

ここさえしっかり理解しておけば、
「このセレクタが効かない」と困ることは、解決できるでしょう。
皆さん、ぜひ覚えておいてくださいね！

--------------------------------------------------------------------------------

CSSレイアウトをマスターしたいなら、KENスクールがおススメです♪

⇒【CSS上級レイアウト講座】
CSSが書けるようになった、でもまだまだ不安の残るあなたにおススメ。
より高度なWebサイトのレイアウト構築をマスターして、
Web制作に更なるスピードアップを図りましょう！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 磯貝

今回は、CSSの小技についてです。

CSSで余白などをつける際は「margin: 10px;」の様な数値を用いると思いますが、

この数値をマイナスにつけることが出来ます。

特に、マージンにマイナス方向の数値をとる事を「ネガティブマージン」と呼び、

通常では設定できないレイアウトをすることが出来ます。

今回のブログでは、数値をマイナス方向に付けることによって、

実現可能な小技を2種類紹介したいと思います。

1.ネガティブマージン

フロートをしている時と通常時で使用方法が変わりますが、

今回は通常時のお話です。

マージンをマイナス方向につけると、その要素を外側に引っ張ることが出来ます。

例えば、この例のように、見出しの下のボーダー以外は内側に揃えたい・・といった時、

発想を逆転して「ボーダーだけ外に出す」という処理をします。

通常は、ボーダー以外にパディングなどを施していきますが、

逆に見出しにだけネガティブマージンをつけると見出しだけ外に飛び出します。

このように、うまく使うことによりコーディングの簡略化になります。

2.テキストインデント

テキストインデントもマイナス方向につけることが可能です。

例えば・・・

注釈を用いるときなど、アスタリスク「＊」を文頭につけたい場合、

そのままの設定だと改行したときに、アスタリスクの真下から始まってしまいます。

このアスタリスクは、他の文字列より一文字分左にはみ出ていたほうが

文体としてきれいなので、pタグに「text-indent: -1em;」と入れます。

テキストインデントは段落の一番最初だけに効き、

さらに「1em」で一文字分、という調整が出来ます。

結果、アスタリスクだけ一文字分はみだしてレイアウトすることが可能です。

このように、マイナス方向で値をつけることにより、

通常だと複雑に設定しなければいけない部分も、簡単に設定することが可能です。

発想の逆転で、作品を制作していきましょう！

--------------------------------------------------------------------------------

この記事に書かれている内容は、KENスクールで学習することができます！

⇒【CSS上級レイアウト講座】
CSSが書けるようになった、でもまだまだ不安の残るあなたにおススメ。
より高度なWebサイトのレイアウト構築をマスターして、
Web制作に更なるスピードアップを図りましょう！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 馬場

今回ご紹介するのは、

CSS３で画像を鏡に映したように反転させる方法です。

今回は、下記の画像を使用します。

xhtmlの記述は、

<p><img src="img_gazou2.gif" alt="#" /></p>

このように書きました。

この画像を反転させるためにCSS3は、

img { -webkit-box-reflect: right; }

このように設定にします。

そうすると下図の様に見えます。

-webkit-box-reflectプロパティーを使用することにより、

鏡に映したように反転させた画像に見せる事が可能です。

反転させる方向の指定方法は４つあり、

上 ： above
下 ： below
左 ： left
右 ： right

になります。

CSS３には、まだまだ他にも色々な機能がありますので、是非一度お試しください！

 完成例はこちら
（ブラウザはGoogle Chromeで表示確認をしています）

 --------------------------------------------------------------------------------

パソコンスクール KENスクール渋谷校　Webインストラクター
http://www.kenschool.jp/school/shibuya/index.html

KENスクールでCSSデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

みなさん、こんにちは。

今回は「CSS3」についてです。

CSS3では新たなプロパティがたくさん増えて、

レイアウトの幅が大きく広がりました。

しかし全てのブラウザに対応しているわけではありません。
 

よって使用するには注意が必要となりますが、

今後、対応ブラウザは増えてくると思われます。

その中でも、CSSによるグラデーションについて、お話したいと思います。

CSS3では、 背景画像を作成しなくても、

CSSでグラデーションを背景に配置させることが可能となっております。

しかし、主要ブラウザのうちInternetExploreには対応しておらず、

Firefox、Safari,Google Chromeにのみ対応しています。

またFirefoxとSafari、Google Chromeで記述が異なり、

作成する時には、Firefox用とSafari、Google Chrome用の

2種類が必要になりますので注意が必要です。

では、実際に確認してみたいと思います。
 

まず以下のような、HTMLを用意します。

　　<p>KEN Webスクール・KEN Webスクール
　　KEN Webスクール・KEN Webスクール</p>

あと下記のCSSを用意します。

.gra{
　　width: 300px;
　　height: 40px;
　　text-align:center;
　　color: #fff;

　　background:-webkit-gradient(linear,center top, center bottom, from(#f59), to(#ffffff));
　　↑/* こちらはSafari,Google Chrome用になります */

　　background:-moz-linear-gradient(top, #f59, #ffffff);
　　↑/* こちらはFirefox用になります */

}

そして、このCSSを先ほど用意したHTMLの<p>タグに設定し、

ブラウザで確認すると、下図のように見ることができます。
(今回は、safariで確認をしています。)

それではCSS3による、グラデーションの指定方法になります。


Safari,Google Chromeの場合、

-webkit-gradient(linear,開始位置,終了位置, 開始の色,終了の色);


Firefoxの場合、

-moz-linear-gradient(グラデーションの方向,開始の色,終了の色);

と、指定をします。

まだまだ対応環境に制限がございますが、とても利便性の上がったCSS3。
 

是非一度お試し下さい！！

--------------------------------------------------------------------------------

パソコンスクール KENスクール池袋校　Webインストラクター
http://www.kenschool.jp/school/ikebukuro/index.html

KENスクールでCSSを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

今回ご紹介するのは、昔使われていたhtmlのタグである

marquee（マーキー）タグをCSS3で対応させる方法です。
 

ご存知の方もいらっしゃると思いますが、

まずはmarquee (マーキー)タグのご説明からしていきます。


マーキーとは、文字をスクロールさせることができるタグになります。
 

Internet Explorer が独自に拡張したもので、

Internet Explorer・Firefox・Safari・Operaがサポート
（※サポートされているのはHTMLタグになります。）

しているのですが、W3Cの規格に含まれていません。
 

昔は使用していたサイトもありましたが、

最近のWebサイトでは使用されることはありません。


ちょっとした情報として覚えておいてください！！
 

HTMLタグでの指定は↓

<html>
  <head>
  <title>マーキー</title>
    <style>
     div { width: 300px; border: solid 5px #fca; }
    </style>
  </head>
  <body>
    <div>
      <marquee>KENSCHOOL ケンスクール</marquee>
    </div>
  </body>
</html>

※HTML - marqueeタグ使用例

CSS3での指定は↓

overflow-x: -webkit-marquee; を加えるだけ。

※Safari・Operaで記述が変わります。
今回はSafariに対応。

※CSS3 - marqueeプロパティ使用例

どうでしたか？

今回マーキーを試してみて、懐かしい感じがしました。
 

新しいCSS3でマーキーに対応したプロパティがありますので、

興味があればチャレンジしてみてはいかがでしょうか？


プロパティの参考サイト
※CSS3のプロパティなのでSafariで見てください！

--------------------------------------------------------------------------------

パソコンスクール KENスクール池袋校　Webインストラクター
http://www.kenschool.jp/school/ikebukuro/index.html

KENスクールでCSSを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

<form method="post" action="ken.cgi">

<p><input type="text" name="name" size="30" /></p>

<p><textarea name="anq" /></textarea></p>

<p><input type="submit" value="送信" /></p>

</form>

input.fcs { width: 150px; }
textarea { width: 150px; height: 50px; }

<p><input type="text" name="name" size="30" class="fcs" /></p>


input.fcs { width: 150px; }
textarea { width: 150px; height: 50px; }
input:focus, textarea:focus { background-color: #fa9; }

--------------------------------------------------------------------------------

パソコンスクール KENスクール京都校　Webインストラクター
http://www.kenschool.jp/school/kyoto/index.html 

KENスクールでCSSを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

「あれ？スタイルシートで指定しているのに何も変化しない！」

という経験はありませんか？

通常プログラムで同じ物に複数回処理の指定をすると、

後から書いたものが「上書き」され優先されます。

<p>スタイルシートの優先順位</p>

p{color:#ff0000;}

p{color:#0000ff;}

上記のような指定をすると、後から書いた

p{color:#0000ff;}が優先され文字は青になります。サンプル１

ただし以下の場合はどうででしょう？

<p id="text">スタイルシートの優先順位</p>

#text{color:#ff0000;}

p{color:#0000ff;}

後から書いている「青」ではなく、

先に書いた「赤」が反映されています。サンプル２

実はスタイルシートには優先順位があります。

それぞれのセレクタに点数が付いており、

その点数の合計が多いものほど優先順位が高くなります。

下記の表を見てください。

先に書いてある「#text」は100点、後に書いてある「p」は1点です。

結果、優先順位は点数の高い「#text」になり

「スタイルシートの優先順位」は赤くなります。

さらに、子孫セレクタなどと組み合わせをすると・・・

<div id="header"><p id="text">スタイルシートの優先順位</p></div>

#header p{color:#00ff00;}

#text{color:#ff0000;}

p{color:#0000ff;}

上記の場合には最初に書いてある

「#header p」が100点+1点の合計101点となり

最も優先順位が高くなります。

結果、「スタイルシートの優先順位」は緑になります。サンプル3

スタイルシートを学習する時のポイントは、

「どんなセレクタを書いたとしても、それが何らかしらの

HTML要素をしていしている」ため

『どの要素にスタイルを適用しているか？』を把握することです。
 

さらに上記の優先順位をしっかり把握しておけば混乱することはありません。

理解が進むとスタイルシートも楽しくなります。

学習中の方も、これから学習をされる方も頑張りましょう^^

 --------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでCSSを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

CSS3を使用する事でアニメーションが再現できます！

JavaScript・Ajax、Flashで作りそうな、

画像をフェードイン・フェードアウトをさせるサンプルを作成してみました！！

※ブラウザはSafari・Google Chromeで確認してください。

*{margin:0; padding:0;}

 div{
    margin:0 auto;
    position: relative;
    width:500px;
    height:500px;
    background:#ab9;
 }

#img1 {
    position: absolute;
    top: 50%;
    left: 60%;
    margin-top: -157.5px;
    margin-left: -157.5px;
    opacity: 0;
    -webkit-animation: fadeInAndOut 5s ease;
}

#img2 {
    position: absolute;
    top: 50%;
    left: 60%;
    margin-top: -157.5px;
    margin-left: -157.5px;
    opacity: 0;
    -webkit-animation: fadeInAndOut 5s ease 5s;
}

#img3 {
    position: absolute;
    top: 50%;
    left: 60%;
    margin-top: -157.5px;
    margin-left: -157.5px;
    opacity: 0;
    -webkit-animation: fadeInAndOut 5s ease 10s;
}

@-webkit-keyframes fadeInAndOut {
    from {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

サンプルURL

http://web.kenblog.net/img_webblog/web093_img/sample.html

opacityというプロパティは透明度の指定になります。
 

rgbaというプロパティも同じように透明度を指定するものですが、

次回どんな違いがあるのかご説明いたします！！

opacityは全てのブラウザでは対応していません。
 

Safari4・Firefox3.5・Opera10で表現できますが、

IE(インターネットエクスプローラー)では表現できません。

値は0～1で指定します。

 1　　通常時
 0.9　　↓
 0.8　　↓
 0.7　　↓
 0.6　　↓
 0.5　　↓
 0.3　　↓
 0.4　　↓
 0.3　　↓
 0.2　　↓
 0.1　　↓
 0　　完全な透明

このプロパティを使い、配置した画像を透明にしています。

そして-webkit-animation、これがCSS3のプロパティです！

今回は3枚の画像をフェードイン・フェードアウトさせる設定をするため、

まず一つ一つの画像に対して…

#img1には→-webkit-animation: fadeInAndOut 5s ease;

#img2には→-webkit-animation: fadeInAndOut 5s ease 5s;

#img3には→-webkit-animation: fadeInAndOut 5s ease 10s;

と指定します。

これらは1つの画像の制御になります。

上記のプロパティに "fadeInAndOut 5s ease 5s;" とありますが、

最初の "5s" 部分は表示時間、つまり5秒を指定しています。

次の "ease" は、最初と最後に少し減速という意味になり、

表示のさせ方を指定するものです。

他にも最初に減速という "ease-in"といった指定もありますので、

色々調べて試してみましょう！！ 

※Flashでいうイージングです。

最後の "5s" は次の画像を表示させるまでの時間です。

一枚目の画像に指定がないのは最初の画像なので、

htmlファイルを開くと同時に表示するからです。

二枚目の画像は5秒後にフェードイン・フェードアウトさせます。

※一枚目が5秒でフェードアウトして消えていくので、
　それに合わせて表示させるため。

三枚目の画像は10秒後フェードイン・フェードアウトさせます。

※二枚目までが10秒かかっているため。

そして最後に@-webkit-keyframes fadeInAndOutですが、

これが画像のフェードイン・フェードアウトを

制御している指定になります。

この記述の中のプロパティのご説明ですが、

@-webkit-keyframes fadeInAndOut {
    from {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

●"from"は開始位置になります。

※Flashでいう1フレーム目。

●"50%"中間位置になります。

※ここは"何%"にするかで変わる。

●"to"は最終位置になります。

※アニメーションを動かすための最終位置。

opacityは上記の説明と一緒なので透明度の設定になります。

このプロパティを記述することで、画像が…

最初は不透明な(見えない)状態
   ↓
中間になると通常(配置した画像)時の画像
   ↓
最後に不透明な(見えない)状態

以上のように変化します。
 

このような記述で

画像にフェードイン・フェードアウトをさせることができます。

CSS3は対応ブラウザに制限がありあますので

実際には中々使わないかもしれませんが、

面白い機能が色々ありますので、

チャレンジしてみると面白いと思います！！

最後にもう一度。

上記でもご説明しましたが、

確認はSafariかGoogle Chromeでお願いいたします！

 --------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでCSSを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

今回は「CSS3」についてお話させていただこうかと思い、

情報をいろいろと調べていたところ、

”CSS3 ドラえもん”

という検索キーワードが出てきました！

見てみると、画像は使わずCSSのみを使用してドラえもんの絵を描いたそうです。

http://shopdd.blog51.fc2.com/blog-entry-932.html

コードは、なんと600行以上にもなるようです。

残念ながらIE8はまだCSS3に対応していないので、

カクカクした絵になってしまいますが・・・そんなカクカクした絵も良い感じです。

CSSだけで画像を作ろうと思ったその思い付きがすごい！

話がずれてしまいましたのがCSS3はまた次回に♪

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでCSSを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

こんにちは。

今回はCSSのテクニック「CSS Sprite」について紹介します。

CSSスプライトとは、

複数の画像を一つにまとめ、CSSで表示位置を変更するテクニックのことです。
 

通常、画像はボタンやアイコン等のパーツに分かれていますが、

それらをまとめて一つにすることで、画像の読み込みが１度で済みます。
 

それによって、リクエスト数を減らすことができ、

サーバへの負担が少なくなるのです。
 

また、ブラウザでリソース（画像）が再利用されるので、

ページの読み込み時間も早くなります。
 

現在「You Tube」や「Google」で使用されています。

メリット

• 　　画像ファイルをスライスする必要がない
• 　　ファイル数が少なくなり、管理が楽になる
• 　　読み込みの再に、リクエストが一回で済むので、読み込みが早い

デメリット

• 　　alt属性が使えない
• 　　背景画像のリピート表示ができない
• 　　更新する時に手間がかかる（サイズを変えるとCSSも変えなければいけないため）

以上の内容を踏まえ、用途に合わせて使えるようにしましょう。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでCSSを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

CSSを完全に習得しても・・・
（って習得できた！って思える人はいるのでしょうか・・？）
それでも実際の仕事では、全て上手く使いこなしていくのは難しいことです。
 

これはとっても残念なことですが、CSSの解釈が異なったり
バグが存在するブラウザがある限り続いていく問題です。

それを解決する方法としてCSSハック・・・
各々のブラウザにのみ対応したCSSを分けて記述する方法があります。

とても難しいそうな感じがしますね。

でもwebデザイナーとしては避けては通れません。

CSSの基礎を一通り習得した後は、定番のCSSテクニックを覚えて
CSSハックの適用方法も学んでおきましょう！

詳しくはKENスクールの「CSS上級レイアウト講座」で学習してみましょう。
 

出来れば併せて「ワークフロー」について大まかに把握しておくといいと思います。
 

デザインの仕様書をまとめた「CSSプランブック」などは
デザイナーによって作成される場合が多いのでぜひ知っておきましょう。

CSSプランブックとは・・・
例えば、スタイルの一括指定やプロパティを書く順序などの
ローカル・ルールを定めておくと作業の簡素化、効率化ができます。
 

ローカル・ルールを定めずに作業を進めると突貫工事になる危険性が高く、
CSSの無駄な記述が増えて肥大化にもつながってしまいます。
 

必須の作業ではありませんが得られる効果は大きいでしょう。

膨大な量のページのレイアウトをまとめていく作業・・・
回り道をしているようでこういった細かい作業も必要なのですね。

※参考文書　webcreators vol.51

--------------------------------------------------------------------------------

パソコンスクール KENスクール横浜校　Webインストラクター
http://www.kenschool.jp/school/yokohama/index.html

KENスクールでCSSを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

--------------------------------------------------------------------------------

KEN School　関西方面オープンしました!!

【関西ブログ】
http://www.kenschool.jp/info/contents/blog_kansai.html

【関西オープンページ】
http://www.kenschool.jp/info/contents/op_kansai.html
 

今回は
ホームページの印刷をできなくするテクニックを
ご紹介したいと思います。

普通にホームページを作成すると、印刷はそのままできるかと思いますが
HTMLのファイルの中か、CSSのファイルの中に

@media print {
     body { display: none; }
}

と上記の命令を入れると、印刷不可能になります。
 

HTMLに直接入力する場合は、命令文がCSS扱いになりますので、
headタグの中に

<style type="text/css">
 @media print {
     body { display: none !important; }
 }
</style>

という入力でOKです。
 

CSSのファイル内に記述する場合は、直接入力できますので、
もし作ったホームページが印刷されたくないという時には
使ってみて下さいね！！

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでHTMLを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

6月18日、「Firefox」v3の正式版がついに公開されましたね！
みなさんは、もうご使用されてますか？
WEB業界はどんどん進化していくので、みなさんもついていくのが必死かもしれませんが 取り残されないようについていきましょう！

今回はCSS3のお話です。
CSSにもバージョンがあって現在のページの多くがCSS2を採用しております。
現在策定中のCSS3ではどのような事ができるのでしょうか？
wikiペディアをみてみると・・・

Cascading Style Sheets, level 3 (CSS3) CSS3では全体がモジュール化され、ユーザーエージェントがどのモジュールに対応し、どのモジュールに対応しないか自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。現在、どのモジュールも勧告には至っていない。
ん～なんだか難しそうですね。
とにかく、CSS2以上にできる事が増えそうです。
では、実際試してみたいと思います。

今回は、「:target擬似クラス」についてご紹介したします。
このtarget擬似クラスは、現在firefox2にすでに実装されておりますので、 firefox2を使用して再現したいと思います。

「:hover擬似クラス」は、みなさんおなじみの「マウスがロールオーバーした時」の設定ですよね。
では、「:target擬似クラス」はどのようなものかと言うと、 よく皆さんが使用しているもので例えると、 クリックしたら画像が入れ替わるイメージギャラリーなど を作成した事ありませんか？

いままでJavascriptやFLASHを使用していたと思いますが、これが「:hover擬似クラス」 を使用すると可能になってきます。
簡単なものを作ってみました。

CSSで、画像が表示される部分をあらかじめ「display:none;」にしておきます。
クリックしたときに表示されるように「:target」 で、写真が表示されるようにします。

HTMLでは、ページ内リンクを作成し、target先に画像を指定しました。

実際の画面では・・・

クリックすると・・・