HTML＆CSS - Xi-Yuer

CSS 基礎#

一行テキストのオーバーフロー#

.overflow-example {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

複数行テキストのオーバーフロー#

.multiline-overflow-example {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 表示する行数を指定 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

スクロールバースタイルの変更#

/* 幅と高さ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* トラック */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* スクロールバー */
::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* ホバー時のスクロールバーのスタイル */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
/* スクロールバーの色 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* トラックの背景色 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

タグセレクター#

タグ名を使用して要素を選択
利点：同じタイプのタグに一括でスタイルを設定できる
欠点：差異のあるスタイルを適用できず、すべてのタグを選択するだけ

h1 {
  color: #ccc;
}

クラスセレクター#

クラス名を使用して要素を選択

.container {
  color: pink;
}

ID セレクター#

要素の ID 属性を使用して要素を選択

#md {
  font-weight: 600;
}

ワイルドカードセレクター#

ページのすべての要素を選択
内外の余白をクリアするために使用される

* {
  padding: 0;
  margin: 0;
}

隣接セレクター#

指定した要素の直後の兄弟ノードを選択

<h1>h1-2</h1>
<p>p0が選択されます</p>
<div class="container">
  <h1 class="good">h1</h1>
  <p>p1が選択されます</p>
  <p>p2</p>
</div>

h1 + p {
  text-decoration: underline;
}

子孫セレクター#

すべての子孫ノードの中から選択

ul li {
  color: blue;
}

子セレクター#

直接の子要素のみを選択

div > a {
  color: green;
}

複数セレクター#

h1,
h2,
h3 {
  text-align: center;
}

交差セレクター#

/* goodクラスのp要素 */
p.good {
  color: yellow;
}

疑似クラスセレクター#

要素の状態や DOM の構造に基づいて要素を選択

動的疑似クラスセレクター#

この順番で宣言する
a:link リンクの初期スタイル
a:visited リンクを訪れた後のスタイル
a:hover リンクにカーソルが重なった時のスタイル
a:active リンクが押された時のスタイル

:focus フォーカスを受け取ったフォーム要素を選択するために使用され、通常はフォーム要素に対して使用されます
input:focus
textarea:focus

構造疑似クラスセレクター (C3)#

E
E
E(n)
E
E
E(n)

<div>
  <p>1</p>
  <span>span</span>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

/* 何も選択できません */
div > p:nth-child(2) {
  color: red;
}
/* 2番目のpタグが選択されます */
div > p:nth-of-type(2) {
  color: blue;
}

属性セレクター#

E[att]
E[att="val"]
E[att^="val"]
E[att$="val"]

疑似要素セレクター#

CSS を使用して HTML タグを作成するため、HTML タグが不要になり、HTML 構造が簡略化されます
before と after はインライン要素を作成し、DOM ツリーでは見つけることができないため、疑似要素となります
必ず content プロパティを持つ必要があります

疑似要素アイコンフォント#

p::before {
  content: '\e91e';
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 20px;
}

疑似要素で浮動をクリアする#

1. 追加タグ法（隔壁法）
浮動要素の後にブロック要素（例：div）を追加し、clear: bothを設定します
<div style=” clear:both” ></div>

2. 親要素にoverflowを追加し、そのプロパティ値をhidden、auto、またはscrollに設定します

3. 親要素にafter疑似要素を追加します
.clearfix:after {
  content: ""; /* contentプロパティが必要です */
  display: block; /* ブロック要素 */
  height: 0; /* 要素を見えなくします */
  clear: both; /* フロートをクリアするための核心コード */
  visibility: hidden; /* 要素を見えなくします */
}
.clearfix { /* IE6、7専用 */
  *zoom: 1;
}

4. 親要素に2つの疑似要素を追加します
.clearfix:before,.clearfix:after {
  content:"";
  display:table; /* ブロック要素に変換し、1行で表示します */
} .
clearfix:after {
  clear:both;
} .
clearfix {
  *zoom:1;
}