Webデザインの模写コーディングに挑戦

これまでのステップで、コーディングの基礎知識を学んできました。このステップからは、模写コーディングに挑戦していきます。 「模写コーディングってどうやるの？」と思うかもしれないので、まずは課題サイトの模写コーディングの進め方について説...

headerのコーディング解説

コーディングの準備 コーディング課題一覧からコーディング課題No.001を選択し、デザインファイルの表示してください。また、Visual Studio Codeを開いてコーディングできる準備をしておきましょう。 コーディング解説 コーディング課...

bodyのコーディング解説

このステップではコーディング課題No.001のbodyのコーディング解説を行います。 コーディング解説 課題No.001のbody部分ですが、合計5つのセクションから構成されています。このコーディング解説では上から3つまで（ヒーローイメージ / About...

footerのコーディング解説

このステップではコーディング課題No.001のfooterのコーディング解説を行います。コーディング解説の最後のステップとなります。 コーディング解説 コーディング課題No.001のfooter 上記画像の箇所を解説していきます。早速コーディンを...

レスポンシブとは

レスポンシブとは「レスポンシブWEBデザイン」の略語で、異なるデバイス（PC、タブレット、スマートフォンなど）でWebサイトが適切に表示されるようにするデザイン手法のことです。 画面サイズに応じてレイアウトが変わるように設計されているため、...

メディアクエリ

メディアクエリとは、CSSの記述においてWebページのデザインを異なるデバイスや画面サイズに合わせて調整するための方法です。 簡単に言うと、メディアクエリを使うと、スマホ、タブレット、デスクトップなどの異なるデバイスで異なるスタイルを適用...

Chromeの開発モード

Chromeの開発モードとは Google Chromeにデフォルトで搭載されている開発者向けの検証ツールです。 HTMLやCSSなどからレイアウト崩れの原因の特定や、ページ改修前後の検証など、様々な面で活用ができます。 Chromeの開発モードの起動...