手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて
コピペで使える！ CSSで凝った背景を作るサンプル集 | ライフハッカー・ジャパン
「CSS Gradients with background-blend-mode」はCSSの「background-blend-mode」を活用した背景サンプルをたくさん紹介しているサイトです。ウェブデザインをやっている方には非常に参考になるサンプルばかりです。 以下に使ってみた様子を載せておきます。 まずCSS Gradients with background-blend-modeにアクセスしましょう。 このように「background-blend-mode」を使ったサンプルが用意されています。CSSが表示されていますが、値を変更するとその場で適用された背景を閲覧できますよ。 サンプル集の下部には、実際に画像を使用した場合とのファイルサイズの違いが比較されています。CSSだけで実現するほうが圧倒的にファイルサイズが軽くなりますね。ウェブデザイナーの方はぜひ学習の参考に使ってみてくださ
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
34 Flat Website Layouts for Design Inspiration - DesignM.ag
The flat metro-style design trend has only been active within the community for a couple of years. The original designs started with Microsoft and have grown in complexity ever since. Specifically I have noticed a lot of designers working with flat CSS3 buttons, links, icons, and other UI features. I want to dedicate this showcase towards flat website interfaces. The gallery includes 34 examples o
25 CSS3 Free Buttons For Designers | Creative Nerds
February 11th, 2013 Freebies As a web designer or web developer its always handy to have some free sophisticated predefined CSS3 buttons, which can be incorporated straight into your design projects. Its a huge time saver having pre maid buttons, which you can import straight into your web design project . This is a great compilation of the best CSS3 free buttons all in one blog post to download
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
iPhoneサイト(スマートフォンサイト)制作のためにCSS3でPhotoshopのレイヤースタイルを再現する方法 | HTML5でサイトをつくろう
スマートフォンサイトを制作する上で便利なCSS3。 必要最低限まで画像の使用を減らし、スマートフォンサイトのデザインをスムーズにコーディングすることができます。 また、画像を使わずにCSS3を使ってスマートフォンサイトのデザインを実現すれば、読み込み時間や容量の軽いサイトを制作でき、サイトの最適化へつながります。 最近では海外の便利なジェネレーターサイトがたくさんあり、誰でも気軽にソースをつくることができます。 しかし、実際に自分がデザインしたサイトをコーディングする際には、やはり独自でそれぞれのコードの使い道を知る必要があります。 CSS3の記述は従来のCSSとは違い、少し複雑な記述が必要となります。 今回はそんなCSS3の記述を、サイトデザインでよく使われるPhotshopのレイヤースタイルを再現する方法として一通り紹介します。 ※iPhoneサイト（スマートフォンサイト）制作のため、
CSS3を使ったボタンを簡単に作成できるサイト「CSS3 Button Generator」 | ライフハッカー・ジャパン
「CSS3 Button Generator」は、CSS3を使ったボタンが、誰にでも簡単に作れちゃうサイトです。色や影やグラデーションをお好みに応じて設定できますよ。さらに、他のユーザが作ったボタンも閲覧可能です。コードもはき出してくれるので、コピペですぐに利用できます。 以下に使ってみた様子を載せておきます。 まずは、CSS3 Button Generatorにアクセスしましょう。 色などを設定します。テキストの影など細かい部分も調整できます。 右側に、コードが自動的に生成されるので、コピペして使いましょう。さらに「SAVE」すると、他のユーザと共有できます。 他のユーザが作ったボタンがずらり。いいなーと思うボタンがあれば、そのコードも取得できます。ボタン作成を考えている方は、是非お使いください。 CSS3 Button Generator [via delicious] （カメきち）
画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない？という疑問を抱き実際に作ってみました！ 今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品！ CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2013年チェックしておきたいスタイルシートやスクリプトのスゴ技たち -Top Pens of 2013
Page Not Found - NxWorld
Media Queries
CSSをもっと使いこなしたい人用のいろいろなテクニックが見られるサイトのまとめ
Loading...