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

この記事を書いた人

PENGIN LLC.

PENGIN BLOGは、LPやECサイト制作を中心に行うPENGIN LLC.が運営しております。弊社は、プログラミング教育などのテクノロジー教育に関わったメンバーが多数在籍しているため、当メディアを通じて、Web制作をご検討中の企業様やWeb制作を学習中の方の学習に役立つ情報を発信しています。

PENGIN

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

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

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

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

こんな人におすすめ！

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

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

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

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

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

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

公開するときの注意

1点だけお願いです。

公開する場合は上記記事を参考にBasic認証をかけておいてください。

<meta name="robots" content="noindex , nofollow">

一時的な公開で、パス設定までは必要ない場合、上記のタグをheadタグに記載しておいてください。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="noindex , nofollow">
  <link rel="stylesheet" href="style.css">
  <title>コーディング課題（PENGIN BLOG）</title>
</head>

↑headタグ全体のイメージ

このコードの意味は下記の通りです。

Google検索時にヒットさせない
ページ内からのリンク先にGoogleのロボットをたどらせない

Google検索上には検索ユーザーが求めている実際のコンテンツが表示されるべきなので、課題でコーディングしたページがGoogle検索にヒットしてしまうのは良くないことです。

ここでは細かい説明は省きますが、name=”robots“はGoogleのロボットを指し、contentのnoindexは、Googleにページをインデックスさせない（検索結果に表示させなくする）指定です。

また、nofollowはページ内のaタグなどで指定したリンク先に、Googleのロボットをクローリングさせない（たどらせない）指定です。もし外部のサイトなどをリンク先にする場合、クローリングすることでリンク先（相手）のGoogle評価を意図せず下げてしまう可能性があるため、それを少しでも排除するために書いておいてください。

※nofollowの効果は絶対でないです（たどって欲しくない、とGoogleに伝える意味合いです）。外部サイトをリンク先にしないのであれば設定しなくても大丈夫です。