» 月360円で副業・起業を習得しよう!

もう、起業や副業を学ぶために、高額な費用を払う必要はありません。

月360円で超実践的な「副業・起業スキル」を習得しよう!

起業・複業を教えて欲しい、サポートして欲しいあなたへ。
月額360円!副業と起業の教育・支援プラットフォーム誕生!

 詳しくはこちら

SHOTA UEYAMA.com

Menu

僕が「HTML×CSSの書き方」を習得した4つのステップ2018.8.10

  • このエントリーをはてなブックマークに追加

ウェブサイトを作りたいと思ったとき、避けては通れないのがコーディングです。
HTMLやCSSを使って、実際にウェブサイトとしての機能を実装する必要があります。

例えばリンクを貼ったり、Googleに認識させやすくしたり。
スマートフォンサイトに合わせて形を変えたり。
それもこれも、コーディング無しには実現できません。

なので、ウェブサイトを作ろうとしたらHTML×CSSを学ぶ必要があります。

今ではGoogleで検索することで、あらゆる情報が見つかるようになりました。
独学でもだいぶ学びやすくなりましたし、技術的な情報は膨大にあります。

ただ、まだほとんど出回っていない情報があるのです。
HTMLやCSSの「効率の良い学び方」ですね。

HTML×CSSの書き方を学ぶ時、まず何から始めれば良いのでしょうか?
Progateやドットインストールから始める?
もちろんそれも、習得には素晴らしい手段です。

ただ、Progateやドットインストールをやった後はどうすべきでしょう?
こなした後は、一体どのように先を学べば良いのでしょうか。
オンラインで学ぶとしても、効率の良い習得方法は無いのでしょうか?
仕事に繋げるためには、一体、どんな学び方が必要なのでしょうか?

何が最も、効率的にHTML×CSSの書き方を習得していけるのか。
学び方や勉強の仕方については、まだまだ研究不足です。

そこで、今回はどのようにHTML×CSSの書き方を習得すべきか、まとめてみました。
これからHTML×CSSの書き方を学ぶ方も、ぜひ目を通してみてください。

1. HTMLとCSSの意味を理解し、タグを書いて、何が出来るのかを知る。

まず、自分が書こうとしている言語の意味を、理解しないことには始まりません。
HTMLとは一体何をする言語なのでしょうか。
そしてCSSの役割とは、一体何なのでしょうか。
ウェブサイトを作るにあたって、理解しておくべき基本を抑えましょう。

HTMLとCSSの基礎を抑えるための解説記事はたくさんあります。
個人的には、サルワカさんの記事が非常に分かりやすいですね。

HTML&CSS入門 Webデザインをイチから学ぼう
https://saruwakakun.com/html-css/basic

かなり、しっかりまとまっているので、これ以上必要な気もしません。笑
自分自身で書く気も、サルワカさんの記事を見たら失せました。笑

さらに、この段階で活用できるのが、Progateやドットインストールです。
ざっくり全体を通してやってみて、HTML×CSSの書き方について把握しましょう。
他の言語においてもそうですが、一通りやってみることは大切です。

Progate ( プロゲート )
https://prog-8.com/

ドットインストール
https://dotinstall.com/

習得サイトやブログ記事で一通り、書き方を把握してみてください。
全体像を理解することで、初めて先に進むことができます。
ブログ記事やオンライン講座は、一通り知ることに非常に役に立ちます。

しかし、それだけでは、まだHTML×CSSで書いて、仕事ができるとは言い切れません。

知っていることが重要なのではなく、スポーツのように「実際に出来る」ことが重要なのです。
何度も繰り返し、実践に近い形でHTML×CSSを書き、自信を手に入れなければなりません。
どんなウェブサイトでもHTML×CSSで書ける!という自信です。
そのためには、実際に自分でウェブサイトを作ってみる必要があります。

2. レイアウトがシンプルで平凡なサイトを3つ選び、PC版だけコピーしてみる。

僕が最初に取り組んだことは、ひたすらコピーでした。
他のウェブサイトでシンプルなものを選んでコピーすること。

というより、当時はそれが仕事になってたんですよね。

10年ほど前は、テーブルレイアウトと呼ばれる、イレギュラーなコーディング方法がありました。
テーブルレイアウトとは、テーブルタグという表を作るタグで作られたものです。

