HTML CSS JavaScript

【iSara模写コーディング】勉強になったことや意識すべき点を勝手にまとめました

iSara模写コーディング

どうも多浪Fランぼっち底辺大学生です。

 

今回はiSara(イサラ)のWEBサイトを模写コーディングした感想について、紹介していきます。

iSara模写コーディングって長いし難くね??

何か意識すべきこととか、勉強になる参考書なんかあるか?

と言った、疑問について応えていきます。

 

まだiSara模写コーディングは途中ですが、知識の整理がてらに記事を書いた次第であります( ..)φメモメモ

その範囲内で学んだことを共有したいと思います。

 

この記事の内容
  • 模写コーディングをするにあたっての準備
  • iSara模写コーディングで意識すべき事
  • iSara模写コーディングで身についた事
  • 勉強になる参考書や学習コンテンツ

具体的には上記の事について説明します。

ProgateでHTML・CSSをやっている初心者の人たちにとっても、有益な情報になりえるのではないかなぁ~と思いますので、サラッと目を通してくれれば嬉しいです。

 

※今回はわたくしのソースコードを記載しませんが、もし見たいのなら是非コメントをください(^o^)/

iSara模写コーディングをする前に学習すべきこと

iSaraサイトの模写コーディングはボリュームがあり、かつレスポンシブデザインに対応したコーディングをしないといけないため、記述量が多くなり初心者には難易度が高い内容になっています。

またHTML・CSSでコーディングをするにあたって、必要最低限の知識や考え方が必須なので、初心者がいきなりiSaraサイトの模写コーディングをすることは効率の悪い学習になってしまいます。

なので、iSara模写コーディングをする前に以下の3つの項目を学習することを強くおすすめします。

  • Progate(プロゲート)
  • Flexbox(フレックスボックス)
  • CSS設計

少し説明していきますね(‘ω’)ノ

Progate(プロゲート)

おそらくこの記事を読んでいるあなたはオンラインプログラミング学習コンテンツのProgateを知っている事でしょう。

ならば話は簡単で、プロゲートのHTML・CSSの全てのコースで学ぶ内容に関して、知識や理解を持っておく必要があるということです。

 

Progateで学ぶ内容は基礎的なことなので、この基礎的なことが理解できていないとも模写コーディングもクソもありません。

まずは実際に手を動かして「どうすれば右に余白が作れるか?」とか「横並びに配置するには・・・」などの、基礎知識をプロゲートを通して学びましょう。

【評判】有料版Progate(プロゲート)を1ヶ月利用した感想どうも多浪Fランぼっち底辺大学生です。 今回はわたくしが有料版progate(プロゲート)を一ヶ月の期間利用した感想を書いていこう...

Flexbox(フレックスボックス)

Flexbox(フレックスボックス)とは、要素の並び方を指定する技法の事です。

例えば、ブロック要素を横並びにしたい時にはスンゴイ活躍しますね(-ω-)/

 

以下の3枚の画像をご覧ください。

iSara模写コーディングでフレックスボックスを利用する iSara模写コーディングでフレックスボックスを利用する iSara模写コーディングでフレックスボックスを利用する

フレックスボックスを使いこなせるようになれば、画面幅に合わせて自動でアイテムの配置を調整することが出来ます。

iSara模写コーディングではフレックスボックスを利用する箇所が多々ありますので、フレックスボックスの概要を理解しておくことをおすすめします。

そうすれば、floatプロパティを使わずとも思い通りの配置を実現することが出来ますからね。

CSS設計

皆さんは「プロゲートを学び終たはいいが【クラス名の付け方】や【id名の付け方】って、どうすればいいの?

と疑問を持っていませんか?

また、「HTMLを記述してCSSで装飾する際に、ゴチャゴチャしていてCSSの記述がやりにくい!!」なんてことにはなっていませんか?

  • クラス名やid名の付け方に迷う
  • コードが複雑で思うように装飾できない

ザックリと言えば、このような悩みを避ける手法としてCSS設計があるんですね。

 

