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

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先に画像を指定しました。

実際の画面では・・・

クリックすると・・・