ボーダー 下にボーダー ボーダーの太さを変更 ボーダーのスタイルを変更 左にボーダー ボーダーの太さを変更 ボーダーのスタイルを変更 端の丸いボーダー 色違い box内文字にボーダー ボーダー ボーダーの色を変える時は、div class="color_bd_色"で変更！ …

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内にリストを入れて…

ラベル見本その２。 attrで取得ver。 data-*の中に好きな文字を入れることでラベルに文字が入ります。

ulのサンプル集 リスト普通 リストパターン2太字 リストパターン3>を出す リストパターン4チェックマーク リストパターン組み合わせ olのサンプル集 数字付きリスト普通 数字付きリストパターン2太字 数字リストパターン3>マーク 数字リストパターン4チェッ…

枠サンプル 点線 点線2 点線色付き 実線 実線2 実線色付き 背景付き 背景付き2 背景色変更 枠サンプル いろんな枠を用意しました。 参考にどうぞ。

定型文に登録して、簡単に呼び出せるようにする。 デザインのサンプル。 その１ピン留め枠 その２チェックマーク枠 その３Point吹き出しつき枠 吹き出し余談ver その４吹き出し 左向き吹き出しのタグ 右向き吹き出しのタグ 参考 その１ピン留め枠 ピン留めの…

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

このテーマのデフォルトの文字装飾見本一覧です。 参考にしてください。 主な文字装飾のタグは、 太字b 斜体i 打ち消しs 下線u 少し強調em 強調strong です。

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