WordPressのCSSを学ぶための10の簡単なヒント

CSSの学習は、特にどこから始めればよいのか、行き詰まったときにどの用語を検索すればよいのかわからない場合は、大変な作業になる可能性があります。

CSSはスタイリング言語であり、JavascriptやPHPのような完全なプログラミング言語ではないため、特にHTMLの知識がある場合は、実際にはかなり簡単に習得できます（この投稿の目的のために持っていると思います）。

私たちのブログ調査では、圧倒的な数の皆さんが、ゲームを強化してCSSに慣れたいと言っていました。そのため、最近、CSSを学習するための150以上のリソースのリストを公開しました。これは、特に一緒に始めるのに役立ちます。この郵便受け。

今日は、何年も前に始めたときにCSSを学ぶのに役立ったワークフローとヒントを紹介します。 ヒント1から始めて、リストを下に向かってCSSをマスターします。

読み続けるか、次のリンクを使用して先に進んでください。

• 基本構造
• シンプルなセレクターとプロパティで練習する
• ボックスモデルを暗記する
• 行うことによって学びます
• 幅と高さでコンテンツを配置
• フロートとポジショニング
• 高度なCSS
• CSSを使用してサイトを複製する
• プリプロセッサ
• フレームワーク

1.基本構造

まず最初に：独自のCSSを作成する方法を学ぶには、CSSを適切にフォーマットする方法を知る必要があります。 これを行うには、実際には2つの正しい方法がありますが、そのうちの1つは、より整理された状態を維持するのに役立ちます。

HTMLは、WordPressサイトで作業するときに最初に学習する言語であることが一般的であるため、最初にHTMLと同様の方法で書き出すことにより、CSS構文を学習するのに役立ちます。

CSSがとる基本的な構造は次のとおりです。

サイトの要素に実装するスタイルがあまりない場合は簡単ですが、CSSに慣れてくると、要素に複数のスタイルが必要になります。このような構造は、乱雑になり、速くなる可能性があります。

そのため、CSSを書き出すためのより効率的で整理された方法があります。

これで、この例で使用されている用語を掘り下げ始めることができます。 これらの各用語は、CSSの基本的な構成要素であり、クラス、ID、セレクター、プロパティ、および値です。 プロパティと値は、宣言と呼ばれるものも構成します。

これは、独自のCSSを作成する方法を学ぶための優れた出発点であり、開始すると、WordPressファイル内のどこにこれらすべてを書き留めるべきか疑問に思うかもしれません。

WordPressのインストールでは、おそらくすでに推測しているように、 .cssで終わるファイルはすべてCSSファイルです。 探す必要のあるメインファイルはスタイルシートで、 style.cssというラベルが付いています。 これは、テーマのデザインのほとんどまたはすべてが、色、フォント、基本的な画像、および場合によってはテーマのレイアウトの一部に関して保持される場所です。

また、 custom.cssと呼ばれる事前に作成されたテーマのファイルに気付く場合があります。これは通常、テーマに変更を加えてほしい場所です。 このファイルに変更を加えると、テーマのスタイルシートにある既存のスタイルが上書きされます。

テーマにプラグインを追加すると、フォルダーにCSSファイルが含まれる場合があり、プラグインのルックアンドフィールのスタイルを設定するために使用されます。

2.シンプルなセレクターとプロパティで練習する

次は、基本的なセレクターとプロパティ、およびそれらがテーマでどのように機能するかについて学習します。 たとえば、ヘッダーの場合はh1 、 h2 、 h3 、段落テキストの場合はpなどのセレクター、およびfont-familyやbackground-colorなどのプロパティ。

自分のWordPressブログを実際に開始しなくても、これらの新しいスキルを練習して、実際に行っている変更を確認する簡単な方法があります。 W3Schoolsには、CSSに関する大量の情報と、コードを変更できるライブの例があり、ボタンを押すだけで、行った変更をすぐに確認できます。

