サブブログには僕にとって新しい技術を導入

f:id:Kawan0116:20210507164633p:plain

本日、チャリンコで買い物に行きました。

チャリンコは楽でいいですねぇ~。

ただ、5年以上乗っているチャリンコで雨風当たるところに置いてるのでサビが目立ちます。

まだ全然乗れますが、見た目的にちょっとなぁ~。

かと言って、新しいチャリンコを買うお金もないし。

今のところはそんな感じです。

さて、僕の場合、もう1つブログを持っています。

coool.blue

サブブログでは、このブログのトップページと変わらないデザインにしております。

しかし、CSSでちょっと違ったことをしています。

記事を横並びにする際「display:flex」あるいは「display:grid」、そして「float」のうちどれかを使うかと思うのですが、まず「display:grid」は使いません。

前は好んで使っていたのですが、IEで盛大にレイアウトが崩れます。

ネットの情報によれば使えるそうですが、僕の場合は無理でした。

そして、僕の場合は「display:flex」で大丈夫な感じになっています。

「float」に関しては使っていないです。何故なら、「display:flex」のほうが簡単だからです。

サブブログでも「display:flex」を使っていました。

しかし、ちょっと僕にとって新しい技術を導入。

それが、「column-count」なのです。

これ、「display:flex」と似たようなモノになります。

例えば、「column-count: 3」にすれば3列表示になります。

「display:flex」は必要ありません。

「display:flex」と「column-count」の違いはどこにあるのでしょうか?

あくまで僕の理解なのですが、「display:flex」は中身のコンテンツよって大きなモノと小さなモノがあっても上下はあっているという感じです。

一方、「column-count」はコンテンツに応じて合わせた高さになります。

逆に小さなコンテンツであったもそれに合わせた高さになります。

よって、「column-count」の場合はコンテンツの量に応じて高さが変わってきますので、コンテンツの見た目がガタガタになります。

しかし、「column-count」によって、いい感じの見た目になります。

大きさの異なるタイルを敷き詰めていくイメージです。

これをサブブログで導入しました。

気になる人は、サブブログをご覧ください。

よく見るといい感じにコンテンツが並んでいるかと思います。

ただし、「column-count」を使うと、コンテンツの1部が分離して表示される場合があります。

そのときは、「 break-inside: avoid」を使います。

僕の場合は、親要素に「column-count」、子要素に「break-inside: avoid」を使いました。

人によってどこに書くかは異なると思うので、もし、僕と同じようにしたい方はネット検索してください。

そういう訳で、サブブログにおけるトップページの改造を終えました。

IE対応で少し疲れましたけどね。今回は諦めた部分もありますけどね。

諦めた部分を何とかしたいですが、IEが重いので中々ブログが表示されません。

これがイライラしますね。

今のままでも全く問題ないですが、プライドが許せない(笑)。

まぁ、考えます。

おしまい。