Title Image

ブログ制作記 #3

投稿日
Tags: Hugo Web

今回も細かいところを修正していきます。

コードブロックのスクロールバーの改善

前回コードブロックが横に入りきらないときはスクロールで見られるようにしました。

これによって、PCのChromeではスクロールできるときにスクロールバーが表示されるのでスクロールできることがわかるのですが、スマホのChromeで見るとスクロールバーは表示されないのでスクロールできることがわかりずらいです。

なので、以下のCSSをassets/css/main.cssに追記します(これ以降登場するCSSは全部ここに書き込んでいます)。これによって、WebKit系のブラウザではスクロール可能な時にコードブロックの下にスクロールバーが必ず表示されるようになります。

.highlight::-webkit-scrollbar {
  width: 100%; /* これを付けないと右端までスクロールできない */
  height: 8px; /* スクロールバーの高さ（横スクロール用） */
  background: #ccc; /* 背景色 */
}

.highlight::-webkit-scrollbar-thumb {
  background: #666; /* スクロールバー本体の色 */
  border-radius: 4px; /* 丸みをつける */
}

画像の表示の改善

前回、スマホなどの横幅が小さい端末で見るとコードブロックが突き出してしまう問題を修正しました。しかし、まだ謎の空白が右側にあったので調べたところ、画像がはみ出しているのを見つけました。

これを簡単に修正するには以下のCSSを追加すればよさそうです。大きさがbodyを超えないようにし、ついでに中央に置くようにしました。

figure img {
  max-width: 100%;  /* body の横幅以上に広がらない */
  margin: 0 auto;   /* 中央寄せ */
}

フッターを画面の底に表示する

現状ではコンテンツがページの高さを超えない場合、コンテンツのすぐ下にフッターが表示されるようになっていますが、画面の底に出るようにしたいです。

CSSをいじって、以下のようにしました。フッターを画面の底に置く方法はいろいろあると思いますが、個人的にはこのやり方が簡単で好きです。

body {
  /* ここは整理しただけ */
  color: #222;
  font-family: sans-serif;
  line-height: 1.5;
  margin: auto; /* 横の中央揃え */
  max-width: 768px;
  padding: 1rem; /* 余白 */
}

footer {
  border-top: 1px solid #222;
  margin-top: 1rem;

  /* (重要) これでフッターを画面の下部に固定する */
  position: sticky;
  top: 100vh;
}

html, body {
  /* (重要) 最小サイズを画面の大きさに合わせる */
  min-height: 100vh; /* 画面の高さいっぱいに表示 */
  box-sizing: border-box; /* padding や border が要素のサイズに含まれる */
}

おわりに

また少し良くなったと思います。CSSを少しいじるだけで結構変えられるものなんだなと感じました。Webの本質はCSSなのかもしれない(違う)。