potision stickyとMarkdownの融合
前書き
FUN Advent Calendar FUN Advent Calendar 2018 - Adventarの2018の18日目の記事です。
昨日のSushiVAEをみなさん読みましたか?とても面白かったですね!
特に最後のハム太郎がピンチの時にとんがり君が助けに来たシーンはハンカチなしでは見ることは出来ませんでした。
自己紹介
今年の3月に未来大学を修了したOB、これまで毎年アドベントカレンダーに参戦しており、未練が残っているため成仏できない老害ポケモン
東京のグループウェアの会社で働いています
今回のレジュメ
既に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; }
うぉおおおおおおおお
他の要素に入ってたら押しのけて入れ替わるらしい
追加した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; }
うおおおおおおおおお
なんか後ろに3つ目が見えてるけど...
Markdownプレビューを作ってみる
既存のプレビューのよくないと思っているところ
こうなってほしい
- 今はどこの章にいるのかがわかり易くなってほしい
- アウトラインみたいなのがほしい
実験した手順
- Markdownはサンプルを使う
- 使わせていただいたサンプル
Markdown→HTMLの変換にはmarked.js使ってみる
Marked.js で Markdown をクライアント側でパースして表示する - Qiita
cat (↑でダウンロードしたテキストファイル) | marked -o test.html
みたいな感じで実行しました生成されたHTMLにCSSをつけるための
<head>
をつける見出し要素(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; }
- 完成!!!!!!
まとめ
position: sticky
により、ぐちゃくそかっこいい便利なMarkdownプレビューになりましたね!
まだ仕様作成中のプロパティではありますが、かっこいいサイトを作る為に覚えておいて損はないのでしょうか!
余談
本当はh1の見出し > h2の見出し
みたいな表示形式にしたかったけどCSSだけでやりたかったので厳しい気がしました
思いついたらやってみます!
この記事の下書きのMarkdownの先頭でCSSを読み込んでVSCodeのMarkdownプレビューを使ってみた様子
別の解決策
明日は chikuwa_IT さんです!お楽しみに!