例が表示されたら、[自分で試す]ボタンをクリックするだけで、基本的なCSSをテストできるウィンドウが開きます。

3.ボックスモデルを暗記する

私は、すべての情報をメモリにコミットするのではなく、最も一般的な情報を参照することを提唱しています。 記憶が足りないことが原因かもしれませんが、オンライン上に素晴らしい参考文献がたくさんあるからだと思います。

ハートビート内で、知らないセレクターやプロパティを簡単に検索できます。 必要なのは、GoogleやBingなどのお気に入りの検索エンジンに簡単に問い合わせるだけで、必要なすべての情報はそこからクリックするだけです。

幸いなことに、学ぶのは難しくありません。正直なところ、私がそれを覚えることができれば、あなたも問題はないはずです。 本質的には、コンテンツ領域、パディング、境界線、およびマージンが含まれます。

4.行うことによって学ぶ

CSSに慣れてきたら、完全に基本的なデザインのテーマを選択し、スタイルシートを編集してスタイルを変更することで、CSSを実際に実践することをお勧めします。

単純な変更がテーマに大きく影響する場合と、それほど影響しない場合があることを理解することが重要です。 最終的には、できる限り練習することで、行った変更を視覚的に確認し、コードを書くアクションを最終結果に結び付けることができます。

より壮大なスキームでは、ドットを接続できるようになると、CSSをすばやく作成できるだけでなく、Webの設計と開発にとって重要なタスクとなる将来の問題のトラブルシューティングもできるようになります。

WordPressサイトに無料でインストールできる優れたテーマをいくつか紹介します。 それらのすべてが、テーマが必ずしもどのように見え、機能する必要があるかを完全に表現しているわけではありませんが、単純なCSSでテーマを変更する方法を学ぶための優れた出発点です。

ホワイトスペクトラム

White Spektrumテーマは、メインコンテンツ領域、サイドバー、ヘッダー、およびフッターを含む共通のレイアウトを持つ単純なテーマです。

フォントやリンクに関しては、色のスプラッシュを除けば、操作するのはわかりやすくシンプルなテーマです。

創設者

上記のこれらのミニマリストのテーマを使用しても、まだ認識していないものの数に少し圧倒されていると感じるかもしれません。それは問題ありません。 この投稿の各セクションをチェックすると、すべてがもう少し一緒になり始めるはずです。

5.幅と高さでコンテンツを配置します

これらのテーマの1つをインストールしたら、コンテンツ領域とセレクターのさまざまな長さと幅を入力して、レイアウトの変更を開始することもできます。

これは次のステップの前兆であり、WordPressテーマのさまざまなレイアウト領域に慣れることができます。

6.フロートとポジショニング

これは、CSSだけでレイアウトを作成できるため、CSSが少し扱いに​​くい傾向がある場所です。特に、フロートとポジショニングです。 問題は、これらのプロパティはレイアウト全体を作成するように設計されておらず、CSSレイアウトを更新するためのドラフトが存在することです。

今のところ、これは多くの人が自分のレイアウトを正しくするための一般的な方法です。 上記のリストを含め、すでに存在するテーマを観察し、フロートと位置の使用によってそれらがどのように異なるかを確認することをお勧めします。

7.高度なCSS

この時点で、CSSのコツをつかみ始めていますが、まだまだ発見すべきことがたくさんあります。

• 疑似クラス–マウスのホバーや、他の要素に関連する特定の場所への画像の配置など、要素の特定の状態を定義するために使用されます。
• 複雑なセレクター–より高度なセレクターを使用して、スタイリングをさらに具体的にすることができます。
• CSS3アニメーション–画像やボタンの上にマウスを置くと、フェード、ポップ、またはその他のトランジションが作成されます。
• CSS3メディアクエリによる応答性–応答性の高いテーマを作成する最も簡単な方法の1つは、メディアクエリを使用することです。
• 変換–選択したコンテンツ領域のサイズと形状を制御します。
• At-rules –フォントやスタイルシートなどをテーマにインポートするために使用されます。
• グラデーション–画像を使用せずにテーマにグラデーションを追加します。

