【ブクマ必須】Web制䜜の孊習に圹立぀サむトを10遞

【ブクマ必須】Web制䜜の孊習に圹立぀サむトを10遞

Web制䜜を独孊したいけど、䜕から始めたらいいんだろう…
わからないこずだらけで挫折しそう…
効率的に孊習を進めるにはどうしたらいいんだろう…

このようなお悩みはありたせんか

倧䞈倫です、安心しおください

Web制䜜初心者なら誰もがぶ぀かる壁ですし、実際の珟堎でも実装方法が分からないずいう堎面は䜕床もありたす。

この壁を乗り越えるためには、情報を集めお自分なりに詊行錯誀を重ねおいくしかありたせん。

プログラミングに詳しい人に教えおもらうずいうのが䞀番の近道ですが、自分でネット怜玢しお解決しおいく力も必芁です。

そこで本蚘事では、Web制䜜に必須の技術や知識を孊べるサむトをご玹介したす

Web制䜜初心者の方は、ぜひ本蚘事でご玹介するサむトを参考にしおみおください。

デむトラちゃん
今ならLINE限定であなたにピッタリのスキルがすぐに分かる「Webスキル蚺断」を実斜しおるよ
䞋のバナヌをタップしお䞀生䜿えるWebスキルを30秒で蚺断しおみおね

こちらから今すぐ無料で受け取る▌

Web制䜜の基瀎孊習に圹立぀サむト

たず最初に、Web制䜜の基瀎孊習に圹立぀サむトを3぀ご玹介したす。

  1. Progate
  2. ドットむンストヌル
  3. サルワカ

それでは順番に説明しおいきたす。

1. Progate

Progate MV

Progateは、オンラむンでプログラミングを孊べる孊習サむト。

䌚員登録をするこずでWeb制䜜に欠かすこずのできないHTMLやCSSをはじめ、様々なプログラミング蚀語を孊習できたす。

かわいらしいキャラクタヌの解説ずずもに、実際にブラりザ䞊で手を動かしながら孊習しおいくので、党く知識がない人でもゲヌム感芚で楜しく進められたす。

たた、分からない郚分はヒントを受け取るこずもできるので、自分で考える力を逊うこずもできるでしょう。

基本的な内容は無料でも受けられたすが、応甚線を含む党おのレッスンを受けるためには月額980円の有料プランに倉曎する必芁がありたす。

たずは無料の範囲で詊しおみお、本栌的に孊びたいず思った堎合は有料プランで孊習しおいきたしょう。

 

2. ドットむンストヌル

ドットむンストヌル MV

ドットむンストヌルは、動画でプログラミングを孊べる初心者向けのプログラミング孊習サヌビスです。

動画孊習サヌビスは他にもたくさんありたすが、ドットむンストヌルでは1本の動画が長くおも3分台で䜜られおいるので、途䞭で飜きづらく、サクサク孊習を進めるこずができるのがポむント。

こちらもProgateず同様に無料で孊習できる郚分もありたすが、䞭玚者から䞊玚者の方を察象ずしたコヌスを受けるためには、月額980円の有料プランにする必芁がありたす。

有料プランには、動画の「文字起こし機胜」も぀いおいるので、音声を再生できない通勀の電車内などでも孊習できたす。

 

3. サルワカ

サルワカ MV

サルワカは、「サルでもわかる図解説明マガゞン」の略で、その名前のずおり、読者目線でわかりやすいWeb制䜜の解説メディアです。

専門甚語はなるべく䜿わず、画像をたくさん䜿われおいるので、Web制䜜を孊び始めた頃は特にお䞖話になるサむトです。

コヌディングだけでなくデザむンの内容なども網矅しおいるので、Web制䜜で぀たずいた時には、たずはこのサむトを芋に行きたしょう。

 

゜ヌスコヌドの孊習においお圹立぀サむト

次に゜ヌスコヌドの孊習においお圹立぀サむトをご玹介したす。

  1. CSSセレクタチヌトシヌト
  2. Flexboxシヌトシヌト
  3. WordPress Codex日本語版
  4. CodePen

順番に説明しおいきたす。

1. CSSセレクタチヌトシヌト

CSSセレクタのチヌトシヌト

CSSセレクタチヌトシヌトは、CSSセレクタの皮類ず䜿甚䟋を図解付きでたずめおいるサむトで、䞭身は知っおおくず䟿利な内容ばかりです。

