4.Front End Development_CSS - YukaKoshiba/MyknowledgeDocs GitHub Wiki

対象要素 または .class名 または #id名{
   property: value;
   property: value;
}

/* 滑らかな動きを好むユーザのみ適用する */
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }

/* スマートフォン以下のサイズに対しして指定 */
@media (max-width: 480px) {
     nav ul {
        display: none;
    }
}

/* タブレット以上のサイズ */
@media (min-width: 768px) {
    .container {
        width: 70%;
    }
}

/* 縦向き(portrait)/横向き(landscape)で表示を変更する */
@media (orientation: landscape) {
    .image {
        width: 100%;
    }
}

/* モバイル端末(handheld)以外 */
@media (not handheld) {
    .sidebar {
        width: 20%;
    }
}

/* ダークモードを選択しているユーザに対する処理 */
@media (prefers-color-scheme: dark) {
  html {
    class: "dark-mode";
  }
}

/* コメントしたいもの */

.example {
  color: red !important;
}

:root {
  --background-color: #f0f0f0;
  --font-color: #000000:
}
/* 作成したカスタムプロパティを利用する */
main {
  backfround-color: var(--background-color);
  color: var(----font-color);
}

background-color: red;			  /* 色の名前で指定 */
background-color: rgb(255, 0, 0);	  /* rbg関数で指定 */
background-color: #00FF00;		  /* 16進数/16進数値で指定 */
background-color: hsl(240, 100%, 50%);	  /* hsl関数で指定 */
background-color: rgbs(0, 255, 255, 50%); /* rbg関数 + 不透明度 */

/* 左から右方向へ、赤から緑へグラデーションする */
background: linear-gradient(90deg, rgb(255, 0, 0),rgb(0, 255, 0));
/* 上から下へ赤から緑へグラデーションし、75％の位置まで赤色にする */
background: linear-gradient(180deg, rgb(255,0,0) 75%, rgb(0, 255, 0));

/* 右と上方向へ赤色で5pxの影を付ける */
box-shadow: 5px -5px  5px　red;
/* 赤色で20pxの光彩を放つ */
box-shadow: 0 0 20px 0 red;　/* 0は指定しなくても良い */

nav > ul {
  /* ビュレット(点)を無しにする :/
  list-style: none;
}

li > a {
  /* アンカーリンクの文字色を親要素（リストアイテム）の文字色と同じにする */
  color: inherit;
  /* デフォルトで表示されるアンカーリンクの下線消す */
  text-decoration: none;
  /* はみ出防止 */
  flex-wrap: wrap;
  align-items: center;
  padding-inline-start: 0;
  margin-block: 0;
  height: 100%;
}

nav > ul > li:hover {
  background-color: #dfdfe2;　/*背景色を変更*/
  color: #1b1b32;            /*文字色を変更*/
  cursor: pointer;           /*カーソルの形を手の形にする*/
}

nav > ul
{
    display: flex;
    padding: 0;
}
/* 必要に応じてスペースを追加する */

/* <p>p内のすべてのテキストの前に★,後ろに！を追加する */
p::before {
  content: "★ ";
}
p::after {
  content: "！";
}

/* すべての要素に対し、幅と高さをそのコンテンツの幅と高さに合わせる */
*{
  box-sizing: content-box; */ 要素の幅や高さに、padding, borderのサイズは含まない */
  box-sizing: border-box;  */ 要素の幅や高さに、padding, borderのサイズは含める */
}

scroll-behavior:smooth;
/* すべての要素に対し、幅と高さをそのコンテンツの幅と高さに合わせる */

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* wheelというアニメーション名を作成 */
@keyframes wheel {
   /* 360度回転させる */
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
}

/* 作成したアニメーションを使用する */
対象要素 {
  /* 適用するアニメーション */
  animation-name: wheel;
  /* アニメーション時間 */
  animation-duration: 10s;
  /* アニメーションの速度を指定 */
  animation-timing-function: linear;  /* 最初から最後まで同じ速度で進行する */
  animation-timing-function: ease-in-out;  /* 最初と最後だけアニメーションをゆっくりにする */
  /* 無限にアニメーションを繰り返す */
  animation-iteration-count: infinite;
} 

/* 上記指定を1行にまとめる事が可能 */
.wheel {
　　animation:　wheel 10s linear infinite;
}

&ltfooter&gt
    &ltdiv class="text-bg-secondary p-3"&gtCopyright © 2025 Yuka Koshiba&lt/div&gt
&lt/footer&ft

<div class="row">
  <div class="col-xs-6"></div>
  <div class="col-xs-4"></div>
</div>

// 変数の宣言
$main-fonts: Arial, sans-serif;
$headings-color: green;
// 変数を利用して、対象要素のスタイルを変更する
h1 {
font-family: $main-fonts;
color: $headings-color;
}

// 通常のCSS
article {
  height: 200px;
}
article p {
color: white;
}
article ul {
color: blue;
}

// Saasの入れ子を使った場合
article {
  height: 200px;

  p {
    color: white;
  }

  ul {
    color: blue;
  }
}

// mixinの定義
@mixin reset-list($parm1, $parm2) {
  margin: 0;
  padding: 0;
  list-style: none;
}
// mixinの適用
nav ul {
  @include reset-list(10px, 10px);
}

// if文
@mixin border-stroke($val) {
  @if $val == light {
    border: 1px solid black;
  }
  @else if $val == medium {
    border: 3px solid black;
  }
  @else if $val == heavy {
    border: 6px solid black;
  }
  @else {
    border: none;
  }
}

// for文
@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}

// for each文
@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

// .info-importantに指定したスタイルを.infoへ継承する
.info-important {
  background-color: magenta;
  @extend .info;
}

// 「_mixins.scss」というSaasファイルをインポートする
@import 'mixins'