【iSara模写コーディング】プログラミング歴1ヶ月の初心者が挑戦してみた!-画面ごとの難易度を解説-

今回の記事では、iSaraの模写コーディングでつまずく部分の解説と画面別の難易度を紹介していきます。

各画面のコーディングを記載している記事があるので参考にしてみて下さい。
初心者が書いたコーディングなのできれいではないです…。

画面を20個+ヘッダー、フッターに分けて難易度を★☆☆☆☆~★★★★★に分けてみました。

目次

ヘッダー ★★★★★

まず最初にヘッダーから取り組み始めるかと思いますが、このヘッダーはかなり難しいです!

画面上に固定させるためにposition: fixed; を使用したり、右側のボタンが下の画像のように変化するのも大変です…。

そして、一番大変なのが右上のアイコンをクリックするとお問い合わせフォームにスクロールして移動することです。

そのためにはjqueryを記述しなければなりません。
この部分は後回しにしてもよさそうですね!

main-1 ★★☆☆☆

模写コーディング始めたての初心者にとっては背景の設定が大変ですよね…。
背景の設定で必要になってくるプロパティをまとめてみました!

background-repeat: no-repeat; … 背景画像を反復させずに1枚にする
background-size: cover; … 縦横比を保ったまま、余白ができないように画像を拡大
background-position: center; … 画像を中央に固定、bottomやleftなどを指定することもできる

上のプロパティを覚えていれば、きれいに画像を貼り付けることができます!

main-2 ★★☆☆☆

この画面では画面幅を小さくすると改行される部分があります。
そんな時に役立つ技があります。

<p>ここは改行しない<br class="kaigyo">ここから改行</p>
.kaigyo {
   display: none;
}
@media screen and (max-width: 800px) {
  .kaigyo {
     display: block;
  }
}

このように<br>にクラスを指定することで、画面幅が小さい時だけに改行させることができます!

ぶーた

こんな使い方もできるのか!

↓main-1と2に取り組んだ記事はこちら

main-3 ★★★☆☆

この画面で特徴的なのは「」ですね!
「」の作り方を解説していこうと思います。

「」を作るには::before::afterを使うと便利です。

::before … 要素の前に疑似要素を追加
::after … 要素の後に疑似要素を追加

今回だと、エンジニアとして本当の自由を手に入れるためには?(h2)の前後に疑似要素を追加することで「」を作ります。

h2 {
    font-weight: bold;
    font-size: 1.8rem;
    padding: 30px 0;
    margin: 40px 0;
    position: relative;
    display: block;
    width: 70%;
}

h2::before,
h2::after {
    position: absolute;
    content: "";
    height: 50px;
    width: 50px;
}

h2::before {
    top: 0;
    left: 0;
    border-top: 4px rgb(235, 185, 77) solid;
    border-left: 4px rgb(235, 185, 77) solid;
}

h2::after {
    bottom: 0;
    right: 0;
    border-bottom: 4px rgb(235, 185, 77) solid;
    border-right: 4px rgb(235, 185, 77) solid;
}

これで完成です!

main-4 ★★★☆☆

この画面では上に飛び出たABOUTアイコンが特徴的ですね。
position: absolute; を指定して、中央寄せにすればOKだと思います!

中央寄せするにはABOUTアイコンに
left: 50%;
transform: translate(-50%);
を指定すれば、画面幅が変化したとしても常に中央配置にすることができます。

↓main-3と4に取り組んだ記事はこちら

main-5 ★★☆☆☆

この画面では画面幅が小さくなることで、下の3つの要素が縦並びになります。

display: flex; で指定して画面幅が小さくなる時にflex-direction: column; を記述すればOKですね!

main-6 ★☆☆☆☆

ぶーた

ここは休憩なのだ!

main-7 ★★★☆☆

丸い要素を横に並べるのが少し大変ですね。
丸い要素の高さをvwで指定して、さらにmax-heightを指定するといい感じになりますよ!

その際にwidthはautoを指定することによって、縦横比を保つことができます。

↓main-5と6と7に取り組んだ記事はこちら

main-8 ★★★☆☆

