はじめまして、咲といいます。
もうちょっとでクリスマスですね。
私は、フロントエンドエンジニアとして約半年ほど働いています。
ソースを探すことに四苦八苦したので、メモとして役に立ちそうな情報を書いていきたいと思います。
さて、クライアント様からのご依頼は、
Mediumっぽいレイアウト＆スタイルということでした。
- PCからだと3カラム、記事の左右に余白
- 左カラムに動くサイドバーとSNSシェアボタン
ソースコードを読んだりして地道に作りました。
こちらのサイトはお洒落ですね〜なんともわかりやすい。
ただ、課金制になってから(?)なのか何件か読むとログインしなきゃのでほとんど使っていませんが... :P
1. まずはグリッドレイアウトで、ページの枠組みを作ります。
このページを使うと簡単に作ってくれます。
CSS Grid Generator
.grid{display:grid;grid-template-columns:18%1fr18%;grid-template-rows:70px1frauto;}1frは、指定したコンテントの幅や高さに合わせてくれます。
そこで、ブログ記事など大きさを固定できない場合に便利です。
以下、引用
2. サイドバーのスタイル
.article_body{height:100%;grid-area:2/2/3/3;}.article_sidebar-container{grid-area:2/1/4/2;//この辺の高さの設定が大事overflow:hidden;position:sticky;position:-webkit-sticky;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}.article_sidebar{//こっちも高さをfit-contentにheight:-webkit-fit-content;height:-moz-fit-content;height:fit-content;text-align:center;}.article_footer{grid-area:3/2/4/3;}左のサイドバーのスタイル設定は、すこし違うとスクロールしてついてくる高さが変わったりします。そこで結構てこずりました。
完成はこんな感じ↓
See the Pen Grid Css blog layout by Saki Adachi (@sakiadachi88) on CodePen.
ありがとうございました！