当時はブラウザによって、HTML×CSSの解釈にも、かなりの差があったんですね。
で、面倒なのでレイアウトが崩れにくいテーブルで全部作ってしまおうと。
しかし、HTML×CSSの書き方として、それは駄目ですし、Googleにも嫌われます。

そこで、テーブルレイアウトを正規のHTML×CSSで書き換える仕事があったんです。
当然見た目は変えてはいけませんので、そのまま中だけ書き換えるイメージです。

今はもう、そんなサイトほとんど残ってませんし、絶滅しましたよねきっと。

ということで、他人のサイトをコピーする機会がたくさんありました。
しかし、これがめちゃくちゃ効果のあるHTML×CSSの書き方エクササイズでして。
僕の場合、いきなり飛び級してやろうと思い、難しいレイアウトからスタートしました。
書き換えるのに2週間かかったんですが、なんとかやりきることができました。

すると、その時には、だいたいHTML×CSSを書けるようになっていたのです。
自分自身でタグの意味を調べ、どう使えばいいか考え、工夫していきました。
結果、初めて2週間後には、コーディングでは戦力になることが出来たのです。

今は、当時よりもサイトが複雑になっていますから、それだけでは戦力にはなれません。
最低限、レスポンシブレイアウトくらいは作れる必要があるでしょう。
しかし、いきなりレスポンシブでHTML×CSSの書き方を覚えるのは良くありません。
段階的に、分けて考えるべきです。

まず、PC版のHTML×CSSの書き方を習得しましょう。
ウェブはスマートフォン主体となりましたが、まずはPC版をオススメします。
スマートフォンのコーディングより、画面で確認しやすいですし。
実機でテストする必要もありません。

特に、HTML×CSSの書き方をトレーニングしやすそうなシンプルなサイトをオススメします。
いきなり難しいレイアウトのサイトを選ぶと、Javascriptが必要だったりします。
よくある「一般的な会社のサイト」のようなレイアウトを選んで、見た目だけコピーしてみましょう。

焦る必要はありません。
HTML×CSSの書き方も、少しずつ慣れていけば挫折するほどのものではありません。
シンプルなサイトのコーディングから、まずは慣らしていきましょう。

ちなみに、WEBサイトを選ぶ時は、専用のサイトがあります。
世の中には、ウェブデザインリンク集なんてものがあるのですね。
僕たちは、ウェブデザインをする時に、よく参考にしています。

イケサイ
https://www.ikesai.com/

bookma
https://bookma.org/

LPアーカイブ
https://rdlp.jp/lp-archive

僕自身は、よくこのあたりを使っています。
今回は、上記の中から、ごく一般的な企業サイトを選んでみましょう。
例えば、僕のブログもシンプルで再現しやすいレイアウトですね。

特殊な動きとか、柔軟なデザインではなく、昔ながらの企業サイトを選ぶべきです。
クールすぎるものを選ぶと、HTML×CSSの書き方が難しくなってしまいますからね。

なお、ミスした箇所と改善方法を逐一、文章やキャプチャーでまとめましょう。

HTML×CSSの書き方を習得する上で注意すべきは、凡ミスをなくすこと。
そして、同じミスを2回やらかさないことです。
以前、犯してしまったミスに再度、足を取られることは避けるべきです。

HTML×CSSの書き方で言えば、レイアウトの崩れに関してですかね。

僕自身、実際は何度も同じミスに遭遇することがありました。
その度に、なんであの時の解決法をメモしておかなかったんだ、と後悔しました。
一度ミスをしたことは、常に「原因」と「解決策」をメモしておくべきです。

まとめ方はEvernoteなどを使ったメモでも構いません。
エクセルなどで一覧で管理しても良いでしょう。
ご自身のまとめやすい方法で、ミスを管理してみてください。

3. 慣れてきたら、作ったサイトをすべて、レスポンシブ化してみる。

シンプルなサイトとは言え、3サイトほどコーディングしたら、慣れてきます。
1サイト、5〜10ページ程度はありますので、20〜30ページほど制作したのではないでしょうか。
HTML×CSSの書き方は、とにかく練習量です。
何度も繰り返し書いていくことで、HTML×CSSの書き方も馴染んできます。

HTML×CSSの書き方に慣れてきたら、今度はレスポンシブ化に挑戦しましょう。
レスポンシブ化とは、スマートフォンやタブレットなどのデバイスに最適化することです。
画面の横幅に応じて、レイアウトが変化する仕組みですね。