さて、iSaraのWEBページを見るとボリュームがあり、記述量が長くなることが予測できると思います。

模写コーディングをするにあたって、

「ここは○○のクラス名を付けて、こっちは・・・う~~ん、、、△△にしておくか」と、行き当たりばったりで記述していては、いずれ複雑になり何が何だか分からなくなる状態になってしまいます。

HTMLとCSSのコードが複雑

ボリュームが少ないWEBページならまだよいのです。

しかし、iSaraのようにボリュームがあるWEBページだと致命的ダメージになるので、まずは全体像を確認して設計を立ててから記述を始めるべきなんです。

 

途中まで進めたはいいけど、ゴチャゴチャして思うように装飾できない・・・
このままコーディングを続けても、さらに複雑になっていく気がするし・・・。
記述する前に設計するべきだったな

 

コードを修正したり、あるいは全部消して最初からやり直したり、無駄な時間が増えると効率が悪くなります。

なので、CSS設計を行うことが大事なんです(-ω-)/

 

まずはCSS設計を行うことで、スラスラとコーディングが出来るし、コードは複雑になりません

CSS設計を行うとWEB制作が効率化される

多少時間が掛かるにせよCSS設計を行うことで、コーディングの効率化が図れます。

コーディングが効率化されるとコーディングの時間が減ることは勿論、チーム開発に置いての連携も上手く取りやすくなるので、学んでおいて損は無いですね。

・・・・

 

というか、CSS設計は必須のスキルです!!!

ということで、わたくしがおすすめする勉強アイテムを紹介したいと思います。

模写コーディングに役立った参考書や学習コンテンツ

上記の【iSara模写コーディングをする前に学習すべき事】を踏まえ、わたくしが実際に役に立った参考書や学習コンテンツを紹介したいと思います。

  • CSS設計完全ガイド
  • Udemy:【JavaScript & CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

あっ、忘れていましたがProgate(プロゲート)は絶対にやっておいてください。

CSS設計完全ガイド

 1つだけレビューを参照させていただきます。

従来のCSS設計本で挫折した人、初心者、コーダー教育する人に是非お勧めしたい本

2020年3月1日に日本でレビュー済み

Amazonで購入

この方がレビューしている通り、

どのようなCSS設計をするべきなのか?

実際にどうのようにして設計をしているのか?

の問題を初心者に分かりやすく解説している書籍です。

 

この書籍を何度も読むことで、”より良いCSS設計”を実現することが出来るでしょう。

”より良いCSS設計”とは何かというと、具体的に4つ有ります。

  • 予測できる
  • 再利用できる
  • 保守できる
  • 拡張できる

※CSS設計完全ガイドより抜粋

クラス名やid名からどのような装飾がされるか予測でき、1ヵ所だけでなく複数ヵ所でも同様に利用が出来ること。そして、CSSに変更を施してもレイアウトが崩壊せず、色々な機能を柔軟に付け足していけることを目的としています。

何をどう設計すればWEBページを上手に制作できるのか、
少しずつ理解し実践できるようになってきたぜ☆

 

  • クラス名・id名の付け方が分からな
  • 期待した位置にオブジェクトが配置されない
  • WEB制作で稼いでいきたい

このような状態の人は絶対に勝った方が良いです!

モヤモヤしたモノがスッキリと解消しますよ(‘ω’)ノ

Udemy:【JavaScript & CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

udemyでフロントエンドを学ぶ

こちらはUdemy(ユーデミー)で販売されている学習コンテンツで、本格的なWEBページが作れることを目指した教材です。

 

udemyでフロントエンドを学ぶ

コチラの画像は【JavaScript & CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)の目次です。

CSSアニメーションJavaScriptを使いこなして画面をスクロールしたらイベントが発生する部分的なスキルが学べると同時に、フレックスボックスを使って全体のレイアウトを整えつつWEBページを完成させる手法が学習できます。

 

