potision stickyとMarkdownの融合

前書き
FUN Advent Calendar FUN Advent Calendar 2018 - Adventarの2018の18日目の記事です。
昨日のSushiVAEをみなさん読みましたか?とても面白かったですね!
特に最後のハム太郎がピンチの時にとんがり君が助けに来たシーンはハンカチなしでは見ることは出来ませんでした。

kiefer.hatenablog.com

自己紹介
今年の3月に未来大学を修了したOB、これまで毎年アドベントカレンダーに参戦しており、未練が残っているため成仏できない老害ポケモン
東京のグループウェアの会社で働いています

今回のレジュメ

  • position: stickyすごい
  • Markdownプレビューはこういう形はどうですか?
  • あわよくばVSCode拡張を作りたい
    • と、思いましたがやめました Markdownファイルの先頭でCSSを読み込めば既存のプレビューで出来ます(下の方にGif載せます)

既にposition: stickyについて知ってるよ〜🙋という方へ

てめぇはこの記事で学ぶことは何もねぇ、読む暇があったらスマブラをやれ

position: stickyとは

https://parashuto.com/rriver/development/position-sticky のサイトのデモがわかりやすいです
このサイトが分かりやすすぎるのでこの記事ではあまり説明しないつもりです
position: stickyをつけると... 画面トップでピタッとくっ付きます

position: sticky使ってみた

最低限のhtml

<link rel="stylesheet" type="text/css" href="test.css">

<h1>テスト</h1>
<h2>サブタイトル1</h2>
<p>サブタイトル1の中身だよ〜</p>
<h2>サブタイトル2</h2>
<p>サブタイトル2の中身だよ〜</p>
<h2>サブタイトル3</h2>
<p>サブタイトル3の中身だよ〜</p>

最低限のcss

h2 {
    position: sticky;
    top: 0;
    
    /* 上に描画されていくため、背景白にして前のタイトルが消えるようにする */
    background-color: white; 
}

p {
    /* 中身が無さすぎてスクロールが出ないので無理やり縦幅を出す */
    height: 1000px;
}

f:id:ichir9n1:20181218091424g:plain
sticky使ってみた

うぉおおおおおおおお

他の要素に入ってたら押しのけて入れ替わるらしい

追加したhtml

<div class="sticky-in-div">
    <h2>サブタイトル4</h2>
    <p>サブタイトル4の中身だよ〜</p>
</div>

<div class="sticky-in-div">
    <h2>サブタイトル5</h2>
    <p>サブタイトル5の中身だよ〜</p>
</div>

追加したcss

.sticky-in-div {
    height: 1000px;
}

f:id:ichir9n1:20181218091419g:plain
sticky使ってみた2

うおおおおおおおおお

なんか後ろに3つ目が見えてるけど...

Markdownプレビューを作ってみる

既存のプレビューのよくないと思っているところ

  • 縦スクロールめっちゃしてるうちに今どこの章なのか分かりにくい
  • 輪講の資料とかMarkdownでまとめるけど、今どの章について書いてるの か分かりにくい

f:id:ichir9n1:20181218091613g:plain
長いMarkdownファイル

こうなってほしい

  • 今はどこの章にいるのかがわかり易くなってほしい
  • アウトラインみたいなのがほしい

実験した手順

  1. Markdownはサンプルを使う
    • 使わせていただいたサンプル

Quick Markdown Example

  1. Markdown→HTMLの変換にはmarked.js使ってみる

    Marked.js で Markdown をクライアント側でパースして表示する - Qiita cat (↑でダウンロードしたテキストファイル) | marked -o test.html みたいな感じで実行しました

  2. 生成されたHTMLにCSSをつけるための<head>をつける

  3. 見出し要素(h1, h2, h3)にposition: stickyをつけてみる つけたCSSは最終的にこんな感じ

    • h1, h2, h3にstickyをつけます
    • background-colorをwhiteにします
    • 好みで、h1の見出しの下にh2がくる感じにするためにtopをfont-size分下げてます
h1, h2, h3 {
    position: sticky;

    /* 上に描画されていくため、背景白にして前のタイトルが消えるようにする */
    background-color: white; 
}

h1 {
    top: 0;
    font-size: 2.5rem;
}

h2 {
    top: 3rem;
    font-size: 2rem;
    padding-bottom: 1.5rem;
}

h3 {
    top: 5.5rem;
    font-size: 1.5rem;
}
  1. 完成!!!!!!

f:id:ichir9n1:20181218092539g:plain

まとめ

position: stickyにより、ぐちゃくそかっこいい便利なMarkdownプレビューになりましたね!

まだ仕様作成中のプロパティではありますが、かっこいいサイトを作る為に覚えておいて損はないのでしょうか!

余談

本当はh1の見出し > h2の見出しみたいな表示形式にしたかったけどCSSだけでやりたかったので厳しい気がしました 思いついたらやってみます!

f:id:ichir9n1:20181218092631g:plain

この記事の下書きのMarkdownの先頭でCSSを読み込んでVSCodeMarkdownプレビューを使ってみた様子

別の解決策

  • VSCodeのOutline機能を使う(輪講の資料とかで見出しに飛びたいときとか便利)

明日は chikuwa_IT さんです!お楽しみに!