フィード(RSS)アイコンを HTML と CSS だけで実装する方法

更新日: 公開日:2016/01/19
CSS のみでフィードアイコンを実装

形状が単純なものであれば、画像を用意しなくても HTML と CSS で実装することができます。以前、三本線のメニューアイコン、通称ハンバーガーメニューを CSS で実装しました。

CSSでハンバーガーメニューのアイコンを実装
メニューの三本線アイコンを HTML と CSS だけで実装する方法
スマートフォンで Web ページを閲覧している時に見かける三本線のアイコン。その見た目から通称「ハンバーガーメニュー」と呼ばれ、メニューの表示を意味しています。シンプ...

直接 HTML 上に出力すれば、リクエストの数が少なくなり読み込み時間が短くなるメリットがあります。アイコンフォントや CSS Sprite を利用する手段もありますが、今回も外部データを読み込むことなく HTML と CSS で RSS フィードアイコンを実装していきます。

RSS フィードアイコンを HTML と CSS で実装する

フィードアイコンの実装【サンプル1】

フィードアイコン サンプル1【HTML】
<div class="feedicon">
  <div class="f1"></div>
  <div class="f2"></div>
  <div class="f3"></div>
</div>

外枠の feedicon クラスの内側に f1、f2、f3 クラスを持つ要素を配置します。これらの要素で1つの円と、それを囲う円弧を表現します。CSS の紹介の前に、どのような構造になっているのか、以下の図で確認してください。

feedアイコンをCSSで実装するための構造

続いて CSS です。

フィードアイコン サンプル1【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 を設定しています。

フィードアイコン【サンプル1出力イメージ】

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

フィードアイコンの実装【サンプル2】

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

フィードアイコン サンプル2【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;
}

一番外側の要素に太めのボーダーを設定しているのがポイントです。

フィードアイコン【サンプル2出力イメージ】

色を変えるのは簡単ですが、サイズを変えるには調整に少し手間が掛かります。まずは外枠のサイズを決めて、調整を進めていくと良いでしょう。

どちらのサンプルも、インラインブロック要素として定義しています。アイコンにフィードへのリンクを設置するには、直接アンカータグ(aタグ)で囲うだけで実装できます。

以上、RSS フィードアイコンを HTML と CSS だけで実装する方法の紹介でした。

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

元システムエンジニアから、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。

更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。