Webサイト リニューアル

レスポンシブルデザインとやらで、CSSのFlexを使ってみた。
カードっぽいデザインでとにかくコンテンツを区切って全部表示しただけなんだけどね。ブラウザの幅を変えると表示がにゅっと動いて楽しい。

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.flexchild {
  flex-basis: 250px;
  min-width: 0;   /*こうやるとうまく文章が折り返すらしい*/
  word-wrap: break-word;

  /*孫要素の配置を制御する場合は、子要素にさらにFlex指定するとよさげ*/
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

コンテンツの中身は別管理にして、ソートとかフィルタとかできるようにしたいな。

http://www.moreread.net/

さくらインターネットはWebフォントを無料でいろいろ使えるらしいので、使ってみたのだが、

JSで動的に挿入したコンテンツにWebフォントが適用されてないくさい。びみょ……。
画像の「品」の字は静的コンテンツ部分に登場しなかった文字。必要な文字だけフォントを取得する仕組みらしい。

あと改めてフォントいろいろ見比べたけど、Windowsではメイリオがブラウザの標準フォントになってるので、読みやすさの観点ではそのままでも特に問題ない気がしてきて、Webフォントを使うのやめた。