トラベルブログサイト

使用スキル

• HTML
• CSS

こだわり

一番上に横3つに並んでいるブログ一覧のタイトルのスタイリングです。
タイトルのテキストは一番長いものに合わせて、すべてのタイトルテキストが上下中央揃えになるようにしています。

苦戦した点

上記のタイトルテキストの高さが可変になるようにスタイルを当てたことです。この時は要素が縦に3つだったので親にdisplay: flex;を当てた上でjustify-content: space-between;をつけることで実現しました。

学んだこと

指定した行数以上の文章は非表示にし、三点リーダーで文章が続いていることを表す方法です。コードで書いてしまえば数行の短いことですが、私の中では革命的なスタイリングでした。

補足

この作品はCodejump様のコーディング練習の素材をお借りしたものです。