WEBサイトを作るVOL04CSS(スタイルシート)の基礎CSS(スタイルシート)の基本を解説した上で、実際にCSSを書いてみてどのように適用されるか確認していきます。Sheet」の略で、これを「スタイルシート」と呼びます。CSSはHTMLの表示を整える役割があり、必ず必要というわけではありませんがほとんどのWEBサイトで使用されています。HTMLはコンテンツの構造を担当し、表示を整える部分はCSSが担当します。基本的な書き方からみていきましょう。gray;}CSSは3つのパーツから構成されます。セレクタ宣言ブロックプロパティセレクタ「セレクタ」はCSSを適用する場所を特定します。上記のように「body」であればbody要素に適用することができます。同じようにh1要素なら「h1」と指定したり、p要素なら「p」のようにHTMLの要素名で指定することができます。これを「タイプセレクタ」と呼びます。セレクタはいくつか種類があり、全ての要素に適用する「ユニバーサルセレクタ」、id属性で指定する「IDセレクタ」、class名で指定する「クラスセレクタ」、属性で指定する「属性セレクタ」などがあります。ユニバーサルセレクタユニバーサルセレクタは全ての要素を対象にするセレクタで、次のように「*」を使って指定します。blue;}IDセレクタIDセレクタはHTML要素のID属性を対象にするセレクタで、「#属性名」の形式で指定します。blue;}この場合は、指定したid属性を持つ要素のみにプロパティを適用します。class="text">コンテンツのテキスト2</p></body>クラスセレクタクラスセレクタはHTML要素のclass属性を対象にするセレクタで、「.クラス名」の形式で指定します。blue;}この場合は、指定したクラス名「text」を持つ要素のみにプロパティを適用します。class="text">コンテンツのテキスト2</p></body>IDセレクタとクラスセレクタは同じように見えますが、IDセレクタの方が優先度は高くなります。その代わり同じIDを複数の要素に指定することはできません。一方で、class名は同じ値を複数の要素に指定できるため、共通したCSSを適用したい場合に便利です。属性セレクタ属性セレクタはHTML要素の任意の属性に対してCSSを適用したいときに指定します。5px;}この場合は、type属性に「text」が指定されている要素のみにCSSを適用することができます。value="送信"></form>プロパティCSSのプロパティは様々なものが用意されており、宣言ブロックに複数指定することができます。以下のコード例は、ページ全体の背景色とフォントサイズ、種類を指定しています。#9ecfff;}プロパティは色、サイズ、余白などをはじめ、インデントや行間、幅寄せなど細かい設定も指定できるように本当に多くのものが用意されています。ここでは紹介しませんが、今後コードを書きながら少しずつプロパティを覚えていきましょう。CSSを書く場所CSSはHTMLファイルに直接書く方法と、独立したCSSファイルに書く方法があり、さらにHTMLファイルに直接書く場合は「head要素に書く方法」と「HTML要素にstyle属性で書く方法」の2つの方法があります。どのような形になるか1つずつ確認していきましょう。head要素に書く方法head要素の中にstyle要素を書いて、その中にCSSを書いていきます。</body></html>style要素に書いたCSSはbody要素の該当する要素にCSSが適用されます。HTML要素にstyle属性で書く方法こちらはCSSを適用したい要素にsytle属性を使って指定する方法です。</body></html>この方法は「インラインスタイル」や「インラインCSS」と呼ばれます。CSSを適用したい要素に直接書くことができるので便利そうですが、後でどこにCSSを書いたか分かりづらくなってしまうためあまりオススメできません。「sytle.css」のように拡張子「.css」を付けて、HTMLファイルとは別のテキストファイルとして書く方法です。CSSファイルはHTMLから読み込むことで適用することができます。HTMLとCSSを分けて管理できたり、複数のページで1つのCSSを共有できるため一番オススメの方法です。#222;}HTMLファイルはlink要素で「style.css」を読み込むことができます。</body></html>以上、CSSを書く場所について3つの方法してきました。最後に、実際にCSSを書いてみましょう。CSSを書いてみる前回作成した「index.html」を使って、CSSがどのように適用されるかを確認していきます。head要素内にstyle要素を追記してください。</body></html>続いて、プロパティを書いていきます。background-colorプロパティでページの背景色を変更してみましょう。HTML!</p></body></html>変更を保存し、ブラウザで開いてみてください。次のように背景の色が白から青に変わったでしょうか。色の指定「#9ecfff」はカラーコードという16進数の値で指定する方法を使っています。今は馴染みがないかもしれませんが、WEBサイト制作でよく使われているAdobeのツールではよく使われる方法なので、少しずつ使って慣れていきましょう。色の指定方法はその他にもキーワード(カラー名)やRGBなどで任意の形式を使って指定することができます。試しに、h1要素の文字色をキーワードで変更してみましょう。HTML!</p></body></html>ブラウザを更新してみると、次のようにh1要素の色が変わります。キーワードは「blue」の他にも「red」「black」「white」などが定義されています。興味がある方は、以下のページも参照してみてください。CSSでの色の指定方法について今回はここまでとなります。次回はWEBサイトの企画や構成の考え方を解説していきます。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。)PHP2019-11-16フォームの基本構造を作成するPHP2019-11-16はしご高など旧字体漢字の文字化けを防ぐRECOMMEND遅いインターネット評論家の宇野常寛の新著。2018年頃から提唱されている「インターネットによって失った未来をインターネットによって取り戻す」をテーマにした本書が、いよいよ2月20日から書店に並びます。宇野さんがずっと温めてきた構想が詰まった1冊なので、個人的に非常に楽しみにしている一冊です。