模写ー基礎練習001

HTMLとは

HTML(HyperText Markup Language)は、ウェブページを構築するためのマークアップ言語です。HTMLを使って、ウェブページに表示するテキストや画像、リンク、フォームなどの要素を定義し、ウェブページの構造を決定します。HTMLは、インターネット上の情報を効果的に整理し、視覚的に表示するための基本となる言語です。

HTMLの役割

  • ウェブページの構造を定義:ヘッダー、本文、フッターなどページ構造を定義し、ブラウザや検索エンジンがページ内容を理解しやすくします。
  • コンテンツの意味を示す:見出し(<h1>~<h6>)、段落(<p>)、リスト(<ul><ol>)など、コンテンツの種類を示すためのタグを使用することで、ウェブページの内容を論理的に整理します。
  • リンクや画像の表示:他のページや外部リソース(画像、動画など)をHTMLタグを使って埋め込むことで、視覚的なコンテンツやナビゲーションができるようにします。

HTMLは、ウェブページの「骨格」を構成する基礎的なマークアップ言語です。ウェブデザインや開発に欠かせない基本技術のひとつであり、CSSやJavaScriptと組み合わせることで、視覚的なスタイルや動的な機能を付け加えることが可能です。

要件1

3つ並びのセクションはflexboxかgridを使用しましょう。

模写サンプルサイト  beginner001

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

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

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

模写の手順

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