メリットはこれだけでなく、フロントエンジニアの方がどの様にコーディングをしているのかを見ることが出来るので、結構参考になりますね(^o^)/

皆さんもプロの人達が”どんなコーディングをしているのか”気になりませんか?

気になる・・・・
当たり前だよなぁ

 

本講座は約20時間とボリュームのある内容で構成されており、

学習を終える頃には「WEB制作で稼いでいくための道が明確になるような状態になります。

 

キャンペーン中なら1,200円だけで購入できるので、買うタイミングを逃さないように、今すぐUdemyに登録しておく事をおすすめします。


╲セールを逃すな!!/
Udemy公式サイト

—購入30日間返金無料—

模写サイトの画像や色情報を収集するツールを紹介

模写コーディングをする前に画像や色情報を準備しなければなりません。

そんなときに役立つChromeのツールが2つ有ります。

  • 画像グラバー
  • ColorZilla

※ブラウザがGoogleChromeであること!!

ほんの少し使い方を解説します。

画像グラバー

例えば、iSaraのページ内で【画像グラバー】を使ってみましょう。

画面右上の拡張ツール一覧に含まれています。

模写コーディングで役立つChromeツール

 

このように、現在滞在しているページ内の画像を丸ごとダウンロードできるんですね!

使い方は本当に簡単で、ツールを開いて【Download all】を押せば速攻で画像を取得できます。

 

まんがいち画像が取得できない場合は、デベロッパーツールから参照して画像を入手しましょう。

※デベロッパーツールは「F12キー」を押すか、右クリックを押してメニューから「検証」をクリックすると開けます。

デベロッパーツールから画像を参照する

画像が見えずらくてすみません”(-“”-)”

【Soruse】 / top / isara.life / wp-content / themes/isara_v2 / img ←ココ

この手順でファイルを開いていけば、画像一覧に参照することが出来ます。

ColorZilla

ColorZilla】も直感的に使用できるます。

Chromeツールで色を取得

赤丸で囲んだスポイトマークの色の抽出を選択します。

Chromeツールで色を取得

そして、取得したい色をクリックすると画面上に色情報が表示され保存されます。

 

こんな感じで簡単に使えるんですね(‘ω’)ノ

iSara模写コーディングをするメリット・意識すべき事

それでは改めて、iSara模写コーディングをするメリットや意識すべきことをまとめたいと思います。

  • フレックスボックスを習得できる
  • レスポンシブデザインを意識できる
  • CSS設計について理解を深めることが出来る

コーディングのボリュームが豊富な故に、フレックスボックスの使いどころは多いですし、制作の途中で挫折・破綻しないようなCSS設計に関しても、自分なりに考えて理解を深めることが出来ると思います。

あとは、レスポンシブデザインもですかね!(^^)!

わたくしの個人的な感想

実際にわたくしも模写コーディングをやっていて、

なんかゴチャゴチャして上手くいかない・・・・、最初からやり直すか(´・ω・)」、

フレックスボックスを使ってみたけど、お手本のようにはならない・・・」とか

画面のサイズによっては「改行」が消えてるけど、どうすればいいんだ??!」なんて色々と試行錯誤をしてきました。

 

その結果、しっかりと設計した上でコーディングを始める重要性に気づきましたし、フレックスボックスの使い方や改行の消し方などのテクニックも学ぶことが出来ました。

実際に手を動かして期待通りに実装できているかどうかを検証をすることで、知識が定着する感覚がよーーく分かりました。

iSara模写コーディングおすすめです!!

 

そろそろ、クラウドワークスやココナラで案件を受けられるかもなぁとワクワクしています。

皆さんも登録は済ませましたか??

 ココナラ クラウドワークス

案件取得に向けて頑張ろう!!

以上で【iSara模写コーディング】勉強になったことや意識すべき点】についての紹介を終わります。

わたくしもまだiSara模写は途中ですから、完成させてから案件の受注をして行こうと思います。

何よりも完成させた自信が付きそうですからね(-ω-)/

 

それでは。

人気ブログランキング