はじめまして！こうだいです！(@kochan0218)現在大手化学メーカーの製造業の３交替勤務を行いながら、副業でプログラミングを行なっている29歳です。

プログラミングを始めて最初の頃（初めて3ヶ月目〜6ヶ月目くらい）は、色々な部分で躓き過ぎて、プログラミングが本当に嫌いな時期もありました・・・。

HTML？CSS？JavaScript？Jquery？って何？っていう思いで始めましたが、今になってようやく理解出来てきました。

学習記録　〜大まかな学習の流れ〜

・Progateで学習開始　　　　2020.03
・デイトラ中級編まで完了　　2020.12
・営業開始　　　　　　　　　2021.04
・案件獲得　　　　　　　　　2021.05
・WordPress学習開始　　　　2021.06

僕自身案件獲得までにかなりの時間を要しています。
色々なことに手を出し過ぎたのもありますが、継続が大事な事はもちろんです。

継続すれば必ず理解できます！理解できなくても、ググればOK。それでも分からなければ、周りに徹底的に聞く。いなければご相談乗ります！

この記事は自分自身が勉強開始して、3ヶ月目〜6ヶ月目くらいの時に躓いた部分をリストアップして解説している解説noteとなります。

各見出し事にワンポイントと、かなり理解しやすい記事を載せています。もし、躓いた際に該当箇所があればこのnoteを参考に勉強を継続していただければと思います。
Twitterにツイートした図解資料を載せているので、是非一度見て下さい。

リプ、リツイート頂けると今後更のモチベーションに繋がりますので、是非宜しくお願いします…笑

position: relative;とposition: absolute;の理解

プログラミングを始めて相対位置と絶対位置が全く分からず、本当に苦戦しました。皆さん最初は絶対に通る道だと思います・・・笑

以前に分からな過ぎて、自分自身理解する意味を込めて図解として残す事としました。このツイート皆さんからの反応が良過ぎてプチバズりツイートとなりました。

Positionとは
Positionは要素の配置場所を操作するプロパティ
・absolute＝絶対値
・relative＝相対値
・fixed＝固定位置

Positionプロパティのメリット
・高さや幅が変わっても配置が変わらない
・毎回CSSを微調整する必要がなくなる
・画面が違う端末でも同じ表示ができる

使用の際に特に注意しなければいけないのが、レスポンシブ対応です。

PCはオッケーでもスマホ対応は出来ていないっていう事があるので、注意して使用してください！

またどこにposition: relative; position:absolute;を使用するのかもしっかりと覚えてください。実装できないということがたまにあります・・・。

自分で言うのもなのですが、こちらのツイートはかなり分かり易いので是非見ていただきたいです！

Position: relative; position:absolute;をそれぞれ使用する事でどういう動きを行うのか、基準がどこでどういった動き方をするのか、を解説しています。

このツイートから分かる事は、皆さん躓くポイントは同じだという事です。なので自分だけ理解出来ていない。と自分を責めないで下さい・・・。笑

皆さん理解出来なくて苦しんでいますので。

内容の部分については、ツイートに飛んでいただければ図解が見れますので参考にしていただければと思います。

参考記事も載せておきます。

Flexboxの理解

Flexboxはコーディング案件の中でも必ず使われます。

頻出するFlexbox、いつも悩んでしまう水平方向の中央揃え、垂直方向揃えこの部分は毎回の様にどうだったっけ？って悩んでしまいますよね。挙げ句の果てに実装しているのに効かない。なんてことも多々あります。
display: flex;つけ忘れていませんか？かなり抜けやすいので注意が必要です。

Flex-boxを使用するメリットを下記に記載します。

Flex-boxを使用するメリット
①要素内の縦横の配置が簡単にできる(複雑なコードを書く必要がない)
②HTMLでの要素の順番にかかわらず、CSSだけで自由に表示順序を変えることができる
③要素間の幅の指定も柔軟にでき、要素内の分量が違っても、高さや幅を調整できる
④要素間の余白の設計をそれほど気にする必要がない

下記ツイートに図解しているので内容確認してみてください！
併せて参考記事を見るとより内容が理解できると思います！

こちらの記事かなりわかりやすいです。
ぜひ参考にしてみてください！

擬似要素理解編

擬似要素は使いこなせばかなり便利ですし、覚えておかないといけない部分ですよね。
よくこれどう使うんだっけ？と毎回の様に調べてようやく理解する。
これの繰り返しです・・・。
before,afterはかなり頻出してくるので重要ですね。

擬似要素before,afterの活用方法
①文章を記号で囲む
②見出しに英字を配置する
③アイコンを配置する
④吹き出しをつくる
⑤要素の影に背景画像を配置する

①文章を記号で囲む

HTML
<p class="text">テキスト</p>


CSS
.text::before {
   content: "『";
}
.text::after {
   content: "』";
}

上記のコーディングで　　　『テキスト』　　といった文章を記号で囲むコーディングが可能になる。

②見出しに英字を配置する

