2019-12-27コーディングこんにちは、ガタガタです。html/cssコーディングを勉強中の方から、たびたび質問をいただきます。学習につまづいている方が多く、みなさん苦しんでいる印象です。私はhtml/css学習を始めて4ヶ月で、未経験ながらwebデザイナー&コーダーとしてweb制作会社に就職しました。学習は比較的短期間でしたが、自分なりに情報を集め、お金をかけず効率的に勉強したおかげです。この記事では、私が初心者から4ヶ月でコーダーとして採用されるまでに行った学習方法を紹介します。実録ですので、ぜひ真似してみてください。html/cssの基礎を学ぶドットインストールの動画を見ながら手を動かすドットインストールは、プログラミングの動画教材を無料で見ることのできる学習サービスです。動画一本が2〜3分の短いものなので、サクサク学習を進めることができます。html/cssの他にJavasript、phpやRuby、各種テキストエディタの使い方なども学ぶことができます。一部、月額料金を払わなければ見ることのできないコンテンツもありますが、html/cssの基礎なら無料のコンテンツだけでも十分学べます。2019年11月現在は、なんとプレミアム会員向けのコンテンツも無料公開されています。私もこれでphpを学んでいます。肝心なのは、ただ流し見するのではなく、動画を一時停止しながら、コードを真似して自分で書くことです。どこかで、同じように書いたはずなのに上手く動かなくて苦しむ場面が出てきます。いう経験がなければ、プログラミング言語を操ることはできません。テキストエディタを開いて、手を動かしてみてください。HTML(全14回)はじめてのCSS(全15回)また、別の無料プログラミング学習サービスでProgateもオススメです。こちらは動画ではなく、学習サービスサイト上のテキストエディタに直接自分でコードを書いて学習する感じです。どちらも無料ですので、とりあえず登録して触ってみて、自分に合ったサービスを利用すると良いでしょう。(ちなみに私はドットインストール派です)ドットインストールProgate実際にサイトを作る手順を知るさて、上記学習サイトで一通り基礎を学び終わったら、いよいよ実際にサイトを作る手順を学びます。楽天ブックスAmazonKindle7netこの本は、Web制作界隈で長らく人気を誇っているhtml/cssの教本が、2019年3月にweb制作の最先端にあわせて刷新されたものです。分かりやすく、かつ最新のhtml/cssの技法に対応しているため、大変オススメ。html/cssの基礎を知っていても、それだけではサイトを1から構築するのは困難です。それは、サイトを効率よく組み立てるための手順をまだ知らないからです。この本では、実際にサイトを組み立てるための手順を学ぶことができます。学習サイトを使ったのと同じように、この本に書いてあるコードをまずはそのまま、解説を読みながら写経してみれば、サイト構築の手順や考え方が理解できるようになります。Bootstrapのグリッドシステムの使い方を理解するBootstrapとはTwitter社が作ったシステムで、divに指定のclassを与えるだけで、簡単にレスポンシブ対応ページを作ることができるという非常に優れたフレームワークです。今やこのBootstrapは個人・企業を問わず、さまざまなサイトで使われています。当ブログでも、Bootstrapによるレスポンシブ化を採用しています。Bootstrap公式サイトBootstrapのグリッドシステムの使い方を初心者に向けておさらいする(webさえ)Bootstrap以外にもCSSフレームワークは数ありますが、とりあえずこれだけ押さえておけば困ることはありません。Bootstrapは利用者もかなり多いため、困ったときも少しぐぐれば大量の情報が手に入ります。今はレスポンシブ対応サイトが標準なので、Bootstrapを使いこなせるようになっておきましょう。既存サイトを模写してみるさて、ここまで来ればいよいよ模写に入れます。これまでで学んだことを総動員して、自分の力を試してみましょう!模写コーディングのルール既存サイトを見て、デザインを自力で再現する。検索などの機能面はとりあえずおいとくレスポンシブも対応させる。ブレークポイントはだいたいでOKソースはなるべく見ない。答え合わせで使う幅計測やカラーピッカーなどのツールは使ってOKまた、模写の際に以下のツールを使うと便利です。余白が何pxかとか、カラーコードやフォントが何か......までは自力ではわかりませんからね。カラーピッカー:サイト上の色のコードが一瞬でわかる!定規:高さ、幅が何pxか一瞬でわかる!フォント解析:文章のフォント、色、太さ、行間が一瞬でわかる!画像一括ダウンローダー:使用画像が一瞬で手に入る!※background-imageで設定されているものはDLできないので、デベロッパーツールから画像URLを取得して適宜DLしましょう。模写するサイトですが、初心者にオススメなのは以下のようなサイトです。カラムが単純で、大まかなパーツごとに分けやすい動き(アニメーション)が少ないレスポンシブ対応である(ウインドウを小さくするとデザインが変わる)パッと見て「だいたいできるかも......」と思えるちなみに、私が実際に模写したサイトは以下のとおり。背景に動画を使っているところがありますが、適当な写真やキャプチャで代用してもOKです。このサイトはちょっと大きいし、動きが多め。調べればなんとかなります。私の自作したイラストお仕事募集サイトは、模写OKとします。模写コーディング成果物としてポートフォリオに使用するのも可とします。下記条件を厳守の上、ご活用ください。やってもOK!上記サイトを模写コーディングするhtml/cssのソースを見て答え合わせをする模写したものをポートフォリオに載せる(必ず既存サイトの模写であることを明記してください)これは禁止ですサイトやイラストの自作発言ポートフォリオ利用以外の目的の二次配布オリジナルのサイトを作ってみよう!3サイトほど模写を行えるようになれば、もはや自分でサイトを組み立てることなんて造作もありません。自分のお仕事募集サイトを作ってみましょう。コーダーとして自立したい方も、どこかの会社に就職する方も、これは一度やっておくと良いでしょう。以下のようなメリットがあるからです。デザイン含め、自分で1からサイトを構築できることが大きなアピールポイントになる自分のサイトなので、「成果物を見せてください」と言われたときにサッと出せるお仕事募集の文章を作ってみることで、営業に必要な自分の強みを見直せるWordPressのサイトを運営してみるのもオススメWordPressは個人ブログにとどまらず、企業や行政など、大きな組織のサイトでも広く使われているCMSです。Web制作を仕事にしたいなら、WordPressはまず避けては通れません。自分で自由にいじくりまわせるWordPressサイトを持っておくと非常に助けになります。WordPressの良いところ、悪いところを自分の肌をもって知っておけば、必ずプラスになるはずです。Web制作を学びたいならテーマはminimalをオススメします。有料ではありますが、値段に見合ったリターンが得られるはずです。SEO内部対策済みであり、SEO対策のお手本にできる機能実装やデザイン変更をするのに自分でコードを書かなければいけないコードが必要最低限の仕様なので、カスタマイズしやすい詳しくは以下の記事を参考にしてください。【WordPress】テーマ『Minimal』がプログラミング学習者にぴったりな件。機能追加の方法も紹介Javascriptやphp学習はどうすればいい?多くの方が悩むのは「html/cssを勉強する過程で、Javascript(jQuery)やPHPを触る必要も出てきたけど、これらの言語も扱えるようにならなきゃいけないのか?」というところだと思います。時間をかけて勉強する必要はない。......結論から言いますと、例えば自分でイチからコードを書けたりする必要はありません。書けたほうが良いのは間違いありませんが、時間をかけて習得するほど必要があるかは、それぞれの目指すゴールによります。Web制作をする上でJavascriptやPHPは必ずどこかで触ることになりますので、必要なときくらいはググりながら使えるようにしておきましょう。今はJavascriptの代わりに、jQueryを使うコーダーさんも多いので、基礎的なところは理解しておきましょう。下記の本が役に立ちます。楽天ブックスAmazonKindle7netWeb制作においてコーダーがPHPを触る場面というと、WordPressサイトの案件が多いかと思いますが、以下の本はWordPressのテーマのしくみなどがわかりやすくオススメです。楽天ブックスAmazonKindle7netまとめhtml/cssコーディングは、「初心者」を脱して模写ができるようになるまでがとてもキツイです。ここで脱落する人もたくさんいます。裏を返せば、ここを切り抜けることができればあなたは「コーディングのできる一握りの人間」になるのです。web制作はできるようになればとても楽しく、仕事にすれば在宅ワーカーにもなれるチャンスがあり、しかも今後もしばらく需要の落ちない分野です。学び始めるのは今からでも遅くありません。頑張って習得してください。合わせてどうぞ【web制作を】模写コーディングができるようになったら、次にすべきこと【仕事にする】html/css勉強の仕上げとして模写コーディングを行う人は多いですが、その次に何をするか考えていますか?この記事では、模写コーディングができるようになったらやっておくといいことを挙げます。この中から2つくらいは実践しておくと、各段に実力がアップするはずです。興味のあることを選んで、やってみてください。2019.12.04ガタガタ2019.4.6〜プログラミング勉強を始め、同年8月に未経験ながらWeb制作会社に就職したWebデザイナー・コーダーです。ゲーム、映画、漫画、そして科学が大好きな薬学出身者。【WordPress】テーマ『Minimal』がプログラミング学習者にぴったりな件。me!2019.4.6〜プログラミング勉強を始め、同年8月に未経験ながらWeb制作会社に就職したWebデザイナー・コーダーです。ゲーム、映画、漫画、そして科学が大好きな薬学出身者。ロリポップを使用しています。