【コーディング課題】XDからコーディングをしよう【上級編】

未経験からWebデザイナーを目指している方向けにコーディング課題を作成したよ！
今回は上級編ということで、少し難しいかもしれないけどチャレンジしてみてね★

このようなデザインカンプを配布しています。

今回は、実務を想定して画像の書き出しからご自身で進めてください！

画像を書き出すときはRetina対応のために2倍サイズで書き出して、圧縮して使用しましょう！圧縮にはオンラインのサービスを使用すると便利です。
（「画像圧縮」で検索してね！）

Contents

1 こんな人におすすめ！
2 課題データのダウンロード
3 上級編を終えた方へ

こんな人におすすめ！

ある程度のレイアウトをコーディングできるようになってきた人のスキルアップに！
ポートフォリオに掲載できるサイトをコーディングしたい方に！

今回の課題は、クリ★スタコーディング課題の初級編・中級編を終えられた方のレベルを想定しています！ぜひスキルアップに役立ててください😊

課題データのダウンロード

課題のデザインカンプはこちらのリンクからダウンロードしてください。

まずはXDのカンプをダウンロードして、画像を書き出してフォルダを整理しましょう！不明点は検索しながらやってみましょう。

回答を見ながら進めたい方は以下の解説記事をご覧ください。

2021年9月15日【コーディング課題〜上級編〜】解説記事

上級編を終えた方へ

コーディング課題上級編の学習お疲れ様でした！！

このレベルができれば、コーダーとして問題なく働けるでしょう😊
さらに実務の現場で活躍するためにやるべきことを簡単に紹介します！

コーダー、フロントエンドエンジニアを目指している方は参考にしてください。

①CSS設計を学ぶ

今回のコーディング課題ではCSS設計については触れていません。

CSS設計の知識は、修正しやすい・管理しやすいサイトを構築するためには必須の知識です。

CSS設計について学びたい方には以下の書籍がおすすめです。

[kattene] { “image”: “https://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B0856YMH7L&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=cresta2019-22”, “title”: “CSS設計完全ガイド　～詳細解説＋実践的モジュール集”, “sites”: [ { “color”: “orange”, “url”: “https://www.amazon.co.jp/gp/product/B0856YMH7L/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B0856YMH7L&linkCode=as2&tag=cresta2019-22&linkId=d3c46905a2fd2ebcc21b097e37751468”, “label”: “Amazon”, “main”: “true” } ] } [/kattene] [kattene] { “image”: “https://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=4844336355&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=cresta2019-22”, “title”: “Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法”, “sites”: [ { “color”: “orange”, “url”: “https://www.amazon.co.jp/gp/product/4844336355/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4844336355&linkCode=as2&tag=cresta2019-22&linkId=5ac68428f100a44ea5312890462fd5c4”, “label”: “Amazon”, “main”: “true” } ] } [/kattene]

※CSS設計を学ぶのは就職してからでOKです。まずは実務をやることを優先しましょう。

②Webアクセシビリティを学ぶ

Webアクセシビリティはコーディングだけに関係する概念ではありませんが、Web制作に関わる者としては勉強しておいた方が良いでしょう。

[kattene] { “image”: “https://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B06XWC1TWC&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=cresta2019-22”, “title”: “コーディングWebアクセシビリティ: WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション”, “sites”: [ { “color”: “orange”, “url”: “https://www.amazon.co.jp/gp/product/B06XWC1TWC/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B06XWC1TWC&linkCode=as2&tag=cresta2019-22&linkId=ac1b80f474c221376e04ff10cfcacf4f”, “label”: “Amazon”, “main”: “true” } ] } [/kattene]

また、三井住友銀行のアクセシビリティガイドラインが非常にわかりやすく詳細にできています。アクセシビリティについて学びたい場合は一読することをおすすめします。

③JavaScriptを学ぶ

フロントエンドエンジニアを目指す場合、JavaScriptの仕様を理解している必要があります。

JavaScriptを学ぶには以下の書籍がおすすめです！

[kattene] { “image”: “https://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B01LYO6C1N&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=cresta2019-22”, “title”: “改訂新版JavaScript本格入門～モダンスタイルによる基礎から現場での応用まで”, “sites”: [ { “color”: “orange”, “url”: “https://www.amazon.co.jp/gp/product/B01LYO6C1N/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B01LYO6C1N&linkCode=as2&tag=cresta2019-22&linkId=4582734b32843bed2d41e4f7ed0a6bd8”, “label”: “Amazon”, “main”: “true” } ] } [/kattene] [kattene] { “image”: “https://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B06XNQCW7B&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=cresta2019-22”, “title”: “徹底マスター JavaScriptの教科書　プログラミングの教養から、言語仕様、開発技法までが正しく身につく”, “sites”: [ { “color”: “orange”, “url”: “https://www.amazon.co.jp/gp/product/B06XNQCW7B/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B06XNQCW7B&linkCode=as2&tag=cresta2019-22&linkId=9df56b56da1824891b16c35a1d627ec0”, “label”: “Amazon”, “main”: “true” } ] } [/kattene]

フロントエンドエンジニアになる目安として、ハンバーガーメニューやアコーディオンメニューなどを、jQueryやその他のライブラリを使用せずに実装できるレベルを目指せば良いでしょう😊