CSS文法

このページでは、CSS (Cascading Style Sheets) の文法を順次追加していきます

inline styling、JavascriptとCSS

　HTMLでは、CSS以外にもHTMLタグ内にstyleを埋め込めます。

<div id="myElement" style="width: 200px; height: 200px; background-color: lightblue;"></div>

　CSSを使うと、CSSを切り替えるだけでWebページの見た目を変更することができます。

Javascriptでのstyling

　DOMのstyle属性を使ったり、style要素を作成することで動的にstyle設定ができます。

<script>
function changeBackgroundColor() {
  var element = document.getElementById('myElement');
  element.style.backgroundColor = 'lightgreen';
}
</script>

　また、styleを追加することもできます。

<style>
.highlight {
  background-color: yellow;
  font-weight: bold;
  color: red;
}
</style>

<script>
function addHighlightClass() {
  var paragraph = document.getElementById('myParagraph');
  paragraph.classList.add('highlight');
}
</script>

基本的な構文

• 要素あるいはselector [:疑似style] {
    style名: 値;
  }
  

例

• class="highlight"に設定
  .highlight {
    background-color: yellow;
    font-weight: bold;
    color: red;
  }
   
• id="main"のa要素上にマウスカーソルが入ったとき
  #main a:hover {
    text-decoration: underline; 
  }
   
• button要素がクリックされたとき
  button:active {
    background-color: darkblue; 
    color: white; 
  }
   
• checkboxがチェックされたとき
  input[type="checkbox"]:checked { 
    background-color: green; 
  }
   

セレクタ: HTMLタグ内で <div id="menu"> や <div class="menu"> などで指定する

• id: 頭に # をつける
  例： #menu
   
• class: 頭に . をつける
  例: .menu
   
• 子セレクタ: 特定の親要素の直接の子要素を選択
  div > p { margin: 0; }
   
• 子孫セレクタ: 特定の親要素のすべての子孫要素を選択
  ul li { list-style: none; }
    
  クラスセレクタなどを要素の後に続けるときは、スペースを入れるかどうかで動作が変わるので注意
  button.active {   /* activeクラスを持つbutton要素 */
    background-color: green;
  }
   
  button .active {  /* button要素の内側にあるactiveクラスを持つ全ての要素 */
    background-color: blue; 
  }
   
• 疑似クラス: 特定の状態にある要素を選択
  a:hover {
    color: red;
  }
   
• 疑似要素: 特定の部分を選択
  p::first-line {
    font-weight: bold;
  }
   
• 属性セレクタ: 特定の属性を持つ要素を選択
  input[type="text"] {
    border: 1px solid #ccc;
  }
   
  Javascriptで設定した属性にも使えます。
  <script>
  element.setAttribute("company", "exampleCompany");
  </script>
   
  <style>
  [company="exampleCompany"] {
    color: blue;
    font-weight: bold;
  }
  </style>

主なstyle

• display: 要素の表示形式を指定します。例として block, inline, flex, grid などがあります。
  　要素のテキストに応じて幅を調整する場合は、inline-block を使います。
  overflow: コンテンツが要素の領域を超えたときの表示方法を指定します。visible, hidden, scroll, auto などの値があります。
  z-index: 要素のスタッキング順序を指定します。値が高い要素が前面に表示されます。
   
• visibility: 要素の表示・非表示を制御します。visible や hidden があります。
  transition: プロパティの変化にアニメーション効果を追加します。どのプロパティが変化するか、変化の時間、タイミング関数などを指定します。
   
• width: 要素の横幅を指定します。ピクセル(px)やパーセンテージ(%)で設定します。
  　fit-contentにすると、必要に応じて調整してくれます。
  height: 要素の高さを指定します。ピクセル(px)やパーセンテージ(%)で設定します。
  left: 0;: 要素を親要素の左端に配置します。
  top: 0;: 要素を親要素の上端に配置します。
  max-width: 300px;: 要素の最大幅を300ピクセルに設定します。
  min-width: 100px;: 要素の最小幅を100ピクセルに設定します。
  margin-right: 20px;: 要素の右側の余白を20ピクセルに設定します。
   
• float: right;: 要素を右側にフロートさせます。
  align-items: center;: フレックスボックスの子要素を中央に揃えます。
    
• margin: 外側の余白を指定します。要素の外側と他の要素の間のスペースです。
  border-top: 2px groove #ccc;: 要素の上部に2ピクセルの溝状の境界線（色は#ccc）を追加します。
  padding: 内側の余白を指定します。要素の内容とその境界線の間のスペースです。
   
