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

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

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

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

ぜひ役立ててください。

 

part2はこちらです。

 

１．テキストに影をつける：text-shadow

テキストが他より目立ちます。

 

２．画像ベースのボーダーを追加する：border-image

Border.png画像を用意して、border-imageプロパティをオブジェクトに追加すれば、ウェブサイトのオブジェクトに好きなボーダーを追加できます。

 

３．ボーダーや画像に影をつける：box-shadow

背景から３Dのようにボーダーや画像を浮き上がらせることができます。

 

４．角を丸くする：border-radius

ボーダーやボタンなどのCSS3エレメントの角を丸くすることができます。丸める度合いを調整することも可能です。

 

５．個別に角を丸くする：border-radius

どの角を丸くして、どの角をそのままにしておくか選択することができます。

 

６．グラディエントを追加する：linear-gradient

CSS3ではグラディエントに背景画像は必要ありません。CSSで背景に直接追加することができるようになっています。

 

７．ページを区切る：page-break

ウェブサイトを印刷して読みたいときに活躍してくれるスニペットで、ページを区切ってくれます。紙媒体を利用する機会は減ってきましたが、PDFなどのデジタルコピーにしたときも読みやすくなりますよ。

 

８．プルクオートを作成する

テキストのフォーマットを逐一設定しなくても、手早く簡単にプルクオートが作成できます。フォントを変更したいときは[Georgia][“Times New Roman”][Times][seri]を、フォントの色を変更したい時は[ff0000]を、それぞれ好きなものに置き換えてください。

 

９．ウェブサイトを画面中央に表示する

高画質のワイドスクリーンが一般的になってきたこの時代、1999ieのように左に寄せて表示されると見にくいですよね。それを避けるためにも、このスニペットできちんど中央に表示されるようにしましょう。

１０．特定のコンテンツを中央に縦ぞろえにする

コンテナー内のコンテンツを中央に縦ぞろえにしてくれます。

１１．フッターを固定する：position:fixed

フッターを画面の下部に固定してくれます。必要に応じて背景の色を変えてください。

 

１２．ローディング中の画像に「ローディング中の画像」を表示する

画像があるはずの位置にぽっかり空白が開いていると、ページを更新すべきか迷いますよね。このスニペットを使えば、その空白を画像がローディング中であることを示すアニメーションGIFで埋めてくれます。

 

１３．タイトルテキストをロゴに置き換える：text-indent

ウェブサイトのヘッダーのタイトルテキストがロゴに置き換わったかのように表示しつつ、検索エンジンにウェブサイトが引っかかるようテキストそのものは残してくれます。

 

１４．ドロップキャップを追加する

文章の最初の一文字目だけを大きく表示してくれます。

 

１５から２７はpart2でご紹介します。

 

 

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