CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでコンタクトチップを作成する方法【初心者向け解説】

コンタクトチップ（Contact Chip）とは、名前やプロフィール画像を小さな丸みのある要素として表示するUIパーツのことです。メールアプリの宛先候補やチャットツールのメンバー一覧など、さまざまな場面で活用されています。

CSSを使えば、このようなコンタクトチップを簡単に作成できます。ここでは、プロフィール画像と名前を組み合わせたチップの具体的な実装方法を解説します。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin:25px;
    }
    .chip {
        display: inline-block;
        padding: 0 25px;
        height: 50px;
        font-size: 20px;
        font-weight: bold;
        line-height: 50px;
        border-radius: 25px;
        background-color: #6a0074;
        color: white;
    }
    .chip img {
        float: left;
        margin: 0 10px 0 -25px;
        height: 50px;
        width: 50px;
        border-radius: 50%;
    }
</style>
</head>
<body>
<h1>コンタクトチップの例</h1>
<div class="chip">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909__340.png">
James Anderson
</div>
<div class="chip">
<img src="https://cdn.pixabay.com/photo/2014/03/24/17/19/teacher-295387__340.png">
Britney Smith
</div>
</body>
</html>

出力結果

上記のコードを実行すると、以下のようにプロフィール画像と名前が組み合わさったチップが表示されます。

CSSでコンタクトチップを作成する方法【初心者向け解説】

ポイント解説

1. ピル型の形状を作る

border-radius: 25px; を指定することで、高さ50pxに対して角が完全に丸められ、両端が半円状の「ピル型」のデザインになります。

2. テキストを垂直方向の中央に配置する

line-height の値を height と同じ50pxに設定することで、テキストが上下中央に揃います。単一行のテキストなら、flexboxを使わずとも簡単に中央寄せが可能です。

3. 画像を左端に埋め込む

.chip img に float: left; とネガティブマージン（margin-left: -25px;）を指定することで、画像がチップの左端にはめ込まれたようなレイアウトになります。また border-radius: 50%; により、画像が正圆形に切り取られて表示されます。

このように、わずかなCSSの指定だけで見栄えの良いコンタクトチップを実現できます。色やサイズを変更すれば、自分のサイトのデザインに合わせて自由にカスタマイズしてみてください。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>