30DAYSトライアル2nd– category –

2ndのDAY19の課題は「コーディング後の品質を担保するテスト」になります。 テスト・・・。自分が嫌いなフェーズです。 プログラミングして実際に動かすまでは好きなんですけど、それを細かくテストするのは眠くなってくるので嫌いなんですよね。 ダメな考...

2ndのDAY18の課題は「Webフォント、デバイスフォントの理解」になります。 「Webフォント？何それ？」な自分にめちゃドンピシャの課題です。 ちなみに課題開始前の自分は下記のようなイメージをしています。 Webフォント→ブラウザのフォント デバイスフォ...

2ndのDAY17の課題は「マウスホバー時の動きを付ける」になります。 DAY16までのコードの全てのリンク要素(aタグ)に対して、マウスホバー(:hover)時の動作を指定していきます。 マウスホバー時の動作サンプルとして下記記事が紹介されています。 【コピペOK...

2ndのDAY16の課題は「XDからフッターのコーディング」になります。 DAY15までの課題にフッターをレスポンシブ込みで追加していきます。これでDAY1から続けてXDからのコーディングシリーズで一つのLPの見栄えが完成することになるんですかね。 XDのデザイン...

2ndのDAY15の課題は「XDからお問い合わせフォームのコーディング」になります。 例のごとくDAY14までのソースコードにお問い合わせフォームのコードをデザインカンプから作成します。もちろんレスポンシブ対応も含みます。 それ以外の条件として以下が指定...

2ndのDAY14の課題は「XDからテーブルとGoogleMap埋め込みのコーディング」になります。 DAY13までのソースコードにテーブルとGoogleMapの埋め込みを追加していきます。もちろんレスポンシブ対応込みで。 デザインカンプから読み取れる以外の条件として以下...

2ndのDAY13の課題は「XDからニュース系のコーディング」になります。 DAY10(DAY11で修正があった場合はDAY11)までの続きにコーディングをしていきます。 今回もレスポンシブ対応込みの課題です。 HTMLの構成 これでいきます。 HTML作成 まずはHTMLのみを記...

2ndのDAY12の課題は「ボタン、見出しを自在に作れるようになる」になります。 HTML、CSSで利用頻度が多いであろう見出しとボタンのパターンをXDのデザインカンプから作成していきます。 これにより自力でパーツを作成できるようになることがベストですが、...

2ndのDAY11の課題は「PerfectPixel」を使ってチェック ＆ 修正」になります。 DAY9、DAY10で作成したレイアウトがデザインカンプからズレていないかのチェックを行い、ズレている箇所を修正という内容ですね。 デザインカンプのレイアウトを1mmのズレもな...

2ndDAY10の課題は「XDから横並びのカードのコーディング」になります。 DAY9で作成したヘッダー＋メインビジュアルにLPなどでよくみられるカード型のコンテンツ欄をデザインカンプから追加していきます。 DAY1と同じようにレスポンジブ混みでコーディング...