模写ー基礎練習002

CSSとは

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

CSSの役割

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

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

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

模写サンプルサイト  beginner002

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

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

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

模写の手順

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