自由気まままMENUCLOSEサイトメニューWeb制作フリーランスブログネタプロフィールお問い合わせCLOSESEARCHWeb系フリーランスがWeb制作やガジェット、ブログについて綴っていきますWeb制作フリーランスブログネタプロフィールお問い合わせHOMEWeb制作HTML/CSSコーディングの仕事内容をまとめましたHTML/CSSコーディングの仕事内容をまとめました2019年1月3日Web制作ツイートシェアはてブ送るPocketこんにちは、タカキです。HTML/CSSでコーディングの仕事をまだ受けたことがない方だと、具体的な仕事内容がいまいちわからないと思います。コードを書いてZipで納品・・・くらいにイメージされてる方もいるかもしれませんが、実は意外とやることが多かったりします。コーディングの仕事を行ったことがない方へ向けて、コーダーの一連の仕事の流れを記載しました。今後、コーディングの仕事を受注するつもりがある方は是非参考にしてみてくださいでは、以下記事に入ります。まとめデザインカンプの受け取り仕事を受注したら、デザインカンプというものを受け取ります。コーディングを行うための設計図みたいなものですね。デザインカンプを参考にして、HTMLとCSSで見た目を再現していきます。デザインデータの形式で体感的に一番多いのはPhotoshop、次いでillustrator、XDとAdobeツールが主流です。当然ですが、Photoshopで作成されたデータはPhotoshopを用いて開きます。「コード書くだけだからデザインツールは必要ないや!」と思っている方がいるかもしれませんが、むしろ必須ツールです。今後コーディングの仕事を受注しようと思っている方は、Adobeツールを購入しておきましょう。(月額制で結構高いので、必要になってからでもいいかもです。)画像の書き出しデザインカンプを受け取ったら、まずは画像を書き出します。書き出しとは、デザインカンプに使われている画像を抜き出して、自分のフォルダに保存していく作業です。新規制作の場合は基本的にコーダー側がこの作業を行います。Photoshopやillustrator、XDなどツールによって画像の書き出し方は違います。XDの場合、書き出したい画像を選択してメニューバーのファイル→書き出し→選択済みこれで選択した画像を書き出すことができます。画像の書き出しも慣れてないと時間がかかる作業です。各ツールごとのやり方をしっかりと理解しておき、スムーズに終わらせられるようにしておきましょう。書き出しが終わったら、次はデザインカンプから各種データを取得していきます。2番目に記載していますが、実際には次のコーディングと並行して行う作業です。取得するデータは主に以下の内容です。・文字データ(フォント、サイズ、行間等)・テキスト・オブジェクトサイズ・オブジェクトの効果(影や透明度)特に余白やサイズはCSSを書いているうちにズレがちです。ここで手を抜くと後々の調整が面倒なので、しっかり調べながらやりましょう。コーディングここからはおなじみHTML・CSSのコーディングです。HTMLを記述し、デザインカンプから取得したデータを元にCSSで装飾していきます。HTML/CSSが終わればあとはクライアント要求に従い、jQueryやjsでアニメーションを付与していきます。余談ですが、リンクボタンのホバーやリンクのスムーススクロールは指定が無くてもつけて当然、みたいな感じがしてます。一通りのコーディング作業が終わったら、各種検証です。全行程の中で最も重要な作業になります。余白のズレやオブジェクトサイズはChromeの拡張機能「PerfectPiexl」で確認可能です。間違えやすい部分なので特に念入りにチェック。一通りの検証が終わったら、各種ブラウザでチェックしましょう。以下、チェックしておくべきブラウザです。Edge・Chrome・Safari・FireFox特にIE、たまにEdgeもレイアウトが崩れたり、Javascriptがおかしな挙動をすることがあります。ここら辺は要チェック。ちなみにMac利用者の場合、IEやEdgeで確認することができません。BootCampでWindowsOSを入れてしまうのが一番いいのですが、スペックの都合上などで難しい場合は事前にクライアントに申し出ておきましょう。擬似的ではありますがMacの開発から確認することが可能です。2019各種ブラウザの次は、スマートフォン版のチェックです。PC上でもスマホサイズに縮める事はできますが、検証の際は必ず実機でチェックしましょう。実機でしか発生しない思わぬトラブルが潜んでいたりします。以下、スマホ版でよくあるトラブル内容です。スマホ版のよくあるトラブル・PCでクリックできるところがスマホのタップだと反応しない・スマホで効いてたCSSがPCだと効いてない・スマホで見るとレイアウトが違う部分がある・画像がぼやけて見える(解像度が高いiPhoneにありがち)↓具体例コードを書くときの注意点iOS端末だと、inputなどの入力欄にborder-radiusがデフォルトでかかり、画像のように勝手に角丸になります。2019見た目に問題無かったら、次は中身です。・サイト内のリンクは適切か・altは記述されているか・デベロッパーツールでエラーが発生してないか・HTMLの記述ミス(閉じタグ抜けなど)・CSSの記述ミス(不要なプロパティがあるなど)サイト内リンクは間違っていると大問題です。リンクはチェックしましょう。altについては、基本的に指定されないのでこちらで設定する必要があります。背景やアイコンなど、単体で意味をなさない画像以外にはきちんと設定してあげましょう。HTMLやCSSの記述については、間違っていても見た目上問題ないことは普通あります。エラーも同様)ただ、もしわかっている人に中身を見られたら、コーディングの品質が問われる部分です。(全く知識がないクライアントなら普通に通っちゃいますが・・・)コーダーとしての質を保つためにも、この部分は目を光らせて検証しましょう。以下、HTML、CSSの検証サービスをまとめたのでご参照ください。検証作業は慣れないうちだと、コーディングが終わったあとの疲労で手を抜きがちです。クライアントからの信用を得られるかはこの作業にかかっています。大事な作業なので、気を引き締めて取り掛かりましょう!納品(サーバーアップロード)作業が終わったら、いよいよ納品です。サーバーへアップロード、たまにZipファイルにして納品する形式もあります。Zipファイルの場合ただ圧縮して渡すだけなので、今回はサーバーアップロードの手順について解説します。本サーバー、もしくはテストサーバーへ作成したデータをアップロードします。順番が前後しますまずはクライアントからサーバー情報をいただきます。納品形式がサーバーアップの場合、だいたい向こうからFTPサーバー情報というものが送られてきます。・FTPサーバー(ホスト)・ユーザー名(アカウント)・パスワードこちらの情報を用いて、FTPソフトを使用してクライアントのサーバーと接続します。今回は無料のFTPソフト「FileZilla」を例にして解説します。FileZillaを立ち上げます。画面上部にあるホスト・ユーザー名・パスワードに入力してサーバーに接続します。(今回は僕のサーバーに接続しています)入力して接続を押します。これでクライアントのサーバーへ接続が完了しました。作成したデータをアップロードするフォルダを選択します。どこにアップしたらいいかわからない場合は、クライアントに聞くかググりましょう。場所」みたいな感じでググれば以下のようなページが出てきます。https://support.xserver.ne.jp/faq/service_ftp_setting_upload.phpアップロード先のフォルダを選択したら、次は自分が作成したデータのあるフォルダを選択します。右クリック→ファイルをアップロードこれでアップ完了です。アップが完了したら、実際のサイトに行って確認をしましょう。※もし反映されていない場合、キャッシュが残っている可能性があります。キャッシュを削除してから再度読み込みましょう無事反映されていたら納品完了です。テストサーバーへのアップロードだった場合、各種検証に戻ってスマートフォンの実機などで確認作業を行いましょう。まとめコーディングの仕事の流れ、いかがだったでしょうか。HTML/CSSを書ければいいだけではなく、実は他にも意外とやることが多かったりします。主な流れは講師のタカキさんがブログでまとめてくれています。正直にいうと、講義内容もほとんど同じ内容になっています。コメントをキャンセルメールアドレスが公開されることはありません。東京都内でWebコーダーとして活動中。ブログではプログラミングやガジェット、お役立ちツールなんかを発信していくつもりです。Web制作のご依頼はお問い合わせから承っております。