フィード（RSS）アイコンを HTML と CSS だけで実装する方法
形状が単純なものであれば、画像を用意しなくても HTML と CSS で実装することができます。以前、三本線のメニューアイコン、通称ハンバーガーメニューを CSS で実装しました。
直接 HTML 上に出力すれば、リクエストの数が少なくなり読み込み時間が短くなるメリットがあります。アイコンフォントや CSS Sprite を利用する手段もありますが、今回も外部データを読み込むことなく HTML と CSS で RSS フィードアイコンを実装していきます。
RSS フィードアイコンを HTML と CSS で実装する
フィードアイコンの実装【サンプル１】
<div class="feedicon"> <div class="f1"></div> <div class="f2"></div> <div class="f3"></div> </div>
外枠の feedicon クラスの内側に f1、f2、f3 クラスを持つ要素を配置します。これらの要素で１つの円と、それを囲う円弧を表現します。CSS の紹介の前に、どのような構造になっているのか、以下の図で確認してください。
続いて CSS です。
.feedicon {
width: 22px;
height: 22px;
display: inline-block;
position: relative;
}
.f1, .f2, .f3 {
position: absolute
}
.f2, .f3 {
border-top: 5px solid #f49f0f;
border-right: 5px solid #f49f0f;
}
.f1 {
background-color: #f49f0f;
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
bottom: 0;
left: 0;
}
.f2 {
width: 9px;
height: 9px;
border-radius: 0 13px 0 0;
bottom: 0;
}
.f3 {
width: 17px;
height: 17px;
border-radius: 0 22px 0 0;
}
デザインの仕様上、左下の円は外側の円弧と中心位置がずれています。このズレによる違和感を解消するため、円弧は真円ではなく少し膨らみを持たせるように border-radius を設定しています。
フィードアイコン【サンプル１出力イメージ】
サイズが小さくで分かりづらい場合は、ブラウザの倍率を上げて確認してください。
フィードアイコンの実装【サンプル２】
続いて背景を設定する方法です。RSS フィードのアイコンのよくあるパターンである、四角いオレンジの背景の中に白いアイコンを設置します。HTML の構成はこのままで、CSS を変更して一番外側の要素に対し背景色とボーダーを指定します。
.feedicon {
width: 22px;
height: 22px;
display: inline-block;
position: relative;
background-color: #f49f0f;
border: 6px solid #f49f0f;
border-radius: 6px;
}
.f1, .f2, .f3 {
position: absolute
}
.f2, .f3 {
border-top: 5px solid #fff;
border-right: 5px solid #fff;
}
.f1 {
background-color: #fff;
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
bottom: 0;
left: 0;
}
.f2 {
width: 9px;
height: 9px;
border-radius: 0 13px 0 0;
bottom: 0;
}
.f3 {
width: 17px;
height: 17px;
border-radius: 0 22px 0 0;
}
一番外側の要素に太めのボーダーを設定しているのがポイントです。
フィードアイコン【サンプル２出力イメージ】
色を変えるのは簡単ですが、サイズを変えるには調整に少し手間が掛かります。まずは外枠のサイズを決めて、調整を進めていくと良いでしょう。
どちらのサンプルも、インラインブロック要素として定義しています。アイコンにフィードへのリンクを設置するには、直接アンカータグ（aタグ）で囲うだけで実装できます。
以上、RSS フィードアイコンを HTML と CSS だけで実装する方法の紹介でした。
