CSS基礎

１．CSS ルールセットの構造

CSSを書く際の構造は下図の通り。
この全体構造はルールセットと正式に名前があるらしい(MDN Web Docsより）

Selector (セレクター)

これはルールセットの先頭にある HTML 要素名です。これはスタイルを設定する要素 (この例の場合は <p> 要素) を定義します。別の要素をスタイル付けするには、セレクターを変更してください。
宣言 (Declaration) color: red; のような単一のルールです。
これは要素のプロパティのうち、スタイル付けしたいものを指定します。

Property (プロパティ)

HTML 要素をスタイル付けするための方法です。(この例では、 color は <p> 要素のプロパティです。)
CSS では、ルールの中で影響を与えたいプロパティを選択します。

Property value (プロパティ値)

プロパティの右側には—コロンの後に—プロパティ値があります。与えられたプロパティの多くの外観から
1 つを選択します。 (例えば、 color の値は red 以外にもたくさんあります。)

構文の他の重要な部分に注意してください。

• セレクターを除き、それぞれのルールセットは中括弧 ({}) で囲む必要があります。
• それぞれの宣言内では、コロン (:) を使用してプロパティと値を分離する必要があります。
• それぞれのルールセット内でセミコロン (;) を使用して、それぞれの宣言と次のルールを
  区切る必要があります。

一つのルールセットで複数のプロパティ値を変更するには、次のようにセミコロンで区切って書いてください。

目次に戻る

２．CSSルールセットとセレクタ

CSSを適用するパターンは様々な種類がある。
項目１の場合は＜P＞タグそのものに適用しているパターンになる。
パターンを下記に記載する。

こちらも、MDN Web Docs(さまざまな種類のセレクター) より参照

セレクター名	選択するもの	例
要素セレクター（タグまたは型セレクターと呼ばれることもあります）	指定された型のすべての HTML 要素。	p <p> を選択
ID セレクター	指定された ID を持つページ上の要素です。指定された HTML ページでは、各 id 値は一意でなければなりません。	#my-id <p id="my-id"> または <a id="my-id"> を選択
クラスセレクター	指定されたクラスを持つページ上の要素です。同じクラスの複数のインスタンスが 1 つのページに現れることがあります。	.my-class <p class="my-class"> および <a class="my-class"> を選択
属性セレクター	指定された属性を持つページ上の要素です。	img[src] <img src="myimage.png"> は選択するが <img> は選択しない
擬似クラスセレクター	指定された要素が指定された状態にあるとき。（例えば、マウスポインターが上に乗っている（ホバー）状態。）	a:hover <a> を、マウスポインターがリンク上にあるときのみ選択。

他にも様々なセレクターがあります。詳しくは、 MDN のセレクターガイドをご覧ください。

目次に戻る

３．CSSを適用する

CSSにはこのように定義を行う。

#block1 {
   background-color: red;
   color:white;
   height:50px;
}
#block2 {
   background-color: black;
   color:white;
   height:50px;
}

HTMLにはこのように定義を行う。

<div id="block1">ブロック要素 背景色・赤　フォントカラー白　高さ50px　</div>
<div id="block2">ブロック要素 背景色・黒　フォントカラー白　高さ50px　</div>

結果は、以下のようなブロック要素として表示される。

目次に戻る

４．CSS のレイアウトは、ボックスモデル

CSS のレイアウトは、主にボックスモデルに基づいています。
ページ上のスペースを占める各ボックスには、次のようなプロパティがあります。

• padding: コンテンツの周囲のスペースです。以下の例では、段落テキストの周りのスペースです。
• border: padding のすぐ外側にある実線
• margin: 要素の外側の周りの空間

実際書いてみる。
blocksのクラスセレクタに罫線をもたせて<div>タグで外枠を生成。
block1、block2 のクラスセレクタを用意して、HTML側で指定した際に
上記図の通りの部分に設定が指定されるかを確認。margin: 0 auto; は中央寄せに使う。
marginについてはMDN先生参照
paddingについてもMDN先生参照

.blocks{
  border: 4px solid green;
}
.block1 {
  width: 400px;
  margin: 0 auto;
  background-color: lightgray;
  padding: 20px 0px 0px 80px;
  border: 5px solid orange;
}
.block2 {
  width: 400px;
  margin: 0 auto;
  background-color: yellow;
  padding: 0 80px 20px 0;
  border: 5px solid blue;
}

<div class="blocks">

   <div class="block1">
      width: 400px;
      margin: 0 auto;
      background-color: yellow;
      padding: 20px 0px 0px 50px;
      border: 4px solid orange;
   </div>

   <div class="block2">
      width: 400px;
      margin: 0 auto;
      background-color: orange;
      padding: 0 50px 20px 0;
      border: 4px solid blue;
  </div>

</div>

どこに何が適用されているかが、図をもとに把握できる。

目次に戻る

５．レイアウトを操作する（displayプロパティ）

