Web製作会社でコーダーのアルバイトをして1ヶ月で学んだこと

この記事では、Web製作会社でコーダーのアルバイトとして働いて1ヶ月が経ったので、そこで学んだことについて書いています。

僕自身、現在大学4回生でWeb系の自社開発企業にエンジニアとして内定をもらっていますが、アルバイトで働いている企業とはまた別の企業になります。

→ 関連記事

内定先の会社ではバックエンドを担当することになるとは思いますが、なぜバックエンドではないのかというと、関西の田舎に住んでいるということもあり、近くにバックエンドのアルバイトを募集している企業がなかったからです。

その代わりになぜコーダーとしてアルバイトをしようとしたかというと

LP製作やコーディングの案件を個人でも獲得できるようにしたかったから

という理由です。

未経験だったにも関わらず、コーダーとしてアルバイトをさせていただいている企業の方には本当に感謝しています。

コーダーのアルバイトをしたい人
コーダーのアルバイトってどんなことをしているのか知りたい人

以上の人はぜひ読んでください！

タップできる目次

コーダーとしてアルバイトをする前のスキルセット
コーダーとしてアルバイトをして1ヶ月で学んだこと
終わりに

コーダーとしてアルバイトをする前のスキルセット

コーダーとしてアルバイトをする前のスキルセットとしては以下のような感じ。

HTMLとCSSはプログラミングスクールで習い、サービスを作る際にも書いたことはあるが、がっつりと書いたことはない（Bootstrapを使っていたため）
デザインツール（PhotoshopやIllustratorなど）は使ったことがない

コーダーとしてアルバイトをして1ヶ月で学んだこと

コーダーとしてアルバイトをして1ヶ月経ったのでその期間に学んだことを週ごとに書いています。ほとんどメモみたいな感じです。

業務としては、期限に余裕のあるLPの作成やトップページの作成（PC）を任せてもらっています。

1週間目

レイヤーを取り除きたい場合はレイヤーのウインドウを表示して上に重なっている要素の目をクリックすることにより取り除くことができる（いらない文字を選択して目玉マークを押すと消える）
スライスとはPSDファイルを画像に変換すること
スライスした画像を書き出す際に.gifで書き出してしまい、それ以外の拡張子で書き出しできないと思っていたが、「Web上で書き出す」を押した後の画面で全ての画面を選択してあげることによって.pngで保存できるようになった
Illustratorで後ろの画像の複製などをする際にはウインドウメニューのアートボードを選択する
イラストレーターで画像をリンク付きで配置した場合、ローカルでその画像を削除するとリンク切れを起こしてしまい表示できなくなってしまうので、「ファイル」→「配置」→「リンク」にチェックを入れずに配置する
選択できないオブジェクトはレイヤーから選択してあげる
アートボードの並べ替えを行う際には並べたい順にボードを並べ替えて、再度並べ替えのところを押す
画像アセットの生成もいいが、それを考慮していないPSDファイルもあるので、そういう場合はスライスを使う(画像アセットを使うと同じリストなのに高さが違うみたいなことが起きてしまう)
テキスト部分はできる限り文字。画像だと文言が変わった場合に大変
floatはほぼ使わない。flexboxを使うか、tableを使う。

2週間目

idは使いすぎない
header部分がいくつかに分かれる場合はheader_top,header_mid,header_fotのようにclass名を指定してあげると良い
Photoshopでテキストを選択してカーソルを対象に合わせてクリックした際に上の右側に出てくるaのようなところがなしになっている場合はアンチエイリアスがなしの場合でテキスト記入。シャープとなっている場合はアンチエイリアスがありで、画像で指定する

3週間目

aタグやpタグは全体に対して指定してはいけない。理由としては下層ページにも影響を及ぼしてしまうから。なので、header a { }のような感じで部分ごとに指定する
全体をwrap、wrapper、containerで囲う必要はなく、headerやmain、aside、footerで囲うだけで良い