Webデザイナーになるにはコーディングのタグ打ちは必須です。
この記事ではコーディングが苦手、htmlやcssを覚えられない人むけの為に覚え方や練習方法を紹介しています。
清木 大吉
高卒でフリーターとニート生活を繰り返していたが、24歳の時に一念発起し未経験でWebデザイナーに就職。現在はWebアプリケーション開発会社のディレクターとして働く傍、デザイナーやライターの副業で収入を得てるなどマルチに活動している。
HTML&CSSを覚えたいならひたすらタグ打ちで練習
HTMLとCSSの基礎を勉強した時、コーディングの練習として筆者は購入した本とHTML・CSSの解説サイトや動画を見て学んでいました。
バイト時代は電車通勤だったので本を見ながら通勤していた思い出があります。
教材に関してはWebデザインを独学で勉強する人におすすめの本をご覧下さい。
タグやスタイルの使い方などの暗記をするのには電車通勤中には持ってこいでしたが、コーディングなどの技術部分は本を読んで覚えるより実際にタグ打ちしながら覚える方が上達します。
バイトの休憩中は解説サイトを参考にしてタグ打ちの練習をし実際にサンプルサイトをたくさん作っていました。
コーディングの練習をする場合、パソコンのタイピングが必須となります。ブラインドタッチ（キーボードを見ずに打つ）が出来ない人は最初にタイピングの練習もする必要があります。
キーボードのタイピングの練習をするなら寿司打がおすすめ
HTMLとCSSを早く覚えるのは実際に手を動かす事が一番です。
考えるな、感じろ。
HTML＆CSSのコーディングの練習ができるおすすめサイト2選
Codeprep
Codeprepは、実際にプログラムコードを記述しながら学べるWebサービス。
HTML、 CSSからアプリ開発まで幅広くカテゴリが豊富なサイトであり、Web初心者にも入りやすいサイト設計なので、コーディング知識がない状態でも安心してスタートできます。
⇒ サイトはこちら
Progate
ゲーム感覚でHTMLの基本コーディング基礎を学ぶことができる無料の学習サービスです。
設問ごとに分かりやすくヒントが設置されており、自分だけの力でコードの勉強ができるように工夫が施されています。学習の進捗情報も分かり、なかなかコーディングの勉強に時間が取れないという方は利用してみて下さい。
メールアドレスを登録すればすぐに利用可能。
応用や実績になると有料プランの登録が必要になってきますが、基礎部分であれば全部無料なので、コーディングの基礎を覚えたい初心者であれば無料で利用できるサービスです。
HTML＆CSSのコーディングが学べるおすすめ解説サイト4選
HTML、CSSの解説サイトは検索すると意外にたくさん出てきます。
その中でも筆者自身が分かりやすく使いやすいと感じたサイトを紹介していきます。
サルワカ：イチからWebデザインを習得する講座
https://saruwakakun.com/html-css/basic
初心者でも分かりやすく解説してくれているHTML＆CSS入門のサイト
【どの書籍よりも、またどのウェブページよりも分かりやすくオシャレなWebサイトを作るための知識を解説】と書いている通り、とっっっっても解説が見やすくて分かりやすいです。
筆者が独学で勉強していた頃にはなかったサイトなのですが、当時これがあったらこのサイトが聖書（バイブル）になっていたでしょう。
それだけ猿若ではHTML＆CSSの情報を網羅しています。
最新のHTML5&CSS3にも対応しており、
正直このサイトだけ見ておけばOKですね。
これからWebデザイナーを目指す初心者におすすめです。
⇒ サイトはこちら
0から始めるHTMLとCSSの基本・基礎-webデザイン入門-
http://endoutakae.com/2012/02/08/webdesign/
ブログ記事ですが初心者目線でHTMLとCSSの基本、基礎を非常に分かりやすくまとめています。
⇒ サイトはこちら
Webクリエイターボックス
https://www.webcreatorbox.com/
Webデザイナー界ではかなり有名人Manaさんのブログ
Webデザインに関する問題を検索したらだいたいこのブログがヒットするぐらい情報量が半端ないです。
初心者におすすめの記事をピックアップしておきます
HTML＆CSSのコーディングが学べるおすすめ解説動画
ここまでおすすめの解説サイトを紹介してきましたが、サイトを見て学ぶだけじゃ頭に入ってこない人のためにおすすめの動画サイトを２つ紹介します。
最近動画のコンテンツを扱ったサイトが増えてきています。
筆者の時はまだほとんど流行っていませんでしたが、これからは動画を見て学ぶ時代がきそうですね。
実際に手を動かすことができますし、動画などで学ぶことができるので本よりも学びやすいので人に教わって覚えたい方はぜひ参考にしてみて下さい。
ドットインストール
1つのコンテンツ動画を3分にまとめて解説しているので空き時間や忙しい日でも勉強がしやすいのが特徴。
HTMLとCSS以外にもプログラミング関係の解説動画がたくさんあり、現役のWebデザイナーやプログラマーも参考にしているサイトです。
より高度なプログラミングの学習や動画の文字起こしなどはプレミアムサービス（有料）に登録しなければいけませんが、基本的には無料で利用することができます。
Udemy（ユーデミー）
「Udemy」はビデオで講師の授業を学べるオンライン学習サービス。
ビデオだから何度でも繰り返し何度でも観る事ができるし、時間と場所を気にしなくても良いので独学で勉強する人にはお手軽でおすすめです。
自分が選ぶ講師によって授業内容や内容も違ってきます（有料や無料があります）
色んなコースがあるので一度チェックしてみてください
おすすめの講師は村守 康さん
丁寧で分かりやすくベストセラーのコースも多い。定期的に激安セールを行っているので興味がある方は今すぐチェックしてみましょう。
youtube
もちろんyoutube動画で勉強するのも１つの手です。
youtubeで「HTML 書き方」などで検索すると解説動画が色々と出てきます。
コーディングが覚えられない人に見られる特徴
以下4点はコーディングが覚えられない人によく見られる特徴です。
- コードを丸暗記する
- コピー＆ペーストを使う
- ノートに書いて覚える
- 全て一気に覚えようとする
コードを丸暗記する
学校のテスト勉強の延長でコーディングを丸暗記するのはダメです。
なぜなら、Webサイトをコーディングする時、暗記では対応できるボリュームを超えていますし、ほとんどが応用が求められます。
コピー＆ペーストを使う
コードは打ち込んでいかなければ自分の体に染み付きません。
コピー＆ペーストはコーディングにおいて楽ですが、最初のうちは必ず全て手打ちしましょう。コードの意味を理解して記述しておかないと身につきませんし、大事な時に思い出せないなら意味がありません。
ノートに書いて覚える
手で書いたほうが覚えるという方もいるかと思いますが、コードを書き慣れる意味も含めてちゃんとエディターで書いてそれがきちんと自分の思い描いたように実行されるのか見える状態で練習したほうが良いです。
それにノートに書いたコードは検索できないので、必要な時にすぐに探せないからです。検索するなら自分のエディターを作るかネット検索する方が圧倒的に早くて効率的です。
全て一気に覚えようとする
無理にHTML・CSSを全部覚える必要はありません。
全部覚えようとすると大変ですし、実際そこまでほとんど使わないHTML・CSSはたくさんあります。つまり、重要度を均一にするのではなく実用性があり必要なもの・よく使うものに重点をおいて調べたほうが身につきやすいですし、応用力もつきます。
手打ちでコーディングしていくと<div>や<p>タグをよく使うなーと感じるように、タグは打ち込んでいると体感で分かってきます。
今更聞けない！よく使うHTML・CSSの読み方
HTMLタグやCSSプロパティのコードの書き方は覚えたけど、読み方はあやふやだったりしませんか？
筆者の場合は独学だったので、覚えようにも自分が参考にしていた教材には読み方は書いていませんでしたし、周りに聞ける人もいませんでした。
読み方が分からなくてもコードは書けていたので何も気にしていなかったのですが、いざWeb制作会社に入ってみると社内の人と仕事の会話をする時にHTMLタグ名やCSSプロパティ名を言う場面がたくさんあります。
先輩達の会話を聞いて初めて「こうやって読むんだ…！」と思わされる英語ばかりでした。
読み方が分からない以上、自分の勝手な臆測で決めて読んでしまい、間違えた読み方のまま過ごしていくと大事な場面で恥ずかしい思いをしてしまうかもしれません。
ここからはよく使われるHTMLタグ、CSSプロパティの正しい読み方をまとめたのでぜひこれを機会に読み方も覚えておきましょう。
よく使うHTMLタグの読み方
div
「ディブ」と読みます。divisionの略
h1、h2、h3、h4
「エイチワン」「エイチツー」「エイチスリー」 …etcと読みます。
p
「ピー」と読みます。
a
「エー」と読みます。
href
「エイチレフ」と読みます。最初「ハレフ」と読み間違えていました。
img
「イメージ」と読みます。「アイエムジー」と読むところもあります。
src
「ソース」と読みます。最初「エスアールシー」と読み間違えていました。
alt
「オルト」と呼びます。最初「アルト」と読み間違えていました。
br
「ブレーク」と読みます。最初「バー」と読み間違えていました。
footer
「フッター」と読みます。
ul
「ユーエル」と読みます。正式名称はアンオーダーリスト
順序リストのolは「オーエル」と読みます。
li
「リスト」と読みます。上のulとセットで良く使いますね。
よく使うCSSプロパティの読み方
width
「ウィズ」と読みます。他には「ウィドゥス」「ウィトス」といった読み方も。
最初「ワイズ」って読んでました。withと区別するためにわざと「ワイズ」と読む事もあるらしいのですが、筆者が働いていた会社では「ウィズ」と統一して読んでいました。
height
「ハイト」と読みます。最初「ヘイグヒト」と読み間違えていました。
margin
「マージン」と読みます。
padding
「パディング」と読みます。最初「パッディング…！」と力強く読んでました。
text-align
「テキスト アライン」と読みます。最初「テキスト アリジン」と読み間違えていました。
vertical-align
「バーティカル アライン」と読みます。最初「バーチカル アリジン」と読み間違えていました。
relative
「リレイティブ」と読みます。「レラティブ」とも読めるようです。
absolute
「アブソリュート」と読みます。最初「アブソルト」と読み間違えていました。
visibility
「ビジビリティ」と読みます。
hidden
「ヒドゥン」と読みます。
最初「ハイデン」と読み間違えていました。
clear
「クリア」と読みます。
text-decoration
「テキスト デコレーション」と読みます。
text-indent
「テキスト インデント」と読みます。
letter-spacing
「レタースペーシング」と読みます。
font-weight
「フォント ウェイト」と読みます。
display
「ディスプレイ」と読みます。
display:none;は「ディスプレイ ナン」と読みます。
nonは「ノン」ですが、noneは「ナン」なんです。
both
「ボース」と読みます。
最初「ボス」と読み間違えていました。
HTML・CSSを間違った読み方で覚えないように
学校や人に教えてもらうと読み方も一緒に覚えれますが独学だと中々読み方までは意識がいきません。
実際、Webデザイナーでも間違った読み方をしている人も少なくありません。
自分もそうですが読み方に全くの自信が無いので職場の人が間違った読み方をしていても
- それ間違ってないか？
- もしかしてその読み方もあるのか？
なんて思ってしまい迂闊に指摘する事ができませんよね。
何気なく使っているHTMLタグとCSSプロパティですが読み方にも気をつけましょう。
日本で使用される「カナ読み」から掲載しているのでネイティブの発音に近い読みを掲載しているわけではありません。
コーディングは人に教えてもらうと上達スピードも早い
コーディングでつまずいた時、検索で解決できるものではなかったり、自分のやり方が適切なのか、もっといい方法はないのかと悩む事もあるかと思います。
人に教えてもらうと上達スピードも速いので、金銭的に余裕がある人はデザイン専門学校に通い「プロに聞く」のが一番てっとり早いです。
しかし、筆者のようにお金がなく専門学校に通えないから独学で勉強してる人も多いはずです。専門学校の費用は50万〜100万円とかなりの金額になりますよね。
そんな時に利用して欲しいのがオンラインスクールに通うと言う手段もあります。
専門学校に比べると費用もグッと下がりますし、さらに学生であればお得な割引が適用されかなり格安になります。
無料体験があるので、興味がある人はまず無料体験でも利用してみてはいかがでしょうか。
スクールに興味がある方はWebデザインスクールおすすめ10選！失敗しない未経験からWebデザイナーになる方法も合わせてご覧下さい。