CSS のボックスモデルのおさらいです。ドキュメントツリーにおけるすべての要素は以下のようなエリアを持つ長方形のボックスとして構成されています。この4つの描画エリアに対して

どのような表示を指定するか、決められるのがdisplayプロパティになります。

displayの種類

プロパティの種類は様々ありますが、代表的によく使うのは「block」「inline」「inline-block」「flex」「none 」になると思います。その他にもいろいろなプロパティが存在します。とりあえずここでは、よく使うものを使用してどのような動作になるかを確認します。

display: block	ブロック要素を形成する
display: inline	インライン要素を形成する
display: inline-block	インラインレベルのブロック要素を生成する。 形態としてはインライン要素として扱われるが、横幅や高さや作られる
display: inline-table	インラインレベルのテーブルを形成する
display: contents	ボックスの要素を残しつつ周囲のボックスを省略する。 例：　<div>ボックス</div> →　ボックス
display: flex	ブロックレベルでフレックスコンテナのボックスを形成する
display: grid	ブロックレベルでグリッドコンテナボックスを形成する
display: ruby	ルビのコンテナボックスを形成する
display: list-item	li要素のようなリスト形式のマーカーボックスを形成する
display: none	要素を非表示にする
display: inherit	親要素の値を継承する
display: table	tableのような要素を形成する
display: table-caption	captionのような要素を形成する
display: table-cell	tableのセル（td）のような要素形成する
display: table-column	tableのcolのような要素を形成する
display: table-column-group	tableのcolgroupのような要素を形成する
display: table-footer-group	tableのtfootのような要素を形成する
display: table-header-group	tableのtheadのような要素を形成する
display: table-row	tableのrowのような要素を形成する
display: table-row-group	tableのrowgroupのような要素を形成する

<div id="display_dropbox">
   <span id="title">block</span>
   <label for="display">Choose a display value:</label>
   <select class="display">
     <option selected="">block</option>
     <option>inline</option>
     <option>inline-block</option>
     <option>none</option>
     <option>flex</option>
     <option>inline-flex</option>
     <option>grid</option>
     <option>inline-grid</option>
     <option>table</option>
     <option>list-item</option>
   </select>
</div>

<div id="comments">
<div class="comment" id="block">この要素はブロック要素のボックスを生成し、通常のフローでは要素の前後で改行を生成します。</div>
<div class="comment" id="inline">この要素は、自身の前後に改行を生成しない 1 つ以上のインライン要素ボックスを生成します。通常のフローでは、次の要素は、空間があれば同じ行になります。</div>
<div class="comment" id="inline-block">前後に改行が入ったインライン要素のボックスを生成する。</div>
<div class="comment" id="none">要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。 要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりにプロパティを使用します。</div>
<div class="comment" id="flex">要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。</div>
<div class="comment" id="inline-flex">要素は、インライン要素のようにふるまいつつ、その内容物をフレックスボックスモデルに従ってレイアウトします。</div>
<div class="comment" id="grid">要素は、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。</div>
<div class="comment" id="inline-grid">要素は、インライン要素のようにふるまいつつ、その内容物をグリッドモデルに従ってレイアウトします。</div>
<div class="comment" id="table">HTML の  要素と同じように動作します。これは、ブロックレベルボックスを定義します。</div>
<div class="comment" id="list-item">要素は内容のためにブロックボックスと、個別のリスト項目のインラインボックスを生成します。list-item 単独の値を指定すると、要素はリスト項目のように動作します。これは list-style-type や list-style-position と共に使用することができます。list-item は display-outside キーワードのいずれかと、 display-inside の flow または flow-root キーワードと組み合わせることもできます。</div>
</div>

<div id="blocks">
  <div class="block">
     <span>First</span>
     <span>Second</span>
     <span>Third</span>
  </div>
  
  <div class="block">
     <span>First</span>
     <span>Second</span>
     <span>Third</span>
  </div>
</div>

#blocks {
  background-color: #2f4f4f;
  height:300px;
}

#blocks span {
  background-color: crimson;
  color: white;
  margin: 5px;
}

#blocks, span {
  border-radius: 5px;
  padding: 2px;
}

#blocks, div {
  margin:  5px;
}

.block{
  border: 2px solid white;
  background-color: white;
  border-radius: 10px;
}

div#inline {
   height: 150px;
   background-color: darkslategrey;
   color: white;
   border-radius: 5px;
   padding: 20px;
}

const articles = document.querySelectorAll('.block');
const select = document.querySelector('select');
const tltle = document.getElementById("title");
var fruits = document.querySelectorAll('.comment')

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
	tltle.innerHTML = '<H1>' + select.value + '</H1>';
  });
  fruits.forEach( function( item ) {
      if(item.id === select.value) {
	 document.getElementById(item.id).style.display = 'block'
      } else {
	 document.getElementById(item.id).style.display = 'none'
      }
  });
}
select.addEventListener('change', updateDisplay);
updateDisplay();

目次に戻る

トップに戻る