「きちんと」CSSを学びたいですか?2015年に公開された最新のCSSリファレンス
CSSリファレンス-codrops
CSS Reference – codropsAn extensive CSS reference with all the important properties and info to learn CSS from the basics
すべての重要なプロパティとインフォメーションで、基本からCSSを学べる大規模なCSSのリファレンス
多くのサイトで紹介されているのと、あまりに自分がこのサイトを気に入ってしまっているので今回は記事ではなく実質的にサイト自体の紹介です。現時点、知る限りCSSのリファレンス(資料)として、国内外含めて一番使いやすいと感じたのは、このcodropsのCSSリファレンスです。今年の2月に公開されたものですので、当然全てが最新の、今一番必要とされている形でまとめてあります。
仮に英語を全く読まない使い方をして一番有効な部分は、それぞれのページにあるLive Demoです。HTMLとCSSと実際の表示、そして一番右の編集マークから自分で編集して、コードがどう作用するのかをリアルタイムで確認する事ができます。
また、このCSSリファレンスはとても有益なものですが、単にこのサイトにある他の有益な情報を理解するのに役立つひとつのコンテンツとも言えます。codropsについて全てを語るにはたくさんの文章が必要になるので、適当ないくつかのページを開いて、気になったものをそれぞれ確認してください。
今すぐにCSSのについての実用的な情報が得たい場合はcodropsのチュートリアル記事を読むことをお勧めします。
CSSやHTMLは言ってしまえば、わりと適当に書いてもそれなりに望んだとおりの表示がされます。逆にきちんと理解しようという意識がなければ、何年経っても初めて1ヶ月の頃と変わらないコードを書き続ける人になってしまいます。(特に、CSSなんてイージーなやつ1週間で完璧に覚えたぜ!な人には今一度リファレンスを読んで欲しいです。きっと知らない便利なのがいっぱいあるので)
海外サイトなのでゼロからCSSについて知りたいという人には厳しいと思いますが、基本的なことはわかるけど、もっとCSSについて知りたいという人にお勧めのサイトを聞かれたら「codrops!codrops!」と言っておくといいかもしれません。
Materialize - マテリアルデザインCSSフレームワーク
Materialize – A Material Design CSS FrameworkGoogle’s Material Design is aimed to work well on the Web and also on mobile apps.It’s gaining popularity with developers and if you want to adopt it too, there are many ways to implement Material Design on your site.
You can use Polymer or Angular, or you can use Materialize. Materialize is a CSS framework based on Material Design principles with Sass support for better development. It carries default styling for easy use, and has detailed documentation.
Googleマテリアルデザインはwebやモバイルアプリケーションをよく機能するよう目指したものです。それはデベロッパーに人気を得ており、そしてもしあなたがそれを採用することを望むなら、あなたのサイトにマテリアルデザインを導入する多くの方法があります。
あなたはPolymerやAngular、あるいはMaterializeを使うことができます。Materializeはもっと良い開発に対するSassサポートで、マテリアルデザインの原則に基づいたCSSのフレームワークです。それは手軽に使えデフォルトスタイリングを伴っており、そしてドキュメンテーションについて詳しく述べました。
マテリアルデザインはアプリとモバイル用のサイトばかりで、PC用サイトでマテリアルデザインを使ったサイトはまだまだ少ないように見えます。個人的にはガイドラインを読むほど「マテリアルデザイン自体は良いと思うけどめんどくさい」感じがしちゃうんですよね。何より動きが多いという部分が、しんどそうなんですよねー。
ということで面倒だけどマテリアルデザインのサイトを作ってみたい人はMaterializeを使うといういい選択肢があります。Materializeは、CSSとjavascriptで構成されたバージョンとSassバージョンが用意されているので好きなほうを使うことが出来ます。
右上にぽこぽこ出てくるダイアログのデモを見て、「あー普通だったら視界に入らない位置でも、動きをつければ注目させれるのか」ということを今更理解しました。タップ位置以外が動きの始点になるケースって、例えばこういうことだったんですね。
CSS3 Transitionアニメーションのためのベストなリソース
Best Resources for CSS3 Transition AnimationsAlthough JavaScript is seen as a reliable language for animation CSS3 has also become a great choice.Transition effects can be used even in browsers where JavaScript has been disabled.
JavaScriptがアニメーションのために頼りになる言語として見られますが、CSS3は同様に大きな選択肢になりました。TransitionエフェクトがJavaScriptが使用できないブラウザでさえ使うことができます。
CSS3のTransitionエフェクトに関するデモとフレームワークのまとめですが、jQueryが必要なものも含みます。animate.cssが割と好きです。
Best Resources for CSS3 Transition Animations17の素晴しいCSSナビゲーションメニューのデザイン
17 Awesome CSS Navigation Menu DesignsIn this post i have pulled together 17 CSS navigation menu designs to help give you ideas to be used in developing the navigation menus of your site.
このポストは17のCSSナビゲーションメニューデザインが、あなたのサイトのナビゲーションメニューを開発する為にアイデアを与える手助けになります。
斜めメニューはかなりトリッキーなナビゲーションですが、ぽこぽこした動きがすごく気持ち良いです。
17 Awesome CSS Navigation Menu Designsデリケートなクリックフィードバックエフェクト
Subtle Click Feedback EffectsA set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases. The effects are done with CSS animations mostly on pseudo-elements.
モバイルアプリケーションショーケースでスクリーンタップの視覚化に触発された、クリック、あるいはタッチインタラクションのためののデリケートなエフェクトセット。
上のものほどオーソドックで使いやすい、下に行くほど見たことのないようなトリッキーなエフェクト、という傾向です。
Subtle Click Feedback Effectsツールチップスタイルのインスピレーション
Tooltip Styles InspirationA small collection of various hover tooltip styles and effects for your inspiration.sing CSS transforms, border-radius and SVG shapes we can create modern looking and interesting tooltips.
あなたのインスピレーションのための、ホバーツールチップのスタイルとエフェクトの小さいコレクションです。CSS transformsとborder-radius、SVGを使ってモダンに見える、そして面白いツールチップを作成します。
リストのひとつめでcodropsについて書きましたが、去年投稿された中で実用的かつcodropsの良さがきっと伝わるツールチップに関する記事です。
記事だけ見るとツールチップの種類が2つしかないように見えますが、View demoをクリックしてください。「CLASSIC、ROUND、CURVED、SHARP、BLOATED、BOX、COMIC、LINE、FLIP」のタイプの違うツールチップを見ることができます。zipでまるごとソースをダウンロード出来るのもポイントです。
コメントを残す