2015年7月14日の記事を再編集しています。 CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。 しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。 今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。 CSS3で実装できるオシャレなサンプルコードまとめ 1. HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点｜株式会社LIG https://liginc.co.jp/web/h

HTML、CSSでコーディングを始めるときに各ブラウザが持っているデフォルトのCSSを一度リセットする目的のリセットCSS。今回は、現在使われているリセットCSSをまとめてみました。 リセットCSS とは？ 各ブラウザ(IE、FireFox、Chrome、safari等)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートは一般的に「リセットCSS」と呼ばれています。ブラウザのデフォルトスタイルを有効に使っていこうという考え方もありますが、ブラウザ間の表示差異(例えば、ブラウザ毎に文字サイズが変わったり、余白の広さが変わったりなど)に悩まされることも多々あり、それを解消するために一度まっさらな状態にリセットしてから CSS を書き始めるためのものです。 リセットCSS のメリットとデメリット メリット ブラウザ間の表示の違いを効率良く最小限に抑えるこ

HTML 5 + Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can

css3でアニメーションを使用するサイトが近頃増えてきました。背景としては、css3アニメーションのプロパティにほぼ対応しているスマホ端末の普及や、animationプロパティ未対応のIE9（IE6～IE8を含む）のシェアが低下してきていることが挙げられると思います。 つまり、css3アニメーションの対応ブラウザは「増加中」ということに他ならず、実装するサイトは更に増えていくのではないでしょうか。 今回は、そんなcss3アニメーションの実装時に参考できる22サイトを集めてみました！ 1：丸型オブジェクトにピッタリのアニメーションギャラリー 丸型オブジェクトに対して、様々なホバーエフェクトを実装しています。 何気なくマウスオーバーした時にこんな動きがあれば、注意を引きつけられそうですね！ http://tympanus.net/codrops/2013/05/30/simple-icon-h

「AniCollection」はCSS3を使ったアニメーションを70種類以上ダウンロードできるサイトです。さまざまなボタンが用意されており、マウスオーバーするとアニメーションが動きます。気になるアニメーションは複数まとめてダウンロードできますよ。 以下に使ってみた様子を載せておきます。まずAniCollectionへアクセスしましょう。アニメーション付のボタンがたくさん並んでいます。マウスオーバーすると実際の動きを確かめることができますよ。 アニメーションを作成しているCSSやJavaScriptのコードをその場で確かめることも可能。気に入ったらダウンロードして使うことができます。CSS3でアニメーションを作りたいと思っている方は必見ですね。ぜひご活用ください。 AniCollection （カメきち）

主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの

これからのプロジェクトに使ってみたくなるような素敵なアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。 今年もCSSの進化がすごかったですね。

毎日たくさんのコードを、実際に手を動かしながら勉強しているのですが、HTMLやCSSをいつも白紙の状態から書いているわけではありません。いつも必ず記述する部分は、テンプレートとしてそのままコピーしてから書き始めるようにしています。 インターネットで「HTML,CSS,テンプレート」と検索すると、HTMLとCSSのファイルを無料で配布しているサイトがたくさんみつかります。 高品質なデザインのものから、レスポンシブに対応しているものまでたくさんあるので、コードを見るだけも勉強になりますね〜。 今回はそういったデザインまで完成しているテンプレートではなく、HTML・CSSそれぞれのコードを書き始める際に、必要最低限は記述しておいたほうがよさそうなコードについて考えてみました。 レスポンシブ対応！HTMLテンプレート HTMLを書く際に、上記のコードをテンプレートとして使っています。 DOCTYP

こんなものがあるなんて今まで知りませんでした・・・ なぜ知らなかったのでしょう。勉強不足ですね。。。 今日紹介するのは、photoshopの「CSS3Ps」というエクステンションです。 シェイプレイヤーやテキストレイヤーのをcssで書き出しくれるという代物です。 もちろん名前の通りcss3対応です。 どんな風に書きだされるのかが気になる所かと思いますが、 順をおって説明していきます。 まずはダウンロード まずは下記URLからダウンロードします。 http://css3ps.com/ 右上の「free download」をクリックです！ ダウンロードしたファイルを開く ダウンロードしたファイルを開くと勝手にphotoshopへインストールしてくれます。 以下のような画面が立ち上がると思います。 photoshopを開いて、エクステンションを表示 もし今まで開いていたのであれば、 １回終

TL;DR 少し前にサイト制作でさりげなく使われている CSS テクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 Photoshop ののように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。シンプルな例では、以下のように背景写真と背景色を合成することが可能です。 .blended { background-image: url(face.jpg); background-color: red; background-blend-mode: multiply; } 効果一覧：multiply／screen／overlay／darken／lighten／color-dodge／color-burn／hard