CodeJump | Blog

ヘッダー

position: fixed を使用し、スクロールしても常に上部に表示されるヘッダーを実装しました。

ロゴとナビゲーションメニューはFlexboxを使用して横並びに配置しています。

また、ナビゲーションは横スクロール対応にし、スマートフォンでも閲覧しやすい構造にしています。

ピックアップ記事エリア

トップに3カラムのピックアップ記事を配置し、position: fixed を使用して均等にレイアウトしました。
PCでは3列表示、スマホでは縦並びになるようレスポンシブ対応を行っています。

記事一覧（メインコンテンツ）

ブログ記事一覧はメインエリアに配置し、以下の構成で作成しました。

記事タイトル
日付・カテゴリ
アイキャッチ画像
本文抜粋
READ MOREリンク

Flexbox と余白設計を組み合わせ、読みやすさを意識したレイアウトにしています。

サイドバー

サイドバーには以下のコンテンツを実装しました。

プロフィール（Author）
人気記事ランキング（Ranking）
アーカイブ一覧（Archive）

各セクションは中央寄せと左寄せを使い分け、情報の視認性を意識しています。

フッター

フッターは3カラム構成で以下を配置しました。

About（プロフィール・リンク）
Menu（サイトナビゲーション）
Twitter埋め込みタイムライン

display: flex を使用し、PCでは横並び、スマホでは縦並びになるよう調整しています。

レスポンシブ対応

@media screen and (max-width: 767px) を使用し、スマートフォン表示に対応しています。

主な調整内容：

ヘッダーのナビゲーションを横スクロール化
ピックアップ記事を縦並びに変更
メイン＋サイドバー構造を1カラム化
フッターを縦並びに変更