RSS アイコンを HTML と CSS で作成する方法

,

rss-icon-by-html-css01

ハンバーガーメニューのアイコン作成に続いて、RSS アイコンも HTML と CSS で実装してみます。こちらについてはあまり需要が無いかもしれませんが、僕の趣味の範囲の延長ということで、お付き合いいただければと思います。

画像を利用せず、HTML と CSS で実装するメリットを強いて挙げるなら、リクエストの数が少なくなるといったところでしょうか。Web フォントを使ったり、CSS Sprite を利用した場合はその限りではありませんが、どこに需要があるか分かりませんのでお役に立てれば幸いです。

RSS アイコンを HTML と CSS で実装する

RSS アイコンの実装その1

まずはアイコン本体の実装から。HTML ソースを見てください。

外枠の rss クラスの内側に r1、r2、r3 クラスの要素を配置します。そして左下の円、それを囲うように4分の一の円弧で囲うようなイメージです。以下の図をご覧いただくとイメージがつきやすいと思います。

rss-icon-by-html-css02

続いて CSS のコードです。

左下にくる円の中心位置がずれる関係上、円弧の部分は真円ではなく少し膨らみを持たせるように border-radius の値を設定しています。この border-radius の値の設定方法により、半円の円弧も円自体も表現できます。

RSS アイコンのサンプルその1

それでは出力したものをご覧ください。サイズが小さくで分かりづらい場合は、ブラウザの倍率を上げて確認してください。

CSS を調整することで、アイコンサイズを変更することができます。

2つ目のアイコンのソースは次の通りです。

RSS アイコン実装その2

続いて背景を設定する方法です。四角いオレンジ色の背景の中に白いアイコンが置かれているものが、RSS アイコンのよくあるパターンです。HTML の構成はこのままで、一番外側の要素に対し背景色とボーダーを指定します。

背景色が変わっている部分が元の CSS から追記、変更を行った箇所です。

ここで padding を使用しないのは position: absolute に対する位置の修正を行わなくてはいけないので、現状のソースのまま背景を付けるには枠線指定が丁度良いのです。

RSS アイコンのサンプルその2

それでは背景を付けた場合の出力結果を確認ください。

色を変えるのは簡単ですが、サイズを変えるには調整が若干大変です。外枠のサイズを決めた上で、調整を進めていくと良いです。ボーダーサイズを除き、縦横の長さを5の倍数にしてあげると計算しやすいと思います。

PAGE TOP ↑