模写ー基礎練習002

CSSとは

CSS（Cascading Style Sheets）は、HTMLで作成されたウェブページにスタイルやデザインを適用するためのスタイルシート言語です。CSSを使うことで、文字の色やサイズ、背景色、レイアウト、アニメーションなど、ページの見た目やデザインを自由にカスタマイズできます。

CSSは主に、以下のような役割を果たします。

視覚的なデザインの適用
- フォントやテキストのサイズ、色、行間など、文字の見た目を細かく設定できます。
- 背景色、画像、境界線（ボーダー）なども設定でき、ページの全体的な雰囲気を決めることができます。
レイアウトの制御
- FlexboxやGridなどのレイアウトツールを使って、ページ内の要素を画面上でどのように配置するかを設定できます。
- これにより、列や行などの構成を自由に作成し、特定のレイアウトを実現できます。
レスポンシブデザイン
- メディアクエリを使って、デバイスの画面サイズや向きに応じてスタイルを切り替えることができます。これにより、スマートフォンやタブレット、デスクトップでも最適なデザインを提供できます。
アニメーションや動きの追加
- CSSアニメーションやトランジションを使って、ボタンのホバー効果やページ遷移のアニメーションなどを追加できます。これにより、ユーザーに視覚的なフィードバックを提供し、ページに動きや魅力を加えることができます。

CSSはウェブページの「デザイン」や「スタイル」を定義するための言語で、HTMLで作成した構造を美しく、わかりやすく見せるために欠かせません。CSSを習得することで、ウェブページを視覚的に魅力あるものにカスタマイズできます。

模写サンプルサイト　　beginner002

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

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

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