CSSの基本
前回まで作成していたHTMLだけではおしゃれなHPは作成できません！HPのデザインを作っているのは「CSS」と呼ばれるものです。《CSSとは？》★CSS=Cascading Style Sheets（カスケーディングスタイルシート）の略WEBページの見栄に関する役割を果たします！また、HTMLとはまた少し記述方法が変わります。WEBサイトにとって「見た目」はとっても大切です！使いやすくできるかどうかは「見た目」が重要なのです。《CSSの基本的な記述ルール》ーーーーーーーーーーーーーーーーーーーーーーーーp{color:black;}ーーーーーーーーーーーーーーーーーーーーーーーー①セレクタ：どこ／ターゲット セレクタの後に{と}挟んだ内容によって文字の大きさや色、背景色、配置などなど様々な 設定を行う事ができます！②プロパティ：どんなスタイルの種類を適応するかを指定します。③値：どのように適用するか プロパティと値の間に「:」がつきます。 また、さらに別のプロパティを続ける場合は、値の後ろに「;」を付けます！この場合、<p>の文章を黒にしたいという内容ですね！また、HTMLにもありましたが、CSSでも自分のメモを残したい時はメモの直前に/*メモの直後に*/と入れます！/*メモだよ〜〜〜〜〜*/って感じですね！《セレクタの種類》①タイプセレクタ bodyやh1などHTMLで使用した要素名をそのものを指定したものです！ 指定された要素全てがCSSで記述した内容に適用されます！ーーーーーーーーーーーーーーーーーーーーーーーーbody{color:black;}ーーーーーーーーーーーーーーーーーーーーーーーー②classセレクタ HTMLでつけたclass名を使用してCSSを適用するものです。（※HTMLでは開始タグの中にclass名をつける属性を入れます）★複数の要素に同じclass名を付ける事が可能です！HTMLではーーーーーーーーーーーーーーーーーーーーーーーー<p class="inkotitle">インコカフェです</p>ーーーーーーーーーーーーーーーーーーーーーーーーCSS ★class名の前に「.」を入れます！！ーーーーーーーーーーーーーーーーーーーーーーーー.inkotitle{color:black;}ーーーーーーーーーーーーーーーーーーーーーーーー③idセレクタ classと同じく、HTMLでつけたid名を使用してCSSを適用するものです。（※HTMLでは開始タグの中にid名をつける属性を入れます）★複数の要素に同じid名を付ける事ができません！HTMLではーーーーーーーーーーーーーーーーーーーーーーーー<h1id="inkologo">インコカフェ</h1>ーーーーーーーーーーーーーーーーーーーーーーーーCSS ★id名の前に「#」を入れます！！ーーーーーーーーーーーーーーーーーーーーーーーー#inkologo{color:black;}ーーーーーーーーーーーーーーーーーーーーーーーー ④子孫セレクタ HTMLでは要素の中に要素があるという場合が多くあります。 その要素を使用してセレクタを適用します！HTMLではーーーーーーーーーーーーーーーーーーーーーーーー<p><img src="inko.png" alt=""></p>ーーーーーーーーーーーーーーーーーーーーーーーーCSS ★親要素名と子要素名の間に「半角スペース」を入れます！ーーーーーーーーーーーーーーーーーーーーーーーーp img{margin:0px;}ーーーーーーーーーーーーーーーーーーーーーーーー ⑤複数セレクタ 複数のセレクタに共通のCSSを適用する場合です。 セレクタとセレクタを「,」でつなぎます。HTMLではーーーーーーーーーーーーーーーーーーーーーーーー<h1>インコちゃん日記</h1><p>かわいいインコのひめちゃん</p>ーーーーーーーーーーーーーーーーーーーーーーーーCSS ★間に「,」を入れます！ーーーーーーーーーーーーーーーーーーーーーーーーh1,p{color:red;}ーーーーーーーーーーーーーーーーーーーーーーーー これだけでもCSSが複雑に思えてきます(´・ω・`)がんばりましょう！今日はここまでです♪
