作るもの ソースコード 作るもの 評価 4.5 ソースコード 評価 4.5 <span class="star-rating" data-rating="4.5"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> .star-rating { display: inline-flex; } .fa-star { color: #ccc; } .fa-star.…

アコーディオンで開閉する 「もっと見る」ボタンで開く アコーディオンで開閉する ▼アコーディオン1 アコーディオン1のコンテンツです。 ▼アコーディオン2 アコーディオン2のコンテンツです。 ▼アコーディオン3 アコーディオン3のコンテンツです。 <div class="accordion"> <input type="checkbox" id="item1"> <label for="item1"><span>▼</span>アコー</label></div>…

左上にラベルを表示する囲み枠 .frame { display: block; position: relative; padding: 3em 1em 2em; border: 3px double #fa87ce; } .frame:before { content: "ポイント"; position: absolute; top: 0px; left: 0px; padding: 5px; background: repeating…

作るもの コピペ用ソースコード 作るもの 左上に「html」「css」「javascript」の付箋が表示され、クリックするとソースコードをコピーするPRE要素を作る コピペ用ソースコード <pre class="note note-html"> </pre> <pre class="note note-css"> </pre> <pre class="note note-js"> </pre> pre.note { position: relative; /* 要素の位置を相対指定する */ displa…