デザイン

デザイン

PR

覚えているのが難しいCSSのプロパティと値、そんな時に役立つカンニングシート18選をご紹介します!

RankRED

RankRed is a place where you can find a lot of interesting and inspiring stuff about science and technology, internet, programming tools and plugins, robots, machines and high tech gadgets, and much more.

本記事は、18 Useful CSS Cheat Sheets of 2020 | With New CSS3 Tags
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

2,808 views

読了時間 : 約4分38秒

CSSは、おそらくマークアップ言語で書かれたドキュメントのプレゼンテーションを記述するための、唯一の本当のオプションであるため、フロントエンドのデザイナーと開発者の不可分な部分です。複数のウェブページのレイアウトを一度に制御することにより、多くの作業を省くことができます。

 

 

HTMLおよびXHTMLとともに、カスケードStye SheetsXULSVGXMLなどのXMLドキュメントに適用でき、それを使用して音声またはその他のメディアをレンダリング可能です。ほとんどの場合、CSSを学習すれば、CSSのブラウザーサポートは問題になりません。しかし、全てのCSSのプロパティと値を覚えておくことは、デザイナーにとって簡単なことではありません。

 

 

この問題に対処し、生産性を向上させるために、ほとんどの開発者はカンニングペーパーを使っています。これは、紛らわしいコードのスニペットをダブルチェックする時に、参考になります。あなたの作業を楽にするために、必要なすべての要素が一目でわかる、もっとも便利なCSSカンニングシートをご紹介します。これらは完全に無料なので、何かしらの料金を払う必要はありません。

 

 

18.WordPress CSS Cheat Sheet

 

 

 

 

WordPressに精通している方もいらっしゃるでしょうか。これは、ウェブ標準、美学、使いやすさに重点を置いた、最先端の出版プラットフォームです。このカンニングペーパーには、ブログの情報、リスト、ドロップダウン、投稿、コメント、著者、トラックバック、リンクマネージャータグなどが含まれています。

 

 

17.CSS Layout Cheat Sheet

 

 

 

 

この短いカンニングシートは、レイアウトメカニック、中心的な要素、一般的なコードの3つのセクションに分かれています。これは、HTMLフォーマットのウェブページひとつに利用可能です。

 

 

16.WordPress CSS Cheat Sheet For Beginners

 

 

 

 

WordPressの人気を高めているのは、そのカスタマイズ性です。それにより、CSSウェブサイトで、非常に具体的な側面をターゲットにすることができます。このページでは、デフォルトのボディクラススタイル、投稿、フォーマット、メニュー、ウィジェット、共通フォーム、WISIWYGエディタースタイルの、WordPressカンニングシートがあります。

 

 

15.Animations and Effects

 

 

 

 

このウェブページには、トランスフォームやトランジション、アニメーション、フィルターやターゲットが含まれています。すべてのプロパティは、構文とともに詳細に説明されています。もし興味があるのであれば、これらのインタラクションで、いくつかのインタラクションの方法や、トリガーアニメーション、トランジションを学ぶことができます。

 

 

14.CSS Properties

 

 

 

 

もし、ディスクリプションや、重要なCSSプロパティ、バリューを探しているのであれば、genauticaが提供するCSS_propertiesの簡単なインフォグラフィック以上のものはありません。

 

 

13.CSS Click Chart

 

 

 

 

CSS Click Chartには、要素を操作するためのサンプルコードが多数用意されています。たとえば、ボックスのサイズ変更、テキストシャドウの追加、キーフレームアニメーション、グラデーション、変換などのコードです。また、ライブデモとブラウザサポート情報も提供しています。

 

 

12.CSS Grid

 

 

 

 

名前が示すように、その究極のCSSグリッドチートシートを使用すると、任意のサイズの任意の数のグリッド(列と行の両方)を(テスト目的で)描画できます。

 

 

11.Media Queries

 

 

 

 

Media QueriesCSS3カンニングシートには、携帯電話、タブレット、デスクトップ用のコードが含まれています。

 

 

10.Flexbox

 

 

 

 

Flexboxレイアウト(フレキシブルボックス)モジュールは、それらのサイズが動的であるか不明である場合でも、コンテナ内にあるアイテム間でのスペースレイアウト、整列、および分散するための、より効率的な方法を提供します。このページは、これらのフレキシブルボックスをどのように実装すべきか、詳細を教えてくれます。

 

 

9.CSS Shorthand Cheat Sheet

 

 

 

 

これは、ボーダー、フォント、背景、例、色など、一般的に使用されるプロパティのパラメーターを示す非常に短いカンニングシートです。JPEFフォーマットでのみ使用することができます。

 

 

8.CSS CheatSheet

 

 

 

 

このカンニングシートには、属性、擬似クラス、フォント、色、構成、フィルター、エフェクト、トランジション、アニメーション、変換、配置、配置など、さまざまなCSSモジュールに関する詳細情報がパックされています。PDFフォーマットで利用可能です。

 

 

7.Practical CSS Cheat Sheet

 

 

 

 

これは、Toptalによるクイックリファレンスガイドです。これには、いくつかの最も重要なセレクター、プロパティ、ユニット、構文、その他の有用な短い情報が含まれています。

 

 

6.Interactive CSS Cheat Sheet

 

 

 

 

Interactive CSS cheat sheetは、プロジェクトに簡単にコピー、ペースト可能な、一般的なコードから成り立っています。インタラクティブなウィジェットを使用すると、グラデーション、テキストシャドウ、ボックス、背景、フォント、ボタン、変換、境界線などのスタイルを設定するためのコードを生成できます。

 

 

5.CSS3 Animation Cheat Sheet

 

 

 

 

これは、次のプロジェクトのためのプリセット、プラグアンドプレイアニメーションのコレクションです。これを実装するには、ウェブサイトにスタイルシートを追加し、アニメーション化する要素に、事前に設計されたCSSクラスを適用しなければなりません。手順は、これで全てです。

 

 

4.Mega CSS3 Infographics

 

 

 

 

プリント可能なCSS3カンニングシートには、現在のW3C仕様のすべてのプロパティ、セレクタータイプ、および値が含まれています。すべてのプロパティは、高解像度PDFで利用可能な、異なるセクションで提供されます。

 

 

3.CSS Almanac

 

 

 

 

これは、アルファベット順に整理された、CSSの多くの機能のクイックリファレンスガイドです。各要素をクリックすると新しいURLに移動し、クリックした要素に関する詳細情報(例とともに)が表示されます。

 

 

2.Comprehensive CSS3 Cheat Sheet

 

 

 

 

この究極のカンニングシートには、重要なCSS3タグの全てが含まれています。これは、目を引くインフォグラフィックスでデザインされており、PNGPDFフォーマットの両方で利用可能です。

 

 

1.Mega CSS Cheat Sheet

 

 

 

 

これは、合計29ページものCSS詳細のカンニングシートで、PDFPNGで使用可能です。きちんとした目次が付いた、小さな本として扱うことができます。背景、フォント、テキスト、グリッド配置などのすべての要素は、読みやすくするために異なる章に編成されています。

おすすめ新着記事

おすすめタグ