目次
HTML編
dlの中にdivタグを入れられる
HTML5.2からdlタグ直下にdivが入れられるようになりました。
dt、ddをまとめてきれいに見せることができます。
※ulタグ直下はNGなのは変わらずです
aタグの中にhrefを入れなくていい
HTML5からaタグのhref属性が必須ではなくなりました。
hrefなしは、aタグを残したままリンクを一時的に解除したい場合などにつかえます。
CSS編
コンテンツの幅に合わせたサイズを指定できる【fit-content】
widthやheightの値として使います。便利…。
文章の省略【text-overflow: ellipsis＆line-clamp: n】
投稿の一覧ページである程度以上の文章は省略したい時、PHPで文字数の制限をするという方法もありますが、見た目がそろわないという悩みがありました。
CSSでは見た目重視の省略ができるので、悩みが解消されました。
■方法1 text-overflow: ellipsis
1行のみの表示で省略する場合はこちらのCSSでOKです。
下記も一緒に設定してあげる必要があります。
overflow: hidden;
white-space: nowrap;
参考：text-overflow – CSS: カスケーディングスタイルシート | MDN
■方法2 line-clamp: n
2行以上で省略する場合はこちらのCSSを使います。-webkit-line-clamp: n; でn行目からは省略表示ができます。
また、現在はベンダープレフィックスが必要になります。
下記を一緒に設定してあげる必要があります。
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
