建築会社のホームページ

今回は建築会社のホームページをコーディングしてみましょう。

難易度★★★の問題には、スマホデザインもご用意しています。
一緒にレスポンシブコーディングにも挑戦していきましょう！

レスポンシブコーディングをするときは、メディアクエリを使います。
コードを覚える必要はありません。
すぐに見られる場所にメモしておきましょう！

/* スマホ向けレイアウト */
@media screen and (max-width: 670px) {
    /* ここにコードが入ります */
}

デザイン

デザインはこちら

※Figmaのリンクが開きます。

画像ダウンロードはこちら

画像はこちらからダウンロードできます。
Figmaからご自身で書き出して使用していただいてもOKです！

回答コード

回答コードはこちらからダウンロードしてください。

回答コードはこちら

最後まで取り組んでくれた皆さんへ

コーディングを学ぶのが楽しい！と、
少しでも思っていただけたら本当に嬉しいです。

ここまで一緒に継続してしてくれた皆さんは、
コーディングのスキルが着実に伸びているはずです。
自信を持って、次の一歩を踏み出してくださいね。

コーディングをもっと学んでいきたい方へ

もしコーディングをもっと詳しく学んでいきたい、
仕事にしてみたい、と思ってくださった方に、
おすすめのスクールを紹介させていただきます。

デイトラはコーディングを初めとしたWebスキルを学ぶことができるオンラインスクールです。

実は「どこよりもやさしいコーディング練習帳」の中の人である私も、
デイトラからコーディングを学び始めました。

私がデイトラをおすすめする理由は、必要なスキルがしっかりと身に付くのはもちろん、
運営の皆さんが本当に受講生のことを考えてくれているからです。

受講生が現場で活躍できるスキルを身につけられるよう、
考え抜かれた運営をされています。

メンターのサポートがついているので安心して質問できるし、
時代の流れに合わせて教材を常にアップデートしてくれています。

ぜひ、ホームページを覗いてみてくださいね。

※上記のバナーはアフィリエイトリンクとなっております。
このサイトが少しでも皆さんのお役に立てていたら、デイトラをご購入される際は
上記のバナーからクリックしてご購入いただけると大変励みになります！