TPL
<div class=”news”>
<a href=”news/list/”>
<span class=”news-badge”>!</span>
</a>
</div>
CSS
.news-badge {
margin-top: -25px;
box-sizing: border-box;
min-width: 14px;
height: 14px;
padding: 0 5px;
border-radius: 500px;
vertical-align: middle;
background: #DF355F;
color: #fff!important;
font-size: 12px!important;
display: inline-flex;
justify-content: center;
align-items: center;
line-height: 0;
}
@media (max-width: 959px) {
.news-badge {
margin-top: -15px;
margin-left: 5px;
}
}
＜新米デザイナー アピコ＞
筆者プロフィール｜DXジュン（Apice Technology 代表）
「tecn」を運営している DXジュン です。
Apice Technology株式会社の代表として、20年以上にわたり Web制作・業務システム開発・業務改善支援に携わっています。
普段は中小企業向けに、在庫管理・予約管理・受発注管理など、業務を効率化するためのシステム開発やDX支援を行っています。
tecnでは、業務改善のヒントやWebシステムの仕組み、「技術が暮らしを少し便利で楽しくする」をテーマに、現場目線で分かりやすく情報発信しています。
最近は在庫管理のDX化に力を入れており、SKU・JAN・棚卸・バーコード運用など、現場で役立つ実践的なノウハウを発信しています。
また、小規模事業者向けの無料ツール 「アピスminiシリーズ」も公開しています。
🔗 Apice Technology（会社HP）
🔗 音を楽しむ【耳スタ】
🔗 在庫管理システムの機能紹介
記事が皆さまの仕事や日常のヒントになれば幸いです。
コメント