CSS 2 応用（更新中） - user000422/0 GitHub Wiki

はみ出した要素をスクロールにする

.scroll {
  max-height: ○○○px; /* height か max-height で高さを固定 */
  overflow-y: auto; /* 高さをはみ出した領域をスクロールに */
}

図形

/* 右向き矢印 */
.arrow-forward {
  position: relative;
}
.arrow-forward::before {
  content: '';
  position: absolute;
  top: 35%;
  left: 30%;
  width: 10px;
  height: 10px;
  border-top: 3px solid #FFF;
  border-right: 3px solid #FFF;
  transform: rotate(45deg);
}

flex 可変幅と固定幅が存在するリスト

<ul>
  <li class="fixed-area">固定エリア</li>
  <li class="variable-area">可変エリア</li>
</ul>
ul { display: flex; }
.fixed-area { width: 100px; }
.variable-area { flex: 1; }

placeholder の縦中央揃え

○○○::placeholder{
  position: relative;
  top: 0.1em;
}

clearfix … float解除用テクニック

/* 専用の clearfix というセレクタを作る */
/* float解除したい親要素HTMLタグにクラスを追加してあげる */
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

非活性要素にCSSを指定（検証はまだしていない）

<!-- html -->
<input type="text" disabled>
/* css */
input[type="text"]:disabled { /* 擬似クラス :disabled */
  background-color: #ccc;
}

1行内での要素2つの左寄せ右寄せ分離
旧式はtable-cellでした

<!--- html --->
<div class="box">
	<div class="left"> ○○ </div>
	<div class="right"> ○○ </div>
</div>
/*--- css ---*/
.box {
	display: flex;
	justify-content: space-between;
}
.left { text-align: left; }
.right { text-align: right; }

固定ヘッダ

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}
○○○ { padding-top: ○○px; }

領域からはみ出したテキストを「…」にし省略(3種セットで運用)

.text-overflow {
  white-space: nowrap; /*  */
  over-flow: hidden; /* 親要素範囲をはみ出したテキストを非表示に */
  text-overflow: ellipsis; /* 領域外で非表示になる手前で「…」に変換 */
}

表示切り替え目的で <tr> 要素を display: block すると、レイアウトが崩れる対処
tr要素のdisplayプロパティ値は「table-row」なので「table-row」と「none」で切り替える必要がある

.sample_tr {
  display: table-row;
}

リスト要素を横並びにするには display: inline-block; (flexと要考察)

xx

/* te */
*, *::before, *::after {
	box-sizing: border-box;
}

/* te */
a:link, a:visited, a:hover, a:active {
	color: #d03c56;
	text-decoration: none;
}

/* safariでopacityのtransitionがちらつく現象対策(古かったらごめんなさい) */
body {
	-webkit-font-smoothing: antialiased;
}
⚠️ **GitHub.com Fallback** ⚠️