PAGE TOP ▲

大副業時代を生き残るためのブログ。切り売り労働からの脱却、少しでも収入をアップしたい方へ。

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

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

タグとは何か。。。

まずは「タグ」とは何だろう?という所から説明します。タグとは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

保管庫の関連記事一覧

ヒアリング の重要性を理解することでワンランク上がります。

2017年02月05日
ヒアリング の重要性 ヒアリング がWeb制作を行う上で最重要と考えています。段取り八分です。 例えばクライアントに確認する事が100項目あったとします。最初に全て確認しても、作業しながら

ハッキングにあったのでWordPressの運用をできるだけシンプルに考え直す。

2017年02月03日
ハッキング にあったサイトは現在ご覧頂いているこのサイトです。無事解決しているので運用を再開しているのですが、この機会にデザインも一新してみました。技術的な解決方法は色々なサイトで紹介していると思いま

ランサーズで経験を積む。

2017年02月02日
このサイトを見て頂いている方のほとんどは、未経験者や独学で勉強中の方が多いと思います。ただ実践を積み重ねないことには経験を積むことも出来ないが、経験がない人には実践を与えられる機会も少ないのが現実です

Youtubeのサムネイルの代わりに画像を貼り付ける

2016年12月17日
動画サムネイルの代わりにご自身で制作した画像を表示することが出来ます。これは動画の埋め込みタグ(iframe)をjsに流し込み画像をクリックしたら消え、動画を表示するという順序で動きます。 ※埋め込

専門学校やスクールを出ないとWebデザイナーなることは出来ないのか

2016年02月06日
この質問はWEBデザイナーを目指している方からだけではなくクライアントからも「やっぱりそういった学校卒業されたのですか?」という質問をよく受けます。 私の場合は独学でした 私のお話をさせて

まずはバナー広告などのパーツを作るところから始める

2016年02月05日
私は質の高いWebサイトを作るには細部にこだわる事で全体が出来上がると考えています。会社の屋号を「DETAIL DRAWING」とした理由も詳細図という意味から細部に拘り全体を創るという思いから命名し