画像にリボンをつけよう

2025年1月11日

画像の左端にリボンを付けておしゃかわにしましょう

Cat

HTMLコード<div class="cp_card">
<img src="/wp-content/uploads/2024/12/01.png" alt="振り向きねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-142" />
<div class="cp_ribbon02"><div class="cp_ribbon">Cat</div></div>
</div>

HTMLコード
1 2 3 4	`<div` `class="cp_card">` `<img src="/wp-content/uploads/2024/12/01.png"` `alt="振り向きねこちゃん"` `width="370"` `height="320"` `class="aligncenter size-full wp-image-142"` `/>` `<div` `class="cp_ribbon02"><div` `class="cp_ribbon">Cat</div></div>` `</div>`

CSSコード.cp_card {
    max-width: 200px;
    position: relative;
    background: #ffffff;
    overflow: visible;
    padding: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    margin: 0 auto;
}
 
.cp_ribbon02 {
    width: 106px;
    height: 108px;
    overflow: hidden;
    position: absolute;
    top: -6px;
    left: -6px;
}
.cp_ribbon02 .cp_ribbon {
    font-size: 1em;
    line-height: 1.2em;
    position: relative;
    top: 26px;
    left: -33px;
    width: 150px;
    padding: 7px 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    text-align: center;
    letter-spacing: 0.5px;
    color: #ffffff;
    background-color: #ff0000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.cp_ribbon02 .cp_ribbon::before,.cp_ribbon02 .cp_ribbon::after {
    position: absolute;
    bottom: -4px;
    content: '';
    border-width: 4px 4px 0 4px;
    border-style: solid;
    border-color: #bd3535 transparent transparent transparent;
}
.cp_ribbon02 .cp_ribbon:before {
    left: 0;
}
.cp_ribbon02 .cp_ribbon:after {
    right: 0;
}

CSSコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49	`.cp_card {` `max-width:` `200px;` `position:` `relative;` `background:` `#ffffff;` `overflow:` `visible;` `padding:` `5px;` `box-shadow:` `0` `0` `5px` `rgba(0,` `0,` `0,` `0.3);` `border-radius:` `15px;` `margin:` `0` `auto;` `}` `.cp_ribbon02` `{` `width:` `106px;` `height:` `108px;` `overflow:` `hidden;` `position:` `absolute;` `top:` `-6px;` `left:` `-6px;` `}` `.cp_ribbon02` `.cp_ribbon {` `font-size:` `1em;` `line-height:` `1.2em;` `position:` `relative;` `top:` `26px;` `left:` `-33px;` `width:` `150px;` `padding:` `7px` `0;` `-webkit-transform:` `rotate(-45deg);` `transform:` `rotate(-45deg);` `text-align:` `center;` `letter-spacing:` `0.5px;` `color:` `#ffffff;` `background-color:` `#ff0000;` `box-shadow:` `0` `4px` `6px` `rgba(0,` `0,` `0,` `0.1);` `}` `.cp_ribbon02` `.cp_ribbon::before,.cp_ribbon02` `.cp_ribbon::after {` `position:` `absolute;` `bottom:` `-4px;` `content:` `'';` `border-width:` `4px` `4px` `0` `4px;` `border-style:` `solid;` `border-color:` `#bd3535` `transparent` `transparent` `transparent;` `}` `.cp_ribbon02` `.cp_ribbon:before {` `left:` `0;` `}` `.cp_ribbon02` `.cp_ribbon:after {` `right:` `0;` `}`

参考サイト：https://adatype.co.jp/info/archives/staff_blog/24

comment コメントをキャンセル

: JavaScript不要！CSSだけで作るインタラクティブなUI

近年、WebサイトのUIデザインはますますインタラクティブで魅力的なものになっています。しかし、インタラクティブな動作を実現するにはJavaScriptが必須だと思っていませんか？実は、CSSだけ ...

CSS HTML

: 文字をホバーした時に下にボーダーが伸びる処理

文字をホバーした時に下にボーダーが伸びる処理を紹介します。リンク先とかに使うとおしゃれになりますよこちらをホバーすると赤い線が下に伸びます [code lang="js" title="HTMLコ ...

CSS HTML

: いい感じの位置にリンク先の表示位置を止める方法

リンク先のIDに飛ぶ際にいい感じの位置に表示させたい時ありますよね主にスクロールするとメニューバーが追従してくる感じのサイトとかに使います。 scroll-margin-topを使うことで値を調節し ...

CSS HTML

: スマホ・タブレットにて横向きにしてサイトを見られたくない場合の処理

サイト作成していると横向きで見られたくない(対応が面倒)な時があります。横向きになった場合に、ウィンドウを出して「横向き対応してません」と表示して見せないようにします。本ページでは実際に横向きにし ...

CSS HTML JavaScript

: 「初心者大歓迎！HTMLを使ってWebページを作ってみよう」のまとめ

ここまで、初心者向けにHTMLとCSSの基本的な使い方を学んできました。これで、Webページ作成の第一歩を踏み出したことになります。もう終わり？と感じる方もおられると思います。まだ説明してない部分 ...

HTML

画像サイズがバラバラだがすべて均一に綺麗に表示させたい場合

「続きを読む」を押すと下にサッと文字が出てくる処理(JavaScript)

画像にリボンをつけよう

クラシックエディタ用のプラグインを作ってみた

クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた

Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた