1.重ねたい画像（動画）のタグを囲む新しいdivタグ(sample-box)を追加する

<div class="sample-box">
  <video id="myvideo" width="500" height="500" muted autoplay playsinline></video>
  <img class='scope' width="200" height="200"　src="https://iconlab.kentakomiya.com/wp/wp-content/uploads/2019/08/icon0140.png"/>
</div>

2.CSSに↓を追加

.sample-box {
    position: relative;
}
.scope {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

transform: translate(-50%, -50%);で画像の中央を支点に配置が可能

参考
【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右)
【HTML・CSS】画像の上に画像や文字を重ねる方法

どうも7noteです。リボン・・・ではなくリボン結び（蝶々結び）を作ってみました。

一般的にWEB業界で「リボン」と言われると以下のようなデザインが一般的かと思います。

でも単に「リボン」って言われたらやっぱ「ハ〇ーキティ」が耳につけている赤いリボンのイメージが強い。

というわけで、リボン（蝶々結びのリボン）を作ってみました。
好きな大きさに調整しやすくまとめていますので、★のついているコメントの箇所だけ調整してお使いください。

完成例

ソース

index.html

<div class="ribon">
  <div class="wakka left"></div>
  <div class="center"><span></span></div>
  <div class="wakka right"></div>
  <div class="ashi left"></div>
  <div class="ashi right"></div>
</div>

style.css

/*--------リボン--------*/
.ribon {
  width: 100px;      /* ★リボンの大きさ */
  margin-top: 10px;  /* ★位置調整 */
  position: relative;
}

/*--------真ん中の結び目--------*/
.center {
  width: 10%;
  margin: 0 auto;
}
.center span {
  display: block;
  width: 100%;
  padding-top : 100%;
  background-color: #DE0024; /* ▲リボンの色 */
  border: 2px solid #683733; /* ■線の色 */
  box-sizing: border-box;
}


/*--------輪っかの部分--------*/
.wakka {
  width: 45%;
  height: 100%;
  position: absolute;
  top: 0;
}
.wakka.left {
  left: 0;
}
.wakka.right {
  right: 0;
}
.wakka::before {
  content: '';
  width: 100%;
  height: 180%;
  background-color: #DE0024; /* ▲リボンの色 */
  border: 2px solid #683733; /* ■線の色 */
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
}
.wakka.left::before {
  border-radius: 30% 60% 0 10% / 30% 60% 0 10%;
  left: 2px;
}
.wakka.right::before {
  border-radius: 60% 30% 10% 0 / 60% 30% 10% 0;
  right: 2px;
}
.wakka::after {
  content: '';
  width: 100%;
  padding-top: 10%;
  background-color: #DE0024; /* ▲リボンの色 */
  border: 2px solid #683733; /* ■線の色 */
  border-radius: 100%;
  position: absolute;
  bottom: -2px;
  box-sizing: border-box;
}
.wakka.left::after {
  left: 2px;
}
.wakka.right::after {
  right: 2px;
}

/*--------足の部分--------*/
.ashi {
  width: 50%;
  padding-top: 10%; /* ★リボン足、太さ調整 */
  background: #DE0024; /* ▲リボンの色 */
  border: 2px solid #683733; /* ■線の色 */
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: 0 100%;
  transform: rotate(45deg);
  z-index: -1;
}
.ashi.left {
  left: 0;
  transform-origin: 100% 100%;
  transform: rotate(-45deg);
}
.ashi.right {
  right: 0;
  transform-origin: 0 100%;
  transform: rotate(45deg);
}
.ashi::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  position: absolute;
  top: -2px;
  width: 0;
  height: 0;
  border-style: solid;
}
.ashi.left::before {
  left: 0px;
  border-width: 7px 0 7px 7px; /* ★リボン端、三角の大きさ調整 */
  border-color: transparent transparent transparent #683733; /* ■線の色 */
}
.ashi.right::before {
  right: 0px;
  border-width: 7px 7px 7px 0; /* ★リボン端、三角の大きさ調整 */
  border-color: transparent #683733 transparent transparent ; /* ■線の色 */
}
.ashi::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  position: absolute;
  top: -2px;
  width: 0;
  height: 0;
  border-style: solid;
}
.ashi.left::after {
  left: -3px;
  border-width: 7px 0 7px 7px; /* ★リボン端、三角の大きさ調整 */
  border-color: transparent transparent transparent #fff;
}
.ashi.right::after {
  right: -3px;
  border-width: 7px 7px 7px 0; /* ★リボン端、三角の大きさ調整 */
  border-color: transparent #fff transparent transparent;
}

感想

自分的にはなかなか上出来かなと思います。
.ashiをなくせば足ナシにもできます。

色の調整は▲と■のコメントが付いている部分でできます。

アニメーションとUIを組み合わせて、リボンの足を引っ張ったらほどける仕組みも作りたい。
CSSでどこまでやれるのか・・・

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

HTML&CSSで学んだこと

皆さんおなじみのProgateでHTML&CSSコースの勉強していたときに、おやっ？と思ったことがありました。私がHTML&CSS初心者だから躓いただけでおそらくみんな理解しているであろうことですが、頭の中の整理とアウトプットの練習という意味で書いてみます。

要素の中央揃え（ここで躓くとこが初心者っぽい）

こいつら（Progateのアイコン:imgタグ, 文章:pタグ）

中央にていっ、てしたかった

imgタグはインライン要素、pタグはブロックレベル要素だったはず。とりあえずmargin:0 auto;で行ってみるか。変化なし。。結果として、text-align:center;で中央に揃いました。

ここで１つ疑問がありました。marginプロパティをいじってimgが動かないのはわかるけど、pも動かないのはどうして？たしか中央揃えにしたい対象が、インライン要素ならtext-align、ブロックレベル要素ならmarginをいじればよかったはず。(どこかのサイトに書いてた)

ちょっち調べてみた

とりあえず背景色変えてブロックの範囲確認してみました。

なんかpタグの範囲が広い。。調べてみたところ、
ブロックレベル要素の幅は、親要素とおなじになる。（おそらくwidth等の指定をしない場合）
とのこと。

だったらpタグの幅指定したらmarginいじって動くってことだよね？（頼む動いてくれ）

これが

こうなった

とりあえず思ったとおりに、動いてくれて安心しました。
1歩進む

VPNを使って無料Wi-Fi等で安全を確保したい、海外の動画が見たい、ゲームをしたいと考えている人にとってネックなのがランニングコストでしょう。特殊な用途で無ければ出来るだけコストは抑えたいのが本音です。無料VPNという選択肢もありますが、無料VPNは危険が隣り合わせです。

べすとVPNでは「安い」だけでなく、安全性と信頼性の面でも一流で、コスパが高いVPNを紹介しています。友達や家族とシェアすれば毎月100円以下でVPNを利用出来ます。

• 1. CyberGhostVPN
• 2. NordVPN
• 3. VyprVPN
• 4. ibVPN
• 5. Private Internet Access

1. なんでもclassで括らない。
   tool barなどのbar系の中で要素を並べたい時は
   クラス名＋ul,
   クラス名＋ul＋li
   で表現する。


2. navigation barnの固定の仕方
   最初にnavigation barの幅、高さをdivのCSSで固定
   →＜li＞で作成した各要素は、margin:0、padding:0を指定する


3. h1は１ページに１つ


4. ページの各セクションは以下のように固定。
   （position:relative=現在の表示位置から相対的に要素の位置を動かしたいときに使用）

.section{
   float: left (or right);
   position: relative;
   bottom: ?;
   right: ?;
   left: ?;
   top: ?;
}

tool barなどのbar系の中で要素を並べたい時は
クラス名＋ul,
クラス名＋ul＋li

で表現する。