HTML
<h2 class="service">サービス</h2>


CSS
.service {
   font-size: 30px;
   font-weight: bold;
   text-align: center;
   position: relative;
   padding-bottom: 25px;
   border-bottom : solid 1px #cacaca ;
}
.service::after {
   content: "service";
   font-size: 12px;
   font-weight: bold;
   color: red;
   position: absolute;
   bottom: 10px;
   left: 0;
   right: 0;
}

上記のafterを使用したコーディングを行うことで、添付写真の様な見出しのコーディングが可能になる。

③アイコンを配置する

HTML
<div class="content new"><p>コンテンツ内容</p></div>


CSS
.content {
   display: inline-block;
   background-color: #ededed;
   width: 200px;
   height: 100px;
   padding: 20px 10px;
}
.new {
   position: relative;
}
.new::after {
   content: "NEW";
   text-align: center;
   vertical-align: middle;
   width: 40px;
   height: 20px;
   font-size: 14px;
   font-weight: bold;
   color: #ffffff;
   background-color: #ff744d;
   position: absolute;
   top: 0;
   left: 0;
}

上記のコーディングを行うことで、下記の添付写真の様な左上にアイコンを実装することが可能です。アイコン実装の頻出率はかなり高いので、覚えておいた方がいいです！確かこういう実装してたなあってくらいで、調べれば問題ありませんので、軽く頭に入れておくくらいでOKです。

④、⑤についても考え方は同じなので是非チャレンジしてみてください！

より理解が深まる図解ツイートと、参考記事を載せておきますので、是非確認してください！

分かり易い記事も載せておきます。参考にしてみてください。

margin、paddingの理解編

かなり初歩的な部分ですが、理解していないと苦しみます。
基本的な部分は理解しておいた方がいい。
知っているだけでコーディングスピード爆上がりです。

どちらもかなり使用します！

padding、marginとは

padding：要素の内側の余白
margin：要素の外側の余白

詳しくツイートで解説しています！内容理解のために参考記事も是非見てください！

Font-size指定編

この部分は躓いたというよりも、font-sizeの指定方法があり過ぎて、どの方法が良いのかを調べて自分なりに出した答えを記載しています。
結果的に絶対に覚えておいた方が良いフォントサイズ指定方法はrem指定です。
rem指定はWeb制作会社の方から指定される事がある様です。
覚えておきましょう。
remでのコーディングはかなり保守性があるのでおすすめです。
remを知ってから、コーディングする際はremでコーディングする様にしています。どの記事を見てもrem設計は推奨されています。なので良さを理解した上で使用したいですね。レスポンシブ対応にもかなり使いやすいです。
参考書等を確認すると、それぞれにメリットがありという記載がありますが、自分の型を持っておいた方が、コーディングスピードも上がってくるかと思います。なので僕はremでの指定をこれからも行なっていこうと思います。
下記にremを使うメリットを記載します！

remを使うメリット
①ブラウザのフォントサイズ設定を変更したときに、その設定になる
②ルートの文字サイズを切り替えると、一括でサイズ調整が可能

①ブラウザのフォントサイズ設定を変更したときに、その設定になる

もしGoogle Chromのフォントサイズを推奨サイズ⇨小or大等に変更した場合、remであれば変更されるが、pxの場合は変更されません。

もしクライアントの方が高齢者の方や目が良くなくて、表示サイズの変更を行なった時に文字サイズが併せて変更すると、かなり優しいですよね。そこまで表示サイズを変更する人はいないと思いますが・・・。

②ルートの文字サイズを切り替えると、一括でサイズ調整が可能

通常1remは16pxですが、ルートのfont-sizeを16px⇨12pxとすれば、1remが12pxとなります。
なので、ルートの文字サイズを切り替えると一括でサイズ調整が可能です。

詳細については下記のツイートと参考記事を参照してみてください！

この記事を見れば、これからpx指定ではなく、rem指定でのコーディングを行いたくなります！
是非確認してみてください！

よく使うHTMLタグ一覧

ここでは良く使用するHTMLタグを図解にしてみました。
いつもdivが多くなってしまっていたので、この機会を利用して、意味の持ったタグを使用して見やすいコーディングを意識する様になりました。

Web制作会社の中にはコードを確認するところもある様なので、適正なタグを使用する癖付けは大切ですね。

こちらの記事を参考にしてみてください！

Sass理解編

Sassのはコーディングする際に必要不可欠といってもいいくらい使用頻度が多いです。
Sassを使うのと、使わないとでかなり差が出てくると思います。Sassを1から勉強するのは大変ですが、覚えていてると間違いないので必ず覚えよう！Web制作会社の中にはSassが使えないと話にならないという会社もある様です。
Sassを使うメリット

・保守性が高まる
・値を変数で管理できる
・入れ子で管理ができる

こちらの記事はかなり分かり易いです。Sassを使うメリットが網羅されており、絶対にSassを使ってコーディングを行おうと思います。僕もこちらの記事を参考にしてわからない部分は参考書を見ながら勉強を行いました。
Sassの参考書についても下記に記載しておきます。