この画面は今までの総復習って感じですね!
「」がありますし、画面が小さくなるとdisplay: flex; からのflex-direction: column; もあります。

main-9 ★★★★☆

この画面はかなり複雑でしたね!
丸いアイコンが少しずれてたり、flexで表示させて折り返させなければなりません。

要素を折り返す場合にはflex-wrap: wrap; を使うと便利ですね!

↓main-8と9に取り組んだ記事はこちら

main-10 ★★★☆☆

この画面で特徴的なのは下に飛び出ている三角の部分ですね。
三角の部分は四角を回転させることによって、作り出すことが可能です

transform: rotate(45deg); を記述すると45°回転するので三角の部分を作り出すことができます。

main-11 ★★☆☆☆

今までの部分を模写していれば、この画面はササっと終わらせることができるかと思います!

↓main-10と11に取り組んだ記事はこちら

main-12 ★★★★☆

この画面ではが登場します!
tdやthなどが出てきますが、自分はすっかり忘れていたので手こずってしまいました…。

手こずっている様子

表は忘れやすいので、良い復習になりますね!

main-13 ★☆☆☆☆

ぶーた

これは簡単だ!!

↓main-12と13に取り組んだ記事はこちら

main-14 ★★★☆☆

この画面は要素が多い上に、画面幅が小さくなると大きく変化するため、けっこう大変でした…。

しかし、技術的には何とかなるかと思います。

main-15 ★☆☆☆☆

ここまで進んでいたら、この画面は簡単かと思います。
よって★☆☆☆☆

↓main-14と15に取り組んだ記事はこちら

main-16 ★★★★☆

この画面はレスポンシブ対応がかなり複雑で大変でしたね…。
レスポンシブがなければそんな難しくないよう思えます。

このように文章が変化していたり、丸の中身も大きく変わっていることが分かると思います。
これでかなりの時間を消費してしまいました…。

main-17 ★★☆☆☆

さあ、isara模写コーディングで何回も登場する「」ですね!
ここまできたらもう慣れたものだと思います!

main-18 ★★☆☆☆

ぶーた

もうこのレベルなら朝飯前なのだ!

↓main-16と17と18に取り組んだ記事はこちら

main-19 ★★★☆☆

この画面はお問い合わせフォームなのでhtmlの記述が少し独特ですね。

input … typeによって様々なものを作れる。
 type=”text” … 1行テキストボックス
 type=”submit” … 送信ボタン
textarea … 複数行のテキストボックス

これらを利用してお問い合わせフォームを作成することができます。
しかし、実際のメールのやりとりにはPHPが必要になってきますね…。

↓main-19に取り組んだ記事はこちら

main-20 ★★★★★

main-20ではjqueryが必要になってきます。
質問をタップすると、回答が表示されて、再度タップすると回答が非表示になる仕組みです。

ここで役立つjqueryのメソッドを紹介します!

toggleClass … 指定したクラスがあるなら削除し、ないなら追加する。
click … クリックされたら処理を実行する。
hasClass … 指定したクラスを持っているか判断する。
next … 同じ階層の次の要素を取得(今回はh3の次の要素であるh4を取得)
slideDown(slideUp) … スライドしながら表示(非表示)

これらに加えてif文などを利用していけば、完成させることができます。

↓main-20に取り組んだ記事はこちら

フッター ★☆☆☆☆

ぶーた

ふぅ…。これで完成なのだ!!

うーま

まだ、ホームに戻るボタンが残っているよ!

ホームに戻るボタン ★★★★★

右下にあるホームに戻るボタンは簡単そうに見えますが、スライドしながら戻るためにjqueryによる記述が必要になってきます…。

けっこう複雑なので記事を参考にしてみて下さい!

まとめ

iSaraの模写コーディングはかなり量が多いため、完成させている間にHTMLとcssを書くことに慣れてくるかと思います!

また、成長できるようなスキルが各所にちりばめられているのも魅力的ですね。
一応、私の模写コーディングのリンクを貼っておくので良かったら参考にしてみて下さい。

↓iSara模写コーディング
https://www.koga-portfolio.site/isara/

広告

よかったらシェアしてね!
  • URL Copied!
  • URL Copied!

コメント

コメントする

目次
閉じる