• font-family: テキストに適用するフォントの種類を指定します。例: font-family: Arial, sans-serif;
  font-size: テキストのサイズを指定します。例: font-size: 16px;
  font-weight: テキストの太さを指定します。例: font-weight: bold;（太字）、font-weight: 400;（通常の太さ）
  font-style: テキストのスタイルを指定します。例: font-style: italic;（斜体）
  font-variant: テキストのバリエーションを指定します。例: font-variant: small-caps;（スモールキャップ）
  line-height: テキストの行の高さを指定します。単位を指定するか、相対的な値を設定します。例: line-height: 1.5;
  letter-spacing: 文字の間隔を指定します。例: letter-spacing: 1px;
  text-align: テキストの水平位置を指定します。left, right, center, justify などの値があります。例: text-align: center;
  text-decoration: テキストの装飾を指定します。underline, overline, line-through などがあります。例: text-decoration: underline;
  word-wrap: break-word;: 長い単語を改行して表示します。
  overflow-wrap: break-word;: 同様に、長い単語を改行して表示します。word-wrapの推奨代替プロパティです。
  word-break: break-all;: 単語の途中でも改行を行います。
  white-space: pre-wrap;: 空白を保持しつつ、必要に応じて改行を行います。
   
• color: テキストの色を指定します。色名、RGB、HEXコードなどで設定します。
  background-color: 要素の背景色を指定します。色名、RGB、HEXコードなどで設定します。
  opacity: 要素の透明度を指定します。値は0から1までで、0は完全に透明、1は完全に不透明を表します。
   
• border: 要素の境界線を指定します。境界線の幅、スタイル、色を設定します（例: 1px solid black）。
  border-radius: 要素の角を丸めるための半径を指定します。ピクセル(px)やパーセンテージ(%)で設定します。
  box-shadow: 要素に影を追加します。影のオフセット、ぼかし、色を指定します。
  background-image: 要素の背景画像を指定します。画像のURLを設定します。
  background-repeat: 背景画像の繰り返し方法を指定します。repeat, no-repeat, repeat-x, repeat-y などがあります。
   
• position: 要素の配置方法を指定します。static, relative, absolute, fixed, sticky などの値があります。
   
• cursor: pointer;: カーソルをポインター（クリック可能な手の形）に変更します。
  カーソルのスタイル: pointer, move, text

疑似style

• :hover: ユーザーが要素にカーソルを合わせたときに適用されるスタイルを指定します。
  a:hover { text-decoration: underline; }
   
  :hoverとアニメーションの組み合わせ
  マウスホバー時にアニメーション効果を追加することで、より動的なスタイル変更が可能です。
  div { transition: background-color 0.3s ease; }
  div:hover { background-color: yellow; }
    
• :active: マウスが要素をクリックしているときのスタイルを指定します。
  button:active { background-color: darkblue; color: white; }
   
• :focus: フォーカスが当たっている要素のスタイルを指定します（例：タブキーでフォーカスが移動した場合など）。
  input:focus { border: 2px solid blue; }
   
• :checked: チェックボックスやラジオボタンがチェックされているときのスタイルを指定します。
  input[type="checkbox"]:checked {
    background-color: green;
  }
   
• :disabled: 要素が無効化されているときのスタイルを指定します。
  input:disabled {
    background-color: gray;
    cursor: not-allowed;
  }
   
• :enabled: 要素が有効な状態のときのスタイルを指定します。
  input:enabled {
    border: 1px solid black;
  }
   
• :focus-within: フォーカスが内部の要素にあるときのスタイルを指定します。
  form:focus-within {
    border: 2px solid blue;
  }
   
•  :nth-child(n): 親要素内のn番目の子要素のスタイルを指定します。
  li:nth-child(odd) {
    background-color: lightgray;
  }
   
• :nth-of-type(n): 同じタイプのn番目の子要素のスタイルを指定します。
  p:nth-of-type(2) {
    font-weight: bold;
  }
  

イベントとの連携

• mousemove: マウスが要素の上を移動しているときのイベントを処理します。
  <div id="trackingBox" style="width: 200px; height: 200px; border: 1px solid black;"></div>
  <p id="coordinates">Coordinates: (0, 0)</p>

  <script>
    var box = document.getElementById('trackingBox');
    var coords = document.getElementById('coordinates');
   
    box.addEventListener('mousemove', function(event) {
      coords.textContent = 'Coordinates: (' + event.clientX + ', ' + event.clientY + ')';
    });
  </script>
   

特定の要素でだけ使えるstyle

list-style-type: リスト項目（<li>）のリスト記号の種類を指定します。
ul { list-style-type: square; }

caption-side: テーブルのキャプション（<caption>）の位置を指定します
table { caption-side: bottom; }

table-layout: テーブル（<table>）のレイアウトを指定します
table { table-layout: auto; }

empty-cells: 空のセル（<td> または <th>）の表示を指定します。
table { empty-cells: show; }

quotes: 引用符（<q>）の表示を指定します。
q { quotes: "≪" "≫" "?" "?"; }

resize: 要素（通常は <textarea>）のリサイズの制御を指定します
textarea { resize: vertical; } :