まだHTML×CSSの書き方に慣れていない最初であれば、混乱したでしょう。
しかし3サイトを制作し、HTML×CSSの書き方に慣れた人なら、乗り越えられます!

これまで作ったサイトを、改めてレスポンシブ化してみましょう。
現代のサイトはほぼレスポンシブ化されています。
おそらく、選んだ参考サイトも、レスポンシブ化されているはずです。
もしされていないのであれば、別のレスポンシブ化されているサイトを選びましょう。

作っているうちに、レスポンシブに最適化する必要のある箇所も見えてきます。
こう書けばよかった、とHTML×CSSの書き方を見直すことになるでしょう。

現代のマークアップは、レスポンシブ化が出来なければ、戦力になれません。
モバイルファーストと言われる時代において、モバイル対応が出来ないサイトはNGです。
HTML×CSSの書き方を学ぶなら、最低でもレスポンシブまで対応出来る必要があります。

少し昔話をすると、iPhoneが発売されるまでは、PC版だけでも戦力になりました。
ほんの10年ほど前のことですね。
そこからスマートフォンが普及したことにより、モバイルが絶対になりました。
後にタブレットも発売され、どんどんHTML×CSSの書き方を変える必要が出てきたのです。

HTML×CSSの書き方は、時代に応じて変化していくものです。
ウェブをブラウズする新しい端末が出たら、それに合わせる必要があります。
今後も新しい端末は発売されるでしょうし、HTML×CSSの書き方も変わっていくでしょう。

だからこそ、時代が進めば進むほど、求められるハードルは上がるのかもしれませんね。
一度すべてマスターしてしまえば、後の進化は簡単な応用でなんとかできます。
HTML×CSSの書き方を習得するなら、早めに覚えてしまうことをオススメします。

ちなみにレスポンシブ化は「メディアクエリ レスポンシブ」と調べてみてください。
具体的な方法について、膨大に出てくるので、すぐ理解できるでしょう。
レスポンシブ化は、HTML×CSSの書き方として、そんなに難しいものではありません。

4. レイアウトが複雑なサイトを、さらに3サイトほどコピーする。

ここまで来たら、あと1歩です。
自分好みのサイトを3つ選んで、ひらすらコピーしてみましょう。

最初は、シンプルなサイトを選びましたが、ここでは複雑なレイアウトを選んでみましょう。
動きなどは再現する必要はありません。
動きに関してはJavascriptを使う場合が大半ですし、今一緒にやるべきではありません。
HTML×CSSの書き方を覚えるのがメインなので、外観だけコピーしてみてください。

なお、どうやってレイアウトが作られているのか分からない場合があるはずです。
一発で作り方を把握できるのは、相当経験を積んでからになるでしょう。

そんな時、ブラウザには大抵「サイトの構造を覗けるツール」がついています。
Google Chromeであれば「デベロッパーツール」と呼ばれていますね。
各ブラウザごとに名称が異なるので、調べてみてください。

デベロッパーツールを使えばHTML×CSSの書き方を覗けます。
参考に出来ることは、どんどん参考にしていきましょう。
中を調べてみれば、どんなサイトも大抵は作り方を把握できます。
HTML×CSSの書き方が分からない時は、デベロッパーツールを使ってみましょう。

こうして調べながらコーディングしていくことで、どんどん引き出しが増えていきます。
別のサイトを作ったときに「あ、このレイアウトは前やったな」と思い起こせるでしょう。
さらに慣れてくると、考えなくても即座にレイアウトとソースコードが頭に浮かびます。
とにかく数をこなすことが重要ですので、どんどん挑戦しましょう。

ここまで出来るようになれば、すでに実践レベルで挑戦できるはずです。
HTML×CSSの書き方も、大抵、習得出来ているのではないでしょうか。
むしろ、分からない人にHTML×CSSの書き方を教える側に回れるかもしれませんね。

以降は、何か案件を受けたり、これまで作ったサイトを持って就職活動をしてみてください。
実際に見せられるものがあれば、仕事を見つけるのはそう難しくはありません。

まとめ

後は、実際に仕事を見つけて、案件をこなしていくだけです。
何にせよ、実際の仕事を受けてコーディングしてみましょう。
一番HTML×CSSの書き方の勉強にもなります。
実績としても積み上げられますし、なにより、報酬も発生しますし。

