BOX内にいろいろ入れたときのサンプル集。 目次から各項目へ飛べます。 リスト入り BOX in BOX 広告ユニット 広告ユニットのみの場合 リスト入り タグ <div class="dashed color_bd_pk"> <span class="label_2 color_bg_pk">ラベル文字</span> <p>文章</p> <ul> <li>リスト１</li> <li>リスト２</li> <li>リスト３</li> <li>リスト４</li> </ul> </div> 見た目 リスト入りBOX BOX内にリストを入れて…

タグをつけたときの表示テスト用記事です。 タグをつけたときの表示テスト用記事です。 タグをつけたときの表示テスト用記事です。 タグをつけたときの表示テスト用記事です。 タグをつけたときの表示テスト用記事です。 タグをつけたときの表示テスト用記事…

pre表示テスト用投稿 デザイン確認用です。 css h1{color:navy;} sass h1{color:pink;} html <h1>orange</h1> はてな記法 * 見出し1 - リスト1 - リスト2 >> 引用 << Markdown #見出し1 1. リスト1 1. リスト2 > 引用 指定なし、その他のコード <h1>見出し1</h1> h1{color:navy…

ぼかす+maskでキャプション Caption Title caption text here ... ぼかす+上から降りてくるキャプション Caption Title caption text here ...

上からスライドする説明文 サンプル画像の上に乗っかります。上からスライドして説明が降りてきます。お洒落。 動くCSSのためのメモ。 上からスライドする説明文２ サンプル画像の上に乗っかります。上からスライドして説明が降りてきます。お洒落。 動くCSS…

キャプション画像のホバーアニメーション CSSで変更。 <div class="●"></div>で囲むことで反映可能。 ●の部分には各class記述。 共通tag <figure> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/marumimusicofficial/20210131/20210131121058.jpg" class="zoom" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure>

ボタンホバーでテキスト切り替え 表示 テキスト テキスト タグ <button data-text="スタート">テキスト</button> <button data-text="終了">テキスト</button> css button:hover { text-indent: -5px; } button:hover:after { content: attr(data-text)""; } 参考 qiita.com

レスポンシブでテーブルの形を変える 表示 イベント名 開催日 場所 料金 ○×イベント 2021/01/31(日) 大阪府大阪市○× 1,100円 △□イベント 2021/02/1(月) 東京都新宿区△□ 2,200円 tag <table> <thead> <tr> <th>イベント名</th> <th>開催日</th> <th>場所</th> <th>料金</th> </tr> </thead> <tbody> <tr> <td data-label="イベント名">○×イベント</td> <td data-label="日時">2021/01/31(日) </td> </tr></tbody></table>

段落 画像（はてなフォトライフ） 脚注 続きを読む 罫線 h1見出し h2見出し h3見出し h4見出し h5見出し h6見出し asin 引用 リスト（ul,ol,dl） ul ol dl dl Q&A 風 Q & Aのコード テーブル コードブロック 段落 あのイーハトヴォのすきとおった風、夏でも…

段落 フォトライフ 左 右 ブロック 大きい画像 罫線 h1見出し h2見出し h3見出し（*） h4見出し（**） h5見出し（***） h6見出し asin 引用 リスト（ul,ol,dl） テーブル PRE