フリーランスの働き方

フリーランスとして時間と場所にとらわれないWebデザイナーの働き方を書いています。これから独学・副業で始めたい方へ少しでも参考なればと思います。

タグ打ちとコーディングの違いについて。

Date: 2017年05月29日
Category:

タグとは何か。。。

まずは「タグ」とは何だろう?という所から説明します。タグとはHTMLで使用するもので例えば「こんにちは!」という文字をそのページのタイトルにしたい時

<title>こんにちは!</title>

といった感じで<title>と</title>で囲う事で、このページのタイトルは「こんにちは」なんだな。とブラウザが理解します。<title>と</title>がタグと言います。ここで使用されている「<title>」を開始タグ、「</title>」を終了タグといいこれをまとめてタグと呼びます。

タグ打ちとは自分でタグを打つ事

上記で説明したタグを自分で打つ事がタグ打ち。読んだままの事ですが、タグを自分で打たなくても自動で生成する事も出来ます。有名な所で言うと「ホームページビルダー」や「ドリームウィーバー」などのホームページ制作ソフトがその役割をしてくれます。

自動で生成してくれるのであれば、わざわざ自分でタグ打ちをしなくてもホームページ制作ソフトを買ってしまったほうが効率が良いのではと考えられる方もいると思います。これには一長一短があり、ホームページ制作ソフトを使えばタグ打ちの知識がなくても気軽にホームページを制作することが出来ます。但しこれは趣味レベルのお話。

実際の現場レベルでは、クライアントから持ち込まれたHTMLを調整する場合に直接打たなくてはいけない場合が数多くあります。上手く表示できていない場合は、どこが原因かをタグを見ながら探す場合もあります。

ホームページ・ビルダー21 スタンダード 通常版
ジャストシステム (2016-10-07)
売り上げランキング: 133
Adobe Creative Cloud コンプリート 2017年版 |12か月版|オンラインコード版
アドビシステムズ (2013-10-01)
売り上げランキング: 43

圧倒的にタグ打ちしたほうが作業が早いです。

ホームページ制作ソフトを使えば、タグ打ちしなくても簡単にホームページが作れるのですが、作業効率を考えるとタグ打ちが出来たほうが圧倒的に早いです。

例えるならば、外国人と話す時に通訳を付けるか自分で直接話すかの違いです。日本語で話したことを英語に訳して話してもらうという順序と同じです。何度も何度も行うことですので直接、翻訳してもらっていたらきりがありません。

タグ打ちするということも同じです。直接タグ打ちする事でかなりの時間を軽減でき、余計なタグを発生するリスクも軽減できます。

コーディングとはタグ打ちで組み立てること

コーディングとはデザインした画像やテキストをHTMLのタグで囲みながら組み立てる事を言います。「タグ打ち」はパーツになりその集まりが「コーディング」といった事になるので全くの別の存在になります。

私はコーディングを「Brackets」というAdobeのフリーソフトを使用しています。人気があるものでは「Sublime Text」がありますが、Adobeから出しているソフトなので長い目で見た時に使い続けられるのではという考えで使用しています。

タグ打ちというのも実際に一文字ずつ打っていくと大変です。そこで1文字入れるだけで予測変換してくれる機能があったり、「emmet」というオプションを追加することで劇的に早くすることが可能です。

スラスラわかるHTML&CSSのきほん
狩野 祐東
SBクリエイティブ
売り上げランキング: 4,480

まとめ

「タグ打ち」と「コーディング」の違いがわかりましたでしょうか?大きな会社になると分業制を採用している所が多いのでWebデザイナーと言えばPhotoshopでの制作までを行いコーディングはコーダーが行う場合もあります。ですがWebデザイナーとして独立するには「タグ打ちでコーディングするのは最低条件」になります。

スキルを身につけるための時間はかかりますが、一度理解してしまえばずっと使う技術です。残念なが「一生」使える技術ではないと思いますが、独学で覚えることで分からないものを習得するための技術も身につけることが出来ます。

今までのHTMLから、いまではHTML5というものが登場していますが、HTMLを身に着けていれば途中から学ぶことが出来ます。これまでの知識があるので新しくなった所だけ学べば済みます。その他にCSSも理解しなくてはいけませんし、Wordpressで使われてるPHPなども理解する必要があります。

今ではドットインストールという無料で技術を学べるサイトがあるので、まずはドットインストールで勉強し、分からない部分を詳しい人に聞いたり本などで解決していく方法もあります。

HTML5&CSS3辞典 第2版
HTML5&CSS3辞典 第2版

posted with amazlet at 17.05.30
株式会社アンク
翔泳社
売り上げランキング: 207,368

場所にとらわれない生き方にオススメ

私も2013年よりランサーズを利用しています。これまで数々のお客様と仕事をさせていただきました。実践を積むことでスキルアップしますので、まずは無料登録してみましょう

クラウドソーシング「ランサーズ」

私の使用しているレンタルサーバー

私が2011年から利用しているレンタルサーバー。容量は256GBもありSSDなので超高速です。運用していてストレスを感じたことがないのでオススメさせていただきています。長く使うので3年契約にすると月額1,000円になるのも魅力です。15日間の無料お試しもついています。

フリーランス・副業の方、情報交換しましょう

フリーランスや副業、異業種など様々な方との交流を募集しています。ご興味を持っていただいた方、お気軽に各種SNSよりフォローお待ちしております。

保管庫」と同じカテゴリの記事一覧