見落としがちな15の便利なCSSトリック

しばらく前からフロントエンドのWeb開発者であれば、何かをコーディングする方法を見つけようとしていて、ちょっとグーグルした後に気付いた瞬間がある可能性が高いです。 “そのためのCSSがあります”. そうでなかったら、まああなたはにしようとしている.

この記事はそのようなCSSコードを集めたもので、要素をスティッキーにしたり、下線を引いた機能を強調したり、ページのテキストを特別な形にしたり、視差効果を与えたりすることができます。それらの中には広くサポートされているものもあれば、すべてのブラウザで完全にサポートされようとしているものもあります。.

1. 番号付け見出しと小見出し

   ドキュメントに一連の見出しと小見出しがあり、それらを手動またはスクリプトで番号付けしているとします。代わりに、CSSカウンタを使ってこれを行うことができます。ここにはすでに詳細な投稿があります。そしてそれはCSS2仕様からのものなので、おそらくIE 6を除いて、それはすべてのブラウザでサポートされていると思うでしょう。.

2. 下線をスパイスアップ

   実線ではなく、素敵な点線または破線で下線を付けたい場合があります。そのための選択肢はありませんので、 ボーダーボトム. しかし ボーダーボトム 下線を引いているテキストが折り返されている場合、これは適切な解決策ではありません。.

   CSS3はテキスト装飾のために1つではなく3つの新しいプロパティを指定しました テキスト装飾色, テキスト装飾行, そして テキスト装飾スタイル これは古き良きものに短くすることができます テキスト装飾.

   これらを使用して、下線、​​上線のスタイル、テキストの点滅などを設定できます。 2015年4月現在、Firefoxのみがこのプロパティをサポートしていますが、有効にすることができます。 “実験的Webプラットフォーム機能” Chromeで使用する.

3. 引用を引用する

   まず第一に、そのためのHTMLがあるので、短い引用のために正しい中括弧をタイプすることを気にする必要はありません。 インライン引用符を示すタグ.

   の tagはまた、内側の引用符を一重引用符で引用します。だから、どこですか “そのための 'CSS'があります” この瞬間?

   デフォルトの二重引用符を使用したくない、または複数レベルのネスト引用符を使用したくない場合は、CSS2を使用してCSSでquote要素の引用設定を定義できます。 引用符 財産.

4. 手に負えない表の管理

   あなたが試したとしてもあなたが指定した幅内にとどまることを拒むセルごとに異なるコンテンツサイズを持つ大きなテーブルに出くわしたかもしれません。そのテーブルを テーブルレイアウト プロパティ（列の高さが等しい場合は、このリンクをたどります）.

   具体的には、修正プログラムは テーブルレイアウト：修正。 値。テーブルに固定レイアウトを割り当てると、テーブルとセルの幅は、内容ではなく、テーブルまたはセルの最初の行の幅によって決まります。これはすべてのブラウザでサポートされています.

5. スティッキーにする

   スティッキー要素は、ページ外のスクロールされない要素です。言い換えれば、表示領域（ビューポートまたはスクロールボックス）に固定されます。あなたはCSSを使ってこれを作成することができます。 位置：粘着性があります。.

   それらはスクロールの前には比較的位置の合った要素のように振る舞い、スクロールのしきい値に達すると後で固定要素のように振舞います。今のところ, Firefoxのみ それを支える.

6. テキストを形にする

   あなたはあなたのページのテキストをあなたがそれのそばに表示したあるイメージの上にうまくカーブさせたいですか？あなたが試すことができます CSSシェイプ. CSS形状を実装するために、3つのプロパティを利用できます。 外形, 形状マージン そして 形状画像しきい値. 2015年4月現在、CSS Shapesはによってサポートされています。 ウェブキットブラウザ.

7. 必須フィールド

   あなたがフォームを手に入れたならば、他のものがそうしない間、それの中のいくつかのフィールドが必要とされる可能性が高いです。どちらがどれであるかをユーザーに知らせる必要があります。このためのCSSは ：必須 ：オプション 疑似クラス最近のブラウザはすべてそれらをサポートしています。.

8. 色のうるさい

   青などの特定の色が気に入らない場合は、選択した領域を他の色で塗りつぶします。 ：：選択 擬似要素はそのためのCSSです。これは最近のすべてのブラウザでサポートされています。.

9. 私はそれをチェックしましたか?

   チェックボックスがチェックされている状況では、その項目がチェックされていることを示すために、デフォルトのチェックボックスの内側にある小さなチェックマークとは別の表示があると便利です。.

   そのためのCSSがあり、これは直接の兄弟の間の絆を利用します。2つの要素が並んでいます。 CSSには、隣接する兄弟セレクタがプラス記号で表示されています。 + これを使ってチェックボックスの横のラベルをターゲットにすることができます。しかし、チェックされたチェックボックスを最初にターゲットにすることはどうでしょうか。そこには ：チェックあり そのための疑似クラス.

10. 絵本のように

    それでは、最初のほうがいいと思いませんか。 “○” の中に “昔々” きれいに見える？きれいに見せることができます、結局それのためのCSSがあります。ここはどこ ：：最初の一文字 疑似要素が助けになります。ターゲット要素の最初の行の最初の文字をターゲットにします。それについてもっと読む.

11. もっと知りたいですか？?

    要素は、クラスX、データY、またはその他の属性値を持つことができます。その近くに要素のそのような属性値を表示する必要がある場合は、次のようにします。 内容：attr（X）. それは要素の属性Xの値を検索し、それから要素のそばにそれを示すことができます.

12. もう少し左に

    CSS初心者のための要素を中心に置くことはかなりの功績です。要素を中心に合わせるには、要素ごとに異なるCSSプロパティのセットが必要です。私たちはワールドワイドウェブで利用可能な多くのうちの1つの例を調べます、それであなたは物事を集中させるためのCSSがあることを再び思い出すことができるように.

13. リンクのファイル形式を開示する

    リンクの近くに小さな画像を見たことがありますか。 PDFですか？またはDOC？はい、それを達成するためのCSSがあります。の 内容：url（） リンクの背後にある画像を表示するために使用するものです.

14. 視差効果をトリガーする

    視差効果は、前景に対する背景の動きが遅いように見えることを説明するために使用される効果です。この効果は、視差スクロールを実装しているWebサイトで一般的です。実装する方法はいくつかあります。以下の例はFirefoxで動作します。 背景添付ファイル：修正。.

15. CSSアニメーションの力

    おそらく巨大ではない “そのためのCSSがあります” 皆さん、皆さんはおそらくCSSアニメーションに気付いているでしょう。しかし、ちょっとした注意は害にはなりません。 CSSアニメーションにはさまざまな用途がありますが、ここでは簡単なカラーリングの練習をします。.

今すぐ読む：すべてのデザイナーが持つべき50の便利なCSSスニペット