More than 3 years have passed since last update.

cssを使って投稿した画像をアイコン風にする方法

Last updated at 2020-12-15Posted at 2020-12-13

＜この記事について＞

投稿した画像をTwitterやInstagramのアイコン風にする方法を備忘録として投稿!

[環境]
・Ruby 2.6.5,
・Rails 6.0.0
・macOS

style.cssファイルで、以下の記述を追加するだけで簡単に実装できます。
※幅と高さを同一数字にすることで縦横比を維持

.クラス名 {
  width: ○px;
  height: ○px;
  border-radius: 50%;
}

さらに、アイコンに枠線を付けて縁取りしたい場合は以下を追加します。

border: △px solid カラーコード（#00ffff等）;

他にもアイコン風にする方法は色々ありますが、初心者が手っ取り早く実装するには
この方法がオススメです！