【スタンダードデザイン】メインコンテンツ(NEWS)の配置Step4

前回の記事

【スタンダードデザイン】メインコンテンツ(トピック)の配置Step3

2018.02.10

前回はトピックを作成しました。本記事ではNEWSの項目を作成します。
NEWS項目では複数のNEWSを枠内に収めるためスクロールができるようにします。
複数の項目が並ぶので見やすいように縞模様に色をつけます。

Contents

HTML

新しいNEWSセクションを作成します。
ul,liでリストを作成します。li内で「日付」「カテゴリ」「タイトル」を書きます。
これをCSSで横に並べます。

CSS

max-heightで高さを設定します。max-heightにすることで220px未満のときに高さが縮むようになります。
overflow-y: auto;で縦にのみはみ出た内容についてはスクロールできるようになります。
list-style-type: none;でリストのマーカーを表示さないようにします。
display: block;でli,aを縦に並べます。
この場合、HTMLないの改行がスペースになって表示されるのでfont-size: 0;を指定します。
このままではfontが表示されないので、後ほど別にfont-sizeを指定します。

nth-of-type(even)擬似クラスで対象クラスの偶数番目に対して設定することができます。
a:hover擬似クラスはカーソルを重ねたリンクの色を変更できます。

display: inline-block;で次の要素まで横並びにします。ナビと同じ要領です。
font-size: 1.0rem;親クラスでfont-sizeを0にしているのでここで指定します。

残りの要素もdisplay: inline-block;で横並びにします。
widthは合計で100%になるように幅を設定します。
overflow:hidden;,test-overflow: ellipsis;,white-space: nowrap;で長すぎる文章は3点リーダで表示を省略することができます。

次回は記事セクションを作成します。

【スタンダードデザイン】メインコンテンツ(記事)の配置Step5

2018.02.11

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です