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

前回の記事

【スタンダードデザイン】HTML5とCSS3でヘッダーとフッターのデザインStep2

2018.02.08

今回はメインコンテンツをデザインしていきます。
下記の3つのセクションを追加します。

  • トピック-ヘッダーの下の目立つデザイン
  • NEWS-1行毎の新着記事をスクロールで複数表示できるデザイン
  • 記事-サムネイルと記事の説明

トピックのデザイン

HTML

タグはセクションタグで囲みます。
セクションタグの分け方はhタグを基準にします。セクションタグ内にはh2タグを使います。
イメージ、コンテント、説明、日付の順で書きます。HTML5からは日付用のタグがあります。

CSS

display: block; →縦に配置
margin-bottom: 30px; →topicの下のスペースを設定
box-shadow: 0 6px 4px -4px rgba(0, 0, 0, 0.15); →立体感を持たせるため影を影写

imageとcontentのwidthは50%ずつで左詰で配置(float:left)します。
contentの文字はpadding,line-heightで位置を調整します。

position,top,leftで親要素(topic)からの相対位置で固定します。これにより日付の位置を固定します。
あとはフォント周りのデザインです。

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

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

2018.02.10

コメントを残す

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