フロントエンド開発効率の向上に役立つ 13 の実践的な CSS ヒント!

この記事では、入力プレースホルダー スタイルの変更、複数行テキストのオーバーフロー、スクロール バーの非表示、カーソルの色の変更など、フロントエンドで役立つ可能性のある 13 の CSS テクニックをまとめて共有します。皆さんのお役に立てれば幸いです。 ！

入力プレースホルダー スタイルの変更、複数行テキストのオーバーフロー、スクロール バーの非表示、カーソルの色、水平方向と垂直方向の中央揃えの変更。なんとも見慣れた光景ですね！フロントエンド開発者はほぼ毎日これらの CSS スキルに取り組んでいます。この記事では 13 個の CSS スキルをまとめています。一緒に確認しましょう。

1. 画像の 5px 間隔の問題を解決する

画像の下部に余分な 5px 間隔があるという問題によく遭遇しますか?心配しないでください。解決するには4つの方法があります。 [推奨される学習: css ビデオ チュートリアル ]

• 解決策 1: 親要素の font-size:0px
• を解決する2: img のスタイルを display:block
• に追加します。 解決策 3: img のスタイルを vertical-align:bottom
• に追加します。解決策 4: 親要素のスタイルを line-height:5px

2 だけ増やします。要素の高さをウィンドウと同じにする方法

現在のフロントエンドでは、CSS ユニットは vh で、要素の高さのスタイルを height:100vh

# に設定します。 #3. 入力ボックスのプレースホルダー スタイルを変更する

これはフォーム入力ボックスのプレースホルダー属性です。デフォルトのスタイルを変更する方法は次のとおりです:

input::-webkit-input-placeholder {
  color: #babbc1;
  font-size: 12px;
}

4 :not セレクターを使用します

最後の要素を除くすべての要素には何らかのスタイル設定が必要ですが、

not セレクターを使用すると簡単にスタイルを設定できます。

たとえば、リストを実装する場合、次のように最後の要素に下線を引く必要はありません:

li:not(:last-child) {
  border-bottom: 1px solid #ebedf0;
}

5. caret-color を使用して、カーソルの色の変更

カーソルの色の変更が必要になる場合があります。キャレットカラーの時間です。

.caret-color {
  width: 300px;
  padding: 10px;
  margin-top: 20px;
  border-radius: 10px;
  border: solid 1px #ffd476;
  box-sizing: border-box;
  background-color: transparent;
  outline: none;
  color: #ffd476;
  font-size: 14px;
  /* 关键样式 */
  caret-color: #ffd476;
}

.caret-color::-webkit-input-placeholder {
  color: #4f4c5f;
  font-size: 14px;
}

6. フレックス レイアウトを使用して要素を下部にインテリジェントに固定します

コンテンツが十分でない場合は、ボタンをページの下部に配置する必要があります。十分なコンテンツがある場合は、ボタンがコンテンツに追従する必要があります。同様の問題が発生した場合は、

flex を使用してスマートなレイアウトを実現できます。

<div class="container">
  <div class="main">这里为内容</div>
  <div class="footer">按钮</div>
</div>

CSS コードは次のとおりです:

.container {
  height: 100vh;
  /* 关键样式 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main {
  /* 关键样式 */
  flex: 1;
  background-image: linear-gradient(
    45deg,
    #ff9a9e 0%,
    #fad0c4 99%,
    #fad0c4 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.footer {
  padding: 15px 0;
  text-align: center;
  color: #ff9a9e;
  font-size: 14px;
}

7. type="number"# の末尾にある矢印を削除します。 ##デフォルトでは、入力タイプ

type="number"

の最後に小さな矢印が表示されますが、場合によっては削除する必要があります。次のスタイルを使用できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">input { width: 300px; padding: 10px; margin-top: 20px; border-radius: 10px; border: solid 1px #ffd476; box-sizing: border-box; background-color: transparent; outline: none; color: #ffd476; font-size: 14px; caret-color: #ffd476; display: block; } input::-webkit-input-placeholder { color: #4f4c5f; font-size: 14px; } /* 关键样式 */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }</pre><div class="contentsignin">ログイン後にコピー</div></div>

8.

outline:none を使用します。入力ステータス ラインを削除します。入力ボックスが選択されると、デフォルトで青色のステータス ラインが表示されます。

outline:none

削除を使用して変更されました。

9. iOS のスクロール バーがスタックする問題を解決する

Apple 携帯電話では、スクロール中に要素がスタックすることがよくあります。現時点では、CSS は 1 行だけで済みます。弾性スクロールをサポートします。

body,html{
  -webkit-overflow-scrolling: touch;
}

10. 三角形を描画します

.triangle {
  display: inline-block;
  margin-right: 10px;
  /* 基础样式 */
  border: solid 10px transparent;
}
/* 向下三角形 */
.triangle.bottom {
  border-top-color: #0097a7;
}
/* 向上三角形 */
.triangle.top {
  border-bottom-color: #b2ebf2;
}
/* 向左三角形 */
.triangle.left {
  border-right-color: #00bcd4;
}
/* 向右三角形 */
.triangle.right {
  border-left-color: #009688;
}

11. 選択したテキスト スタイルをカスタマイズします

スタイルを通じてカスタマイズできますテキスト選択の色とスタイル、主なスタイルは次のとおりです:

::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

12. 選択できないテキスト

Use style

user- select: none;

13

filter:grayscale(1) を使用します。ページをグレー モードにします。 1 行のコードにより、ページをグレーモードにします。

body{
  filter: grayscale(1);
}

(学習ビデオ共有:

Web フロントエンド

)

以上がフロントエンド開発効率の向上に役立つ 13 の実践的な CSS ヒント!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。