トピックス プログラム、シミュレーション

CSSって何?

投稿日:

先週、ホームページ作成の際に用いるHTMLの話をしました。CSS(Cascading Style Sheets)という言葉聞いたことありますか? 最近HTMLを勉強し始めてよく登場してくる単語なので、このCSSについて勉強したいと思います。

資料をご覧ください → CSSその1

p.1 Webページは、HTMLCSSを用いて作成されます。 以前は、HTMLの中にCSS的な要素も含まれていましたが、最近は各々役割を分担するようになってきています。HTMLは、見出し・文章・画像の情報CSSはそれらのレイアウトに関する情報を示しています。

p.2、3 構文は、「セレクタ{ プロパティ : 値  ; }」の形式で、「p{  color  : red ; }」は、「pの要素の色を赤にする」という意味になります。スタイルの指示方法は3つに分類されます。①HTMLの中に直接style属性を入れる場合、②head要素内にstyle 要素を置き、文書単位でスタイルを適用する場合、③link要素で外部スタイルシート(cssファイル)を読み込んで適用場合があります。多くのWeb制作現場では③の方法が利用されているようです。

p.4 「id=“blue”」のように目印をつけたものだけ青字にしたい場合は、「#blue」を用います。 クラスセレクトでは、「.(ピリオド)クラス名」で指定した箇所について処理します。ハイライト処理をするクラス名が「hightlight」です。

p.5 左は2種類のクラスの複合の事例です。 右は子孫セレクタで、「section  p以下全てのp要素に適用する事例です。文章3は<section>と同じ層にある兄弟なので適用しません。<section>の下の「」の層、さらに下の「」の層に適用します。

p.6 子セレクタは、「section > p 」と書き、sectionの直下の層にだけ適用します。複数セレクタの書き方は、並べて記載します。

本日は、ここまで。

-トピックス, プログラム、シミュレーション

Copyright© 進化するガラクタ , 2022 All Rights Reserved Powered by STINGER.