2021/12/13PHPのプログラミングができても、実はフロントエンド(CSS)が全くできないプログラマーって結構よく見かけます。実際の現場ではWebプログラマーでもフロントエンドの作業をすることは多いです。アサインできる人数が限られているプロジェクトなんかは尚更必要にせまられます。そんな訳でWebにおいてはバックエンドエンジニアでも、CSSの知識は必須です。基本についてエントリーします。書き方は大きく3つの方式があります。インラインスタイルシート内部スタイルシート外部スタイルシート順に見ていきます。1)インラインスタイルシートHTMLタグに直接CSSを書き込むやり方です。Definition、DTD、文書型宣言)です。ファイルを参照する方式です。CSSの基本文法CSSは「セレクタ」「プロパティ」「値」の3つで構成されます。内部スタイルシートで記述する場合は以下のようになります。CSSセレクタの種類セレクタとはスタイルを適用する対象のことです。いつくか種類があるので順に見ていきましょう。ユニバーサルセレクタ「*」(アスタリスク)と記述することで、すべての要素に装飾が適用されます。対してスタイル指定したものです。属性に対してスタイル指定したものです。セレクタはページ内で何回も設定することが可能です。セレクタはページ内で一度しか使うことができません。属性に対してスタイル指定したものです。要素名[属性名]属性がある要素にCSSを適用します。対してスタイル付けをするために使用するものです。代表的な物は以下の4つになります。プロパティを使用し装飾します。プロパティを使用し装飾します。スタイルを適用します。スタイルを適用します。対して特定の状態を適用します。タグに対しての疑似クラスです。タグ以外でよく使われる疑似クラスは以下になります。無効な要素に設定が出来ます。兄弟要素のグループの中での位置に基づいて選択、適用します。各セレクタを組み合わせてスタイルを設定していくユニバーサルセレクタ、要素セレクタ、クラスセレクタ、idセレクタ、属性セレクタについて解説しました。これまでは単体で指定していましたが、それぞれのセレクタを組み合わせて指定することもできます。区切ると絞り込むことができます。h1」のようにセレクタ間で半角スペースを空けると、header要素の中にあるh1要素という意味になります。}※親要素と一緒に指定すると、CSSが反映される優先順位が上がります。対象を詳しく指定しているセレクタが優先される要素にクラスを掛け合わす半角スペースを空けないケースです。ついている要素という意味になります。B(子セレクタの指定)セレクタの次に「>」を入れセレクタを指定することで、指定の親要素内の一階層下の子要素に装飾が適用されます。B(隣接セレクタの指定)セレクタの次に「+」を入れセレクタを指定することで、指定の要素に直後に隣接した要素に装飾が適用されます。"(カンマ)を入れセレクタを指定することで、複数の要素に同じ装飾が適用されます。#tomato;}CSSの優先順位CSSでは原則として、よりタグに近いところで指定されたスタイルや、より後から読み込まれたスタイルが優先されます。1)最後に記述したスタイルが有効2)セレクタの種類によって優先順位はかわるセレクタの種類によって優先順位は変わります。指定すると最優先となります。要素セレクタ以上です。【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)基礎を終えた方に最適!基礎レベルから一気にプロレベルへ!JavaScript、CSSの基礎~実践までを最短で学習。世界が変わる19時間。気づいたことや新しい発見など情報を発信していきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。独学で学習するなら動画学習が断然おススメ!Laravelが学べる評判の動画学習サイト3つご紹介します!PHPエンジニアとしての就職、転職、フリーランスに関しての情報はコチラ!Laravelが学べるプログラミングスクールに関しての記事をまとめています。アプリのチュートリアルをよく見ますよね。/まとめ環境構築PHPフレームワークのひとつであるLaravelを専門に書いている学習サイトです。