Home > CSS ブログ記事 一覧

KEN WEB BLOG ~WEB・DTPスクール パソコン教室 KENスクールのインストラクターがつづるブログ~
CSS3でアニメーション
- 2010年7月14日 12:11
- CSS
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
- Comments (Close): 0
- TrackBacks: 0
css3で絵を描く
- 2010年7月11日 17:24
- CSS
今回は「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
- Comments (Close): 0
- TrackBacks: 0
CSSスプライト
- 2010年6月 7日 22:58
- CSS
こんにちは。
今回はCSSのテクニック「CSS Sprite」について紹介します。
CSSスプライトとは、
複数の画像を一つにまとめ、CSSで表示位置を変更するテクニックのことです。
通常、画像はボタンやアイコン等のパーツに分かれていますが、
それらをまとめて一つにすることで、画像の読み込みが1度で済みます。
それによって、リクエスト数を減らすことができ、
サーバへの負担が少なくなるのです。
また、ブラウザでリソース(画像)が再利用されるので、
ページの読み込み時間も早くなります。
現在「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
- Comments (Close): 0
- TrackBacks: 0
CSSとWebデザイナー
- 2010年2月 6日 15:45
- CSS
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
- Comments (Close): 0
- TrackBacks: 0
ホームページを印刷不可にする
- 2009年9月28日 15:58
- CSS | HTML / XHTML
今回は
ホームページの印刷をできなくするテクニックを
ご紹介したいと思います。![]()
普通にホームページを作成すると、印刷はそのままできるかと思いますが
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
- Comments (Close): 0
- TrackBacks: 0
CSS3【:target擬似クラス】
- 2008年7月29日 11:34
- CSS
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先に画像を指定しました。

実際の画面では・・・

クリックすると・・・

- Comments (Close): 0
- TrackBacks: 0
Home > CSS ブログ記事 一覧