学習3ヶ月後はどう行動をすべきか

1ヶ月〜6ヶ月までこれらの事に躓きながらでもinputして次の行動に移ろう！

①デザインカンプからコーディング
②営業活動へ進む

①については、

こちらしょーごさんの無料noteのデザインからのコーディング練習です。初学者の練習課題にはかなりおすすめできます！

初級編が完了すれば、Java Scriptを勉強しつつ、こちらの中級実戦演習を行う事で、営業に進める事が可能です。

実際僕もこのレベルのコーディング練習を行ってから営業に進みました！

模写コーディングでかなりおすすめの記事があります。

こちらの記事はレベル別で模写コーディングを纏めてくれています。

模写どれやったらいいのか迷っている、分からない方はこちらから実践してみてください。確実に力になるし、制作会社とのお仕事の際にも使える能力が身に付きます。

②営業について

営業についても、未経験の為かなり苦戦しました…。
自分の力では足りないと思い、お金を出して営業コンサル受ける事にしました！
営業コンサル受講後、営業に専念して無事初案件を受注する事が出来ました。

僕が初案件受注するまでにコンサルでのinput内容の一部、営業活動についてを1から100までを記したnoteを書いていますので是非見て頂きたいです！

ロードマップは何を参考にすればいいのか

今Twitter界隈では数多くのロードマップがでまわっています。どれも素晴らしい内容なのですが、その中で僕が参考にした記事があります。

こちらたんしおさんのロードマップは読みやすいかつ、ここまでの方法を実践すれば確実に案件まで到達できます。

中にはWordPressの学習方法についても記載がありますが、WordPressを学習する事で、案件の母数も確実に増加するのは誰もが知っている事かと思います。

なので、一通りの学習

HTML /CSS
Sass
JavaScript /Jquery

が終わればPHP、WordPressの学習をしましょう！

実は僕も今現在、WordPressを更に理解しようと学習中です。
一緒に頑張っていきましょう！目指せ月30万円の副業収入！

実際に僕がWordPress学習で使用している参考書についても載せておきますね。

重要なスキル

パーフェクトピクセル
こちらのスキルはかなり必要です！コーディングのお仕事をいただく限り最低限のデザインを再現することは重要です。その上で活用できるツールとして下記に貼り付けているパーフェクトピクセルと言われるChrome拡張機能です。分かり易い使用方法を説明したURLも記載しておきます。

品質CK

毎回こちらの記事を参考に品質CKを行なっています。デザインの再現を行うのはもちろんのことですが、これらの品質CKを確実に行うことで、継続案件にも繋がってくること間違いなしです。これらを参考にしながら独自で品質CKリストを作成して、相手に対してこれらの項目で品質CKを行いますと一言添えるだけでも信頼性があがりますよね。

サーバー契約+FTPでサイト公開までの行程

意外にサーバー契約とFTPを使用してサイト公開は難しい…というより、内容が理解出来ません！

こちらの記事は本当に分かりやすい！

今でも完璧には覚えきれていないので、お世話になっている記事です。

是非参考にして下さい！

参考書の紹介

こちらの参考書は今でもコーディングの際にわからない事があれば調べる時に使用させていただいています。本当に基本的な部分が網羅されており、常に机の横に置いておきたいです。躓いた時にこれを見ればある程度の事は解決すること間違いなし！金額的には少し高くて悩みましたが、結果的に買って後悔しませんでした。実際すぐに元取れます。

CSS設計完全ガイド内容はCSSの事であればこの参考書を見れば間違いなしといった事が全て書き記されています。CSSを書く際の注意点や、保守性が上がる記載方法等が載っており、CSSを極めたい方、保守性を高めたい方におすすめとなります。

Sassの理解を深めたい方には本当におすすめです。こちらの参考書は、Kindle Unlimitedで無料となっていますので登録されている方はそちらの方で確認してみてください！Kindleで参考書を見るのは少しみにくいですが・・・。

WordPressの教科書はこちらがいいかと！Twitter界隈でのクチコミはもちろん、実際に僕が使用していてかなり分かり易いし、教材通りに進めていけば、ホームページが完成してモチベーションも上がる。

最後に

ここまで読んでいただき、本当に、ありがとうございました。

これらの事例以外にもこの部分苦戦しました！
とかこの部分をもう少し詳しく知りたい！っていう事があれば教えていただきたいです。
分かり易い図解にしてお届けしたいと思っています。

そして、この資料が少しでもお役に立てればいいなと思っております！

ここまで読んでくださった皆様に　”1つだけ” 　お願いがあります！

このnoteが、少しでも役に立ったと思った方は

■こうだい@Web制作×製造業（@kochan0218）をいれて、感想をツイート

（ツイートや引用RTは、必ずリツイート、コメントさせていただきます。）

のいずれかを、していただけるととても嬉しいです！