サンプルサイトーフッター編

第4回: footer


1. Flexboxの基礎

Flexboxは、従来のfloatinline-blockなどでは難しかった以下のようなレイアウトが簡単にできます。

複雑なレスポンシブデザインが簡単に作成できる:画面サイズに応じて要素の並び方を変更可能。

要素の並び順や方向を簡単に制御できる(横並びや縦並び、逆順も可能)。

スペースの自動調整:コンテナの幅に合わせて、要素が均等に並ぶように自動調整が可能。

2. レスポンシブデザイン

Flexboxでのレスポンシブ対応方法

flex-directionを画面サイズに合わせて変更する
Flexboxのflex-directionプロパティを使い、デスクトップでは横並び(row)、モバイルでは縦並び(column)にする方法です。これにより、画面幅に応じて自動で要素が並べ替えられます。

5. Flexboxのメリット

Flexboxは、簡単に要素を並べたり、柔軟なレイアウトを作成したりするのに非常に便利なツールです。特に、レスポンシブデザインのために必要な調整がしやすいため、デバイスごとの最適な表示を求められる現代のウェブ開発にとっては必須の技術と言えるでしょう。

模写サンプルサイト  elementary004

✪ 画像素材がないものはランダムで表示されるようになっています。フリー素材などでご用意ください。

おすすめChromeプラグイン一覧

プラグイン名特徴
GoFullPageウェブページ全体のスクリーンショットを簡単に取得できるブラウザ拡張機能です。
ColorZilla色を抽出するための拡張機能です。
WhatFontウェブページ上のフォントの情報を簡単に確認できるブラウザ拡張機能です。
PerfectPixelデザイナーが作成したデザインと実際にコーディングされたウェブページがどの程度一致しているかを確認・調整するためのブラウザ拡張機能です。

模写の手順

ステップ内容
ステップ 1構図を手書きか全画面スクショ(Go full page等)した後、ペイントツールで四角で囲い、大まかなclass,命名規則をあらかじめ決める。
ステップ 2HTMLの基本構造を作成する
ステップ 3CSSでレイアウトを模写する
ステップ 4 中級〜JavaScriptを追加して動きを再現する
ステップ 5最終調整を行い、検証ツールやPerfectPixel(chromeプラグイン)などで完成を確認する。