プログラミング

Write模写の解説(ソースコード付き)〜ヘッダーHTML編①

⏰この記事を読むのにかかる時間⏰: 約142

 

どうも友哉です。

私は2020年の5月からDMM WEBCAMPと言うプログラミングスクールに通っていました.

 

今では無事に卒業しているのですが,2020/08/23現在、転職活動中で何か勉強しなきゃと言うことで模写コーディングに取り掛かりました。

今日は模写コーディングの中でもWriteと言うサイトの模写をしたので解説していきます。

いくつかの記事に分ける予定ですが記事を読んでいくことであなたも同じように模写を終えることができると思います。

 

まずはWrite完成版のソースコード

 

以下が今回のソースコードとなります。

 

 

See the Pen
oNxBXRK
by 友哉 (@853ym45c1qboote)
on CodePen.

 

模写するにあたって参考にさせていただいた方は玉袋さんです。

 

動画の方が勉強しやすいと言う形は上記に掲載した玉袋さんの動画を参考にしてみることをお勧めします。

実際私も他の袋さんの動画を見て完成させたと言っても過言ではないので本当にオススメの動画です。

 

Write模写の解説〜ヘッダー部分〜

 

 

まずはヘッダーから作っていきましょう。

今回は以下のような構成でヘッダーを作成していきます。

ここはあんまり神経質になる必要はないです。

大体こんな構成になってるんだな程度で抑えておければ大丈夫です。

 

  1. headerを準備
  2. headerの中にcontainerを作る
  3. containerの中にheader-leftを作る
  4. header-rightの中にheader-navを作る
  5. containerの中にheader-rightを作る
  6. header-navの中にgnavというクラス名のulタグを作る
  7. liタグを4つ作る。

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

大まかな流れは上の通りなのですが、文字に起こすとかなりわかりにくいので画像と同じようになれば大丈夫です。

 

 

HTMLがかけたら次はCSSで装飾していきましょう。

ここまででもそこそこのボリュームがあると思いますが、1番大変なのはこの部分なのでがんばりましょう。

 

CSSについては次回描いていきます。

 

CSS装飾はこちら

 

ABOUT ME
ともや
大卒でフリーターを半年したのち、公務員として約2年勤務するも適応障害で退職。 その後は引きこもりニートを1年、転職を4回、短期離職を3回という社会不適合者ぶりを発揮する。このままではマズイと思い本気の転職を決意。現在はホワイト企業の商社で働いている。詳しいプロフィール

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です