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

boxにラベルをつけるデザインサンプル集。 枠デザインのサンプルと組み合わせて使ってください。

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

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

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

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

リンクテスト コード 結果 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…