[CSS]初心者にも分かりやすいスタイルシートのチュートリアル

スタイルシートの初心者にも分かりやすく、各要素に的確なマークアップを行い、ワイヤーフレームをビジュアル化するチュートリアルをSoh Tanakaから紹介します。

実装のイメージ

Styling Post Headings That Stick Out
demo

下記のチュートリアルでは、見出し、日付、カテゴリ、タグを含むブログのヘッダをステップに分けて実装していきます。

Step 1. Wireframe – HTML

ワイヤーフレームに基づいて、「ヘッダ」と「コンテンツ」をdiv要素で配置します。

Step 2. Styling Wireframe – CSS

ヘッダは絶対配置を使用し、コンテンツに重ならないようにpaddingを指定します。

実装のイメージ

Step 3. Post Header Wireframe – HTML

ヘッダ内の各要素を配置します。
見出しはh2、日付はstrong, small、カテゴリはpを使用します。

実装のイメージ

Step 4. Styling Post Header – CSS

日付のスタイル

「月」はstrong、「年」はsmallで配置し、全体は「left: -50px;」を使用してコンテンツから突き出しているように配置します。

実装のイメージ

コメントのスタイル

日付と同様に突き出したデザインのため、top, rightに-10pxを指定して配置します。

実装のイメージ

見出しのスタイル

コメントが見出しの上に配置されているので、重なり合わないようにpaddingで指定します。
text-shadowを使用して対応ブラウザにはより美しい装飾をしています。

付帯情報のスタイル

カテゴリ・タグなどの付帯情報はp要素で実装し、背景が適切に表示されるようにpadding-leftに60pxを指定します。

完成

完成したデモは、下記ページを参照ください。

デモのキャプチャ

完成したデモ

sponsors

top of page

©2018 coliss