これらは、テーマのデザインが実際に形になっているのを実際に見ることができる要素の多くです。 スキルのテストを開始するのに最適な時期です。

8.CSSを使用してサイトを複製します

ベルトに関するこれらすべての知識があれば、より頑丈なベルトを入手する必要があるかもしれませんが、さらに重要なことは、テーマの基本的なシェルを使用し、独自のCSSスタイルを最初から追加することで、スキルを実際に実践できることです。

学習を進めるためにできる最も役立つことの1つは、実際のアプリケーションで知識を実践することです。 好きなサイトを見つけて、空白のWordPressテーマでCSSを使用してできる限り複製することをお勧めします。

もちろん、すべてを完璧に仕上げることはできないでしょうし、CSSだけでは複製できない要素がたくさんあるかもしれませんが、CSSに慣れるための優れた方法です。

使用できる優れた無料のスターターテーマを次に示します。

• BlankSlate

  

  これは、それが得るのと同じくらい骨の折れるものです。 このテーマにはHTML5しかないため、スタイルの衝突を気にせずにCSSを自由に追加できます。 ただし、テーマのスタイリングを開始するために必要なものはすべて付属しています。

• HTML5空白

  

  HTML5ブランクは、ボイラープレートのWordPressテーマであり、スタイリングが含まれていますが、それほど多くはありません。 CSSを最初から始めることにあまり熱心でないなら、それは素晴らしいスタートです。

• アンダースコア

  

  少し冒険的で、より高度なスターターテーマを試したい場合は、アンダースコアが優れたオプションですが、2つのプリロードされたテーマサンプルスタイルが付属しているため、気の弱い人には適していません。 また、優れた学習ツールとなる高度なテクニックとコーディングも含まれています。

GitHubにはHTML5リセットWordPressテーマもあります。 少し高度な機能が含まれていますが、それが最終的に価値のあるスターターテーマになっています。

9.プリプロセッサ

CSSの詳細を理解したら、プリプロセッサ、特にSASSとLESSについて学ぶことをお勧めします。 これらは両方ともCSSを整理するのに役立つため、作成がはるかに簡単になり、将来の編集にアクセスしやすくなります。

プリプロセッサを使用すると、CSSがクリーンでわかりやすくなり、Web開発者の間ですぐに不可欠なスキルになります。 どちらが最適かについては議論が続いていますが、SASSはこれまでで最も使用されているプリプロセッサになる傾向があります。

WordPressのコンテキストでSASSを試してみたい場合は、Bonesテーマを確認してください。 ほとんどがHTML5で構成されているため、すでに含まれているSASSの組み込みビットを使用してスタイリングを試すことができます。

10.フレームワーク

Web開発では、フレームワークは動的なWebサイトを作成するための構造です。 最終的に、フレームワークの目標は、機能を失うことなくサイトを高速化することです。

CSSを使いこなせば、フレームワークを使用してテーマ開発をスピードアップできます。

最も人気のあるフレームワークの1つは、TwitterBootstrapです。 箱から出してすぐに応答するように作成されており、SASSとLESSの両方、および多くのカスタムCSSコンポーネントを使用します。

まとめ

学習のためのシラバスと、途中で役立つヒントを備えているので、CSSはあなたが理解するのにあまりにも圧倒されるべきではありません。 さらに、WordPressテーマのスタイリングを試す準備ができているはずです。

CSSとWordPressの学習に関するその他のリソースについては、他の投稿をご覧ください。WordPressのCSSの学習と参照に関するメガガイド：150以上のリソースとWordPressの初心者からプロまで：200以上のキャリアアップリソース。

• CSS