【pre】表示テスト

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;}

【CSS】目次のリストを1-1とかにする

目次のカスタマイズ

はてなブログの目次で1-1とかにするやり方。

• .table-of-contentsの中にcounter-resetを入れるとうまく作動しない。
  • .entry-content内のulに記載でうまくいく。
  • counter-incrementとcontentは.table-of-contents内のli:beforeに記載でok
• numには好きな文字を入れる。
• list-style-type:none;必ず入れる。(リストマークが数字と重複してしまうため)

Sass(SCSS)

カウンター関数使用

ul{
    counter-reset: num; //カウントリセット
}
   ul.table-of-contents {
        list-style-type: none;  //元々のリストマークを消す      

         li:before {
            counter-increment: num; //カウント加算
            content: counters(num, "-") ". "; //表示用
          }

   ul li{list-style-type: none;} //入れ子の元々のリストマークを消す
}

尚1-1.の-や.を変えたければcontent内の"-"や"."を変更すれば良い。(何も書かないで""でもok)

参考

kiririmode.hatenablog.jp

【Sass】@whileメモ

@while

条件が真(True)である間 { ... }を繰り返す。

やりたいこと

h1〜h6までのfont-sizeを一気に設定したい。

1. $iで数値設定
2. <7で6までと指定 (<=6でも6まで指定とイコール)
3. h#{$i}でh + $iを指定
4. font-size設定
   1.#{}で計算式+文字を括る
   2.()で計算。計算式に *$iを含める。
   3.""で文字は括る。+ "rem"
5. hの後ろが+1づつになるよう$i+1とする。

Sass

$i: 1;
@while $i < 7 {
  h#{$i} { font-size: #{(1.9 - 0.2 * $i) + "rem"}; }
  $i: $i + 1;
}

CSS

h1 {
  font-size: 1.7rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.3rem;
}

h4 {
  font-size: 1.1rem;
}

h5 {
  font-size: 0.9rem;
}

h6 {
  font-size: 0.7rem;
}

小さくなりすぎるので-0.1でもいいかもしれない。