geta1972TweetPocketCheckサービスを作っている時に、システムページに必要な画像って結構たくさんあるんですよね。HTMLに準拠するボタンや入力フォームなども、今時はちゃんとデザインされた表示にしないと、とても古臭いイメージのページになって、システム全体のクオリティが低く感じてしまいます。そこで毎回無料アイコン検索を行って対応していたんですが、知り合いのデザイナーからは「今時はSVGでしょ」とか言われるんですが、ここでは、CSSに焦点を絞って行います。※SVGは今後シリーズ化したいと思います。HUMANアイコンTwitterやFacebookなど、SNSでは、自分のプロフィール画像を写真で撮ってアップロードしている人が多いのですが、デフォルト状態では、簡素な人影イメージになっているのをよく見ます。・・・・こんなんや・・・・このようなHUMANアイコンです。CSSでセットしておくと、クラス名を付けるだけでいいので、扱いやすいと思います。</style>123456789101112131415161718192021222324252627282930313233343536373839404142<style>.human{position:relative;display:inline-block;width:64px;height:64px;border:0;background-color:#E2E7EA;border-radius:32px;margin:0;padding:0;overflow:hidden;}.human:before{content:"";position:absolute;display:inline-block;top:10px;left:16px;width:32px;height:32px;border:0;margin:0;padding:0;background-color:#939EA7;border-radius:16px;}.human:after{content:"";position:absolute;display:inline-block;top:44px;left:6px;width:52px;height:52px;border:0;margin:0;padding:0;background-color:#939EA7;border-radius:24px;}</style>カスタマイズポイントwidthとheightを変更する際は、内部パーツのleftとtopも、ずらしてあげましょう。background-colorや人物部分のカラーは、好きに変更しても影響ないでしょう。.humanのpositionをabsoluteにすると、絶対座標で設置できますよ。非常に簡素だったので、マウスオーバーで背景色を変えてみました。お試しあれ!各種リンクちなみに、この記事の前回記事は以下です。CSSでアイコン描画「closeボタン」アイコン検索サイトIconFinderテーマやテイストなどでまとめてDLすることもできるし、クオリティも悪くない。SVGデータもDLできるという優れたサイトですが、日本語検索ができないのが少しだけイタイです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。