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

前回の記事

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

2018.02.10

メインコンテンツ最後の記事セクションを作成します。
基本的にトピックで作成した方法と類似しています。
異なる点は記事のブロックを2列する配置をCSSで行なっています。

Contents

HTML

HTMLは今までの内容と同じです。
タイトル、説明文、日付、画像の順で配置します。

CSS

ボックスのデザインです。
中の画像をpostition:absoluteで配置するため、親クラスにはrelativeで配置します。

imageは親クラスからの相対位置を指定します。
top0,left0で左上から横幅100%で画像を配置します。

2列に配置するので奇数番目を左寄せ、偶数番目を右寄せにします。

title,descはNEWSで使った方法でデザインしています。
overflow: hidden;,overflow: hidden;,text-overflow: ellipsis;で長い文字列は3点リーダにします。

position: absolute;で日付の位置を調整します。

これでメインコンテンツのデザインは終了です。
次回からはサイドメニューをデザインしていきます。

【スタンダードデザイン】サイドコンテンツ(検索窓)の配置Step6

2018.02.11

コメントを残す

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