なお、コーディングを再現する時は「1pxもずれないように、そっくりそのまま」を意識してください。
実際に仕事をする際は、デザイナーからデザインデータをもらいます。
そのデザインデータをもとに、コーディングを進めていくわけです。
HTML×CSSの書き方としても、そのまま再現するとなると、なかなか難しいものです。

何よりも、そのままそっくりデザインを再現することが重要なのです。
少しでも印象が異なったりすれば、実践では即座に修正を求められますからね。
デザインや見た目と全く同じ形を再現することを意識しましょう。
出来なければ「再現率が低いから」と切られることは多々あります。

方法を学んだから、仕事に出来るというわけではありません。
実際にサイトを作ってみることが重要なのです。

最近、Progateやドットインストールなど、技術をインプットできるサービスは増えました。
しかし、それらに取り組む大半の方が「レベル上げ」をするだけで実際に作っていません。
それでは、実際に仕事にたどり着くことは難しいでしょう。

Progateやドットインストールを使うのは、最小限で良いのです。
基礎を習得するか、実際に作っていて分からない箇所があった時に使います。

僕もドットインストールをよく使います。
使いますが、使うのは、作っていて技術的に分からない箇所があった時です。
案件や自分のサービスを作りながら、どうしても技術が謎な時に使います。
学ぶためにサービスを使うのではなく、作る時に使うのです。
HTML×CSSの書き方だけではなく、他の言語やスキルでも共通していることです。

HTML×CSSの書き方の基礎が分かったら、即座に実践してみましょう。
そして、どうしても分からない該当箇所を改めてサービスで学ぶのです。
学んでレベルを上げ、学習を続けること自体が目的になってはいけません。
何をアウトプットするかが、重要なのです。

HTML×CSSの書き方自体は、本気で取り組めば1ヶ月もあれば習得できるでしょう。
全力で取り組めばさえ1ヶ月後には仕事を受けられるようになっているのです。
ぜひ、集中して取り組んでみてください。

もう、起業や副業を学ぶために、高額な費用を払う必要はありません。
月360円で超実践的な「副業・起業スキル」を習得しよう!

「起業・複業」教えてもらいたい。けど、知っている人が周りにいない。
スクールやコンサルも高くて手が出せない。そんな悩みは、もう終わりです。
あなたに必要な「起業スキル」を分析、実践プランとして自動提供!
実践、ゼロイチに最適!副業と起業の教育・支援プラットフォーム誕生!
すべての人が起業スキルを得られる世界へ。初回100名様のみ限定募集です! » 詳しくはこちらから!

上山 翔太 / SHOTA UEYAMA

起業家×ウェブクリエイター。日本国内だけでなく世界中で活動。
2015年、セブ島にて立ち上げた日本人対象のクリエイター育成スクールを売却。
帰国後は起業家育成プログラムを立ち上げ、起業家育成に従事するほか、中小企業様のマーケティング戦略策定、ウェブ開発技術を個人で提供。
現在は月3万円、家つきで「WEB×英語×事業づくり」を習得する「IT留学シェアハウスWORKROOM」をセブ島で開始。講座も無く先生もいない「教えない学校」として話題。また、すべての人に起業スキルをというビジョンのもとに、複業と起業の教育・支援プラットフォームを開発、運営。

Facebookお気軽にフォロー&友達申請してください^^
つぶやきは大体ITや起業・マーケティング関係ですが。笑
https://www.facebook.com/shotaueyama01

  • このエントリーをはてなブックマークに追加

今、登録すべき! Amazonプライム!

起業・副業の仕方を学ぶなら、絶対読むべき記事19選!

Google検索で「起業・副業の仕方」等で調べても、良い情報は圧倒的少数です。 どれも、SEO対策でかさ増しを図った記事のみ出てきますね。 本当に成果につながる起業・副業の仕方に関する情報は、相当掘る必要があります。 と

アメリカの経営者から聞いた、最低賃金の怖い話。

そこで、翌日、サンタモニカで他の経営者に話を聞いてみました。 どうやら、ここ数年で物価が上がったのは間違い無いとのことで。 なぜ、そこまで物価が上がったのか尋ねると「最低賃金」の影響だと言うんですね。 オバマ政権の時に最