• Top
• Category
• Contact
• About

サイト構築 -制作

sponsorsr

HTML5, CSS3, jQuery, WordPress, Bootstrap, SublimeTextなど、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。

PDFや画像をダウンロードしたり、ブックマークしておいて、すぐに確認できるようにしておくと便利ですね。

• HTML5のチートシート
• CSS3, Flexbox, CSS3 Animationのチートシート
• jQueryのチートシート
• Bootstrapなどのフレームワーク
• WordPressなどのCMS
• エディタ関連のチートシート

HTML5のチートシート

HTML5 Mega Cheat Sheet

HTML5のタグ、ブラウザのサポート状況、Canvasなどが一枚にまとめられています。

HTML Vocabulary

HTMLの用語をインタラクティブに学ぶことができます。

CSS3, Flexbox, CSS3 Animationのチートシート

CSS Cheat Sheet

CSS3のプロパティ、セレクタ、疑似クラスなどがまとめられたチートシート。

A Visual Guide to CSS3 Flexbox Properties
翻訳版:CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

Flexboxで使用する各プロパティがどのように機能するのか、レイアウトにどのように影響を与えるか視覚的に解説した「CSS3 Flexbox ヴィジュアルガイド」。

Easing function

最近はアニメーションを実装するのはCSSがスタンダードになってきました。Easingの各アニメーションをCSSでどのように実装すればよいのかが分かります。

Animate.css
使い方:classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート

フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるスタイルシート。CSS3アニメーションを使った多くのスクリプトに利用されています。

CSS Vocabulary

CSSの用語をインタラクティブに学ぶことができます。

Can I use?

CSS, HTML, SVGなど、各ブラウザのサポート状況やバグが分かります。

jQueryのチートシート

jQuery Quick API Reference

jQuery 1.10, 2.0対応、セレクタやイベントなどのAPIがまとめられたチートシート。

jQuery Cheat Sheet

こちらも同様にjQueryのAPIがまとめられたチートシート。

Bootstrapなどのフレームワーク

Bootstrap 3 Cheat Sheet

Bootstrap 3で使われている全てのclass、スクリーンサイズの定義、グリッドのビヘイビアがまとめられたチートシート。

Font Awesome Cheat Sheet

Bootstrap 3にも採用されているFont Awesomeのアイコンのチートシート。

Foundation 5 Cheat Sheet

CSSベースのフレームワーク「Foundation」のチートシート。

CSS Front-end Frameworks

フロントエンド用の各フレームワークの基本機能を比較できます。

WordPressなどのCMS

WordPress theme development Cheat Sheet

WordPressのテーマ作成に役立つ情報がまとめられたチートシート。

The Time Saving Copy/Paste WordPress Cheat Sheet

WodrPressの便利なコードをコピペで利用できる時短用チートシート。

エディタ関連のチートシート

Sublime Text Keyboard Shortcuts

Sublime Textのキーボードショートカットをまとめたチートシート。

Emmet Cheat Sheet

マークアップが楽になるEmmetのコマンドをまとめたチートシート。

Chrome Devtools Cheat Sheet

Chromeのデベロッパーツールのショートカットをまとめたチートシート。

Related Posts

coliss