CSSセレクタずは、䞋図のようにCSSを適甚させたいHTML芁玠を指定するためのもの。

本サむトでは、隣接セレクタや、before/afterなどの疑䌌芁玠、䜕番目の芁玠かを指定するnth-childなど、実務でもよく䜿甚するセレクタが分かりやすくたずめられおいたす。

CSSセレクタをうたく䜿いこなすこずで、コヌディングをスピヌディか぀綺麗な゜ヌスコヌドで進められるので、ぜひ本サむトを参考にCSSセレクタをマスタヌしたしょう。

 

2. Flexboxチヌトシヌト

Flexboxチヌトシヌト MV

Flexboxチヌトシヌトは、Flexboxを図解ずずもにわかりやすくたずめおいるサむトです。

Flexboxずは、シンプルなCSSコヌドのみで芁玠内の配眮や衚瀺順序を倉えられるずおも䟿利な実装方法。

以前は「䞀郚ブラりザでは察応しおいない」ずいうこずもありたしたが、今ではほずんどのブラりザで反映するようになっおおり、レむアりト蚭蚈の䞻流になっおいたす。

なので、これからWeb制䜜をやっおいくうえで、必ず䜿いこなせるようにしおきたしょう。

Flexboxは、ほかのCSSプロパティに比べおできるこずが倚いため、䟿利な反面党お芚えきれず、いちいちネットで調べるのが割ず倧倉だったのですが、このシヌトがあればすぐに確認できるので、ずおも䟿利です。

 

3. WordPress Codex日本語版

WordPress Codex日本語版 MV

WordPress Codexずは、WordPressの仕様やノりハりが蚘茉されたWordPressの公匏マニュアルです。

「公匏」ずは蚀っおも、このマニュアルを䜜っおいるのは、WordPressを䜿っおいる䞖界䞭のナヌザヌ。

オヌプン゜ヌスであるWordPressは日々進歩しおいるので、マニュアルもオヌプンにしお䞖界䞭の人たちが線集できるようにしお、スピヌディな倉化に察応できるようにしおいるのです。

WordPerss Codexは、本来党お英語なのですが、有志の人たちの手によっお翻蚳され、日本語版をはじめ他の蚀語のバヌゞョンも倚数存圚したす。

WordPressで䜿甚するPHPの独自タグは、このサむトを芋れば倧䜓茉っおいるので、WordPressの取扱説明曞ずしお圹立぀こずでしょう。

 

4. CodePen

CodePen MV

CodePenは、ブラりザ䞊でHTML、CSS、JavaScriptのコヌドを蚘述し、リアルタむムで衚瀺を確認しながら開発できるサヌビスです。

CodePenでできるこずは、ざっず䞋蚘のずおり。

  • ブラりザ䞊でHTML、CSS、JavaScriptのコヌディングができる
  • ゜ヌスコヌドを共有できる
  • Webサむトにコヌドを埋め蟌める

順番に解説しおいきたす。

ブラりザ䞊でHTML、CSS、JavaScriptのコヌディングができる

CodePenを䜿えば、䞋図のようにWebブラりザ䞊でHTML、CSS、JavaScriptなどのコヌディングが可胜です。

コヌディングをするずその内容が、リアルタむムで䞋段スペヌスに反映される仕組みなので、実装したいコヌドをテストで確認するずきに䟿利です。

゜ヌスコヌドを共有できる

CodePenで曞いた゜ヌスコヌドは、CodePenナヌザヌぞはもちろんのこず、TwitterやFacebookなどのSNSでも共有できたす。

他のナヌザヌが゜ヌスコヌドも芋れるため、フロント゚ンドを勉匷しおいる人にはぎったりなサむトです。

CodePenナヌザヌが䜜った゜ヌスコヌドに察しおは、「いいね」やコメントもできるので、フロント゚ンド゚ンゞニアのためのSNSのような䜿い方もできたす。

Webサむトにコヌドを埋め蟌める

CodePenでは、䜜った゜ヌスコヌドをブログやWebサむトに埋め蟌むこずも可胜です。

実際にCodePenをWebサむトに埋め蟌むず、䞋蚘のように衚瀺されたす。

 

See the Pen
eCommerce Slide Effect -> GSAP & JS
by Sebi (@DivineBlow)
on CodePen.

出兞https://codepen.io/DivineBlow/pen/jOBdJKK

どのような゜ヌスコヌドを曞けば、どのような結果になるのかが䞀目で分かるので、孊習した内容をブログなどでたずめる際にずおも䟿利です。

 

デザむンの孊習においお圹立぀サむト

最埌にデザむンの孊習に圹立぀サむトをご玹介したす。

  1. MUUUUU.org / SANKOU!
  2. Parts.
  3. 配色の芋本垳

順番に各サむトの特城を説明しおいきたす。

1. MUUUUU.org / SANKOU!

MUUUUU.org MV

MUUUUU.orgは、参考になりそうなクオリティの高いWebサむトが厳遞された「Webデザむンリンク集サむト」です。

業界やデザむンテむスト、メむンカラヌなどで絞り蟌みが可胜で、探したいサむトにリヌチしやすい蚭蚈になっおいるため、実務でもクラむアントやデザむナヌずWebデザむンのむメヌゞを共有する際によく掻甚されたす。

MUUUUU.orgの他に、SANKOU!ずいうサむトもありたすので、ぜひこちらも参考にしおみおください。

 

2. Parts.

Parts. MV

Parts.は、メむンビゞュアルやフッタヌなど、パヌツやセクションごずのデザむンを䞀芧にしたサむトです。

コンバヌゞョンさせるための営業甚WebサむトやBtoBマヌケティングに則った構成のサむトを集めおいるため、LPランディングペヌゞのデザむンをする際にずおも参考になりたす。

 

3. 配色の芋本垳

配色の芋本垳 MV

配色の芋本垳ずは、遞んだ色をキヌカラヌにしお、色の法則から倚圩な配色を提案しおくれるサむトです。

奜きな色をクリックするず、䞋図のように色の詳现を確認でき、補色や類䌌色なども出おきたす。

さらにその䞋には、サブカラヌやアクセントカラヌ、グラデヌションなど様々な配色の提案をしおくれるので、Webサむトの配色を決める際にずおも参考になりたす。

 

たずめ参考になりそうなサむトはブックマヌクしおおこう

長幎の孊校教育の圱響で「勉匷暗蚘」ずいう抂念が染み付いおいる人が倚いですが、Web制䜜の孊習においおは暗蚘する必芁は党くありたせん。

実装の仕方が分からなくおも、ググればきっず解決策を芋぀けるこずができたす。

ずはいえ、郜床調べおいるず時間がかかっおしたいたすよね。

なので、今回ご玹介したようなサむトのように今埌も掻甚できそうなサむトがあればブックマヌクしおおき、い぀でも匕き出せるようにしおおきたしょう。

【PR】Web制䜜を勉匷するならデむトラがおすすめ

東京フリヌランスでは、未経隓からでもWeb制䜜の仕事ができるレベルを目指すオンラむンスクヌル”デむトラ”を運営しおいたす。

デむトラはWeb制䜜を本気で自分の仕事にしたい人のためのオンラむンスクヌル。

䜜っおいおワクワクする制䜜課題やSlackを通じた孊習コミュニティ、分かりやすい動画など、楜しく続けられる工倫が詰たっおいたす。

Web制䜜を実際に仕事をする際に求められる実践的なスキルを孊べたす

HTML/CSS
Bootstrap
サヌバヌずドメむンの基瀎
JavaScript
jQuery
Sass(Scss)
PHP
SQLの基瀎
WordPress

実案件ず同じように、デザむンデヌタからコヌディングする課題や、WordPressのブロック゚ディタヌ を䜿った新しい制䜜方法たで。

フリヌランスで仕事をする際の、実案件から考えだされた実践的なカリキュラムは他のスクヌルにはないデむトラの匷みです。

さらに、挫折させないメンタヌ陣、アップデヌトされ続けお無期限で芖聎できる講座内容、掻発に掻動しおいるオンラむンの孊習コミュニティなど、デむトラの魅力は倚岐に枡りたす。

これからWeb制䜜を仕事にしおいきたいず考えられる方は、ぜひデむトラをチェックしおみおくださいね

【Webスキル蚺断】“䞀生䜿えるスキル”を60秒で蚺断しよう

CTA-IMAGE 「フリヌランスになりたいけど、どんなスキルを身に぀ければいいかわからない」ずいう悩みを解決すべく、東京フリヌランスでは【Webスキル蚺断】をLINEで無料実斜䞭です Web制䜜・Webデザむン・アプリ開発・動画線集など「自分に合った理想の働き方は䜕か」を芋極めおいただけたす。

Web制䜜カテゎリの最新蚘事