ボーダー 下にボーダー ボーダーの太さを変更 ボーダーのスタイルを変更 左にボーダー ボーダーの太さを変更 ボーダーのスタイルを変更 端の丸いボーダー 色違い 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>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> </ul> </div> 見た目 リスト入りBOX BOX内にリストを入れて…
一番高いモデルでもほぼ半額の値段 三菱ケミカルクリンスイ 蛇口直結型浄水器 CSP901-WT 価格:7,080円(2021/3/17 19:11時点)感想(6件)
CSP901 CSP501 CSP801i CSP801 希望販売価格 ¥12,500(税込:¥13,750) ¥8,000(税込:¥8,800) ¥12,500(税込:¥13,750) ¥12,500(税込:¥13,750) 除去物質数 13+2 13+2 13+2 13+2 液晶 ○大型液晶採用 × × ○ スマホ対応 × × ○タッチで様々な情報を確認可能 × 節水 30%…
ラベル見本その2。 attrで取得ver。 data-*の中に好きな文字を入れることでラベルに文字が入ります。
boxにラベルをつけるデザインサンプル集。 枠デザインのサンプルと組み合わせて使ってください。
ulのサンプル集 リスト普通 リストパターン2太字 リストパターン3>を出す リストパターン4チェックマーク リストパターン組み合わせ olのサンプル集 数字付きリスト普通 数字付きリストパターン2太字 数字リストパターン3>マーク 数字リストパターン4チェッ…
枠サンプル 点線 点線2 点線色付き 実線 実線2 実線色付き 背景付き 背景付き2 背景色変更 枠サンプル いろんな枠を用意しました。 参考にどうぞ。
定型文に登録して、簡単に呼び出せるようにする。 デザインのサンプル。 その1ピン留め枠 その2チェックマーク枠 その3Point吹き出しつき枠 吹き出し余談ver その4吹き出し 左向き吹き出しのタグ 右向き吹き出しのタグ 参考 その1ピン留め枠 ピン留めの…
タグをつけたときの表示テスト用記事です。 タグをつけたときの表示テスト用記事です。 タグをつけたときの表示テスト用記事です。 タグをつけたときの表示テスト用記事です。 タグをつけたときの表示テスト用記事です。 タグをつけたときの表示テスト用記事…
リンクテスト コード 結果 notつけてはてなブログ以外という書き方もできる リンクテスト 同窓 別窓 コード a{ &[target="_blank"]:after{ content:' \009'; //はてなブログ用iconName font-family: blogicon; //はてなブログ用 } } a[target=_blank]:after{…
このテーマのデフォルトの文字装飾見本一覧です。 参考にしてください。 主な文字装飾のタグは、 太字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…
:beforeでつけたiconと文字のラインを揃える 1のバージョン 2のバージョン 2のバージョンで正方形や正円を作る 完成形 Sass(SCSS) ちょっと改良 Sass(SCSS) 見た目 1のバージョンで無理やり正円作る 完成形 Sass(SCSS) 正方形・正円作るならposition:absolut…
目次のカスタマイズ Sass(SCSS) 参考 目次のカスタマイズ はてなブログの目次で1-1とかにするやり方。 .table-of-contentsの中にcounter-resetを入れるとうまく作動しない。 .entry-content内のulに記載でうまくいく。 counter-incrementとcontentは.table-o…
@while 条件が真(True)である間 { ... }を繰り返す。 やりたいこと h1〜h6までのfont-sizeを一気に設定したい。 $iで数値設定 <7で6までと指定 (<=6でも6まで指定とイコール) h#{$i}でh + $iを指定 font-size設定 1.#{}で計算式+文字を括る 2.()で計算。計算…
mapデータ mapから取り出していろいろやってみる。 Sass $set_size: (mb: 120px, pc: 360px, hf: 180px); //mobile,pc,半分 /*通常の取り出し方 */ img { width: map-get($set_size, mb); } //map date 取り出し用関数 @function size($sizeName) { @return …
足し算引き算を@functionと@returnでする 変数名 足し引き add 足し算 pull 引き算 Sass //関数@function, @return /*足し算*/ @function add($x, $y) { @return $x + $y; } p { width: add(100px, 200px); } /*引き算*/ @function pull($x, $y) { @return $…
transition呼び出し楽にしたい $変数設定 @mixinで設定 @includeで呼び出し Sass //transition設定 //単に呼び出すだけ $transition:all .3s ease; img{transition:$transition;} //mixin使用で中身をいじれるように @mixin transition($property:all .3s ea…
ぼかす+maskでキャプション Caption Title caption text here ... ぼかす+上から降りてくるキャプション Caption Title caption text here ...
上からスライドする説明文 サンプル画像の上に乗っかります。上からスライドして説明が降りてきます。お洒落。 動くCSSのためのメモ。 上からスライドする説明文2 サンプル画像の上に乗っかります。上からスライドして説明が降りてきます。お洒落。 動く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