インターフェイス・スタイルとは
インターフェーススタイルとは、より良いユーザー体験を提供するために、ユーザー操作のスタイルを変更することです。
- マウススタイルの変更
- フォームのアウトライン化
- フォームフィールドのドラッグ防止
マウススタイルのカーソル
li { cursor: pointer; }.オブジェクト上を移動するマウスポインタに使用される、システムで定義済みのカーソル形状を設定または取得します。
、アウトライン
フォームにoutline: 0;またはoutline: none;スタイルを追加した後、デフォルトの青い境界線を削除することができます。
input {
outline: none;
}
、テキストフィールドのドラッグによるサイズ変更を防ぐために
実際の開発では、テキストフィールドの右下はドラッグできません。
textarea{
resize: none;
}
、垂直揃え属性の適用
CSSの vertical-align 属性の利用シーン：イメージやフォーム（インラインブロック要素）とテキストの垂直方向の配置を設定するためによく使われます。
公式説明：要素の垂直方向の配置を設定するために使用されますが、インライン要素またはインラインブロック要素に対してのみ有効です。
構文
vertical-align : baseline | top | middle | bottom
イメージ、フォーム、テキストの配置
イメージとフォームはインライン・ブロック要素で、デフォルトの vertical-alignは baselineです。この時、これらのインライン・ブロック要素の vertical-align属性を middleに設定 することで、テキストやイメージを真ん中に縦に揃えることができます。
イメージ下部のデフォルトの隙間の問題を解決します。
バグ: インラインブロック要素がテキストのベースラインにアラインされているため、イメージの下部にギャップがあります。
解決方法は主に2つあります：
- を追加します。
vertical-align:middle | top| bottomなどを追加します。 - イメージをブロックレベルの要素に変換します display: block；
オーバーフローテキストの省略表示
一行テキストのオーバーフロー表示省略記号
1行テキストのはみ出し表示省略 - 3つの条件を満たす必要があります：
/* . テキストを強制的に1行に表示させる*/
white-space: nowrap;
/*2. 過剰分は隠される*/
overflow: hidden;
/*3. 余分な部分を省略したテキスト*/
text-overflow: ellipsis;複数行テ キ ス ト のオーバー フ ロ ー表示の省略記号
複数行テキストオーバーフローの楕円表示、互換性の問題が大きい、webKitブラウザまたはモバイルに適しています。
/* . 過剰分は隠される */
overflow: hidden;
/*2. 余分な部分を省略したテキスト */
text-overflow: ellipsis;
/* 3. 伸縮性ストレッチ・ボックス・モデル・ディスプレイ */
display: -webkit-box;
/* 4. ブロック要素に表示されるテキストの行数を制限する */
-webkit-line-clamp: 2;
/* 5. テレスコピックボックスオブジェクトの子要素の配置を設定または取得する */
-webkit-box-orient: vertical;これは、背景のスタッフが表示する単語の数を設定することができますので、この効果を行うには、より推奨される、操作はより簡単です。
要素の表示と非表示
目的：ページ内の要素を消したり、表示させたりします。
シナリオ：ウェブサイトの広告と同じで、クリックすると消えますが、ページを更新すると再び現れます！
表示
displayは、オブジェクトがどのように表示されるかを設定または取得します。
display: none 隠しオブジェクト display: blockは、要素をブロック・レベル要素に変換するだけでなく、表示するためにも使われる。特徴：displayは、要素を非表示にした後、元の位置を占めなくなります。
将来的に広く使用され、JSを使用して多くのWebページ効果を行うことができます。実用的な開発シナリオ：このようなドロップダウンメニューなどの特殊効果を行うには、JSの背面には、元のなかった、マウスが通過し、ドロップダウンメニューを表示するには、アプリケーションは非常に広いです！
視認性
visibility属性は、要素が表示または非表示にするかどうかを指定するために使用されます。
visibility：visible ; 要素の可視性 可視性: 非表示; 要素を隠す特徴：visibilityは、要素を非表示にした後も元の位置を占め続けます。
隠された要素が元の位置を望む場合、 visibility: hiddenを使います。
隠された要素が元の位置にあることを望まない場合、 display: none を使います（より便利です）。
オーバーフロー
- overflow 属性は、要素の枠をコンテンツがオーバーフローした場合にどうするかを指定します。
| visible | は内容をカットせず、スクロールバーも追加しません。 |
| hidden | は、オブジェクトのサイズを超える内容を表示せず、超過分を非表示にします。 |
| scroll | オブジェクトのサイズを超えるかどうかにかかわらず、常にスクロールバーを表示します。 |
| auto | オブジェクトのサイズを超える場合は自動的にスクロールバーを表示し、超えない場合は表示しません。 |
- 一般的に、オーバーフローはレイアウトに影響を与えるため、表示したくありません。
- しかし、位置決めされたボックスがある場合、overflow:hidden はオーバーフローを隠してしまうので注意してください。
- 実用的な開発シナリオ
- フロートのクリア
- コンテンツを超えて隠す、離れて隠す、親ボックスを超えたコンテンツを許可しない
表示と非表示の概要
| 表示 表示 | オブジェクトを非表示にし、位置を保持しません | このようなドロップダウンメニューなどの特殊効果を行うには、jsの背面には、元のしなかった、マウススルー、ドロップダウンメニューを表示すると、アプリケーションは非常に広いです |
| 視認性 | オブジェクトを非表示にし、位置を保持 | 少ない使用 |
| オーバーフローオーバーフロー | ちょうどサイズを超える部分を非表示に | 1. フロートを削除できます。 2. ボックスの内容がボックスの境界からはみ出さないようにします。 |
