よくある面倒なタスクはこれで解消！使えるCSSスニペット25選【part2】

本記事では、前半後半併せて27のＣＳＳスニペットを紹介します。

いずれもよく必要になる、フラストレーションのたまるタスクを解消するのに役立ってくれるスニペットです。

もはやクラシックとさえ言えるようなものから、比較的新しいＣＳＳ3スニペットもあります。

ぜひ役立ててください。

part1はこちらです。

 

１５．オブジェクトを透明にする：opacity

ウェブサイトのオブジェクトの透過率を好きなように変えることができます。

 

１６．ファイルフォーマットに依存したリンクスタイル

リンクのとなりに、それが特定のフォーマットであることを示す小さなアイコンが表示されます。コピーアンドペーストをしてエクステンションを変えれば、自分でバリエーションを増やすことも可能です。

 

１７．背景画像をリサイズする

タイトルの通り、背景画像をリサイズできます。

 

１８．複数の段をつくる

フォーマットや段落を弄らずとも、簡単に好きなだけ段を作成することができます。任意の色の境界線を表示することも可能です。

 

１９．基本的なリンクロールオーバーをCSSスプライトに

ホバーした際にボタンの背景画像を下げてくれるので、専用のボタンを別に作成しなくてもホバー効果を演出できます。

 

２０．＠fontfaceでブレットプルーフに

Fontspring[@font-face]のシンタックスです。

 

２１．グーグルフォントを追加する

全てのブラウザ・コンピュータに対応するおしゃれなグーグルフォントAPIを追加できます。

ヘッドでは下の画像、

CSSでは下の画像のスニペットを使います。

 

２２．画像を裏返す：transform

ボタンや矢印などのグラフィックを手作業で裏返して、別にアップロードする必要がなくなるのでかなり便利です。

 

２３．画像やテキストを回転させる：transform

傾けたい角度を入力すれば、画像やテキストなどのエレメントを時計回りに回転させることができます。画像のようにマイナスをつければ、反時計回りに回転させることも可能です。

 

２４．コンテンツエリアのサイズを変更する

コンテンツエリアを広くしたり狭くしたりします。

 

２５．CSSでブラウザごとに細かく対応する

CSSでIE、Firefox、Chrome、Safari、Operaの各ブラウザに対する詳細な設定が可能です。

 

２６．Eric MeyersのCSSリセット

文字通り、ウェブサイトがどのブラウザでも同じように表示されるよう、スタイルシートの一部をリセットしてくれます。

 

２７．色を全てリセットしてリンクの色を変える

テキストや背景の色を全てリセットした上で、リンクの色とスタイルをカスタマイズします。

 

１から１４はpart1でご紹介します。

 

 

※本記事は、25 CSS Snippets for Some of the Most Common and Frustrating Tasksを翻訳・再構成したものです。