<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>html | 気になるBLOG</title>
	<atom:link href="https://design-eight.com/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>https://design-eight.com</link>
	<description></description>
	<lastBuildDate>Fri, 16 Oct 2020 02:20:36 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>＜プログラミング独学まとめ＞４ヶ月でできたこと</title>
		<link>https://design-eight.com/2020/09/08/programing_study/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=programing_study</link>
					<comments>https://design-eight.com/2020/09/08/programing_study/#respond</comments>
		
		<dc:creator><![CDATA[ねこまる]]></dc:creator>
		<pubDate>Tue, 08 Sep 2020 14:40:26 +0000</pubDate>
				<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[勉強方法]]></category>
		<category><![CDATA[独学]]></category>
		<guid isPermaLink="false">https://design-eight.com/?p=361</guid>

					<description><![CDATA[<p>悩む人 プログラミングを始めたい。 スクールはコスト的に難しいなぁ。 独学してる人多いけど、実際どうやって、どこまでできるんやろか？ そんな疑問に対して、私が独学し、その成果でできることをお伝えします。 この記事を読むと [&#8230;]</p>
The post <a href="https://design-eight.com/2020/09/08/programing_study/">＜プログラミング独学まとめ＞４ヶ月でできたこと</a> first appeared on <a href="https://design-eight.com">気になるBLOG</a>.]]></description>
										<content:encoded><![CDATA[<div class="speech-wrap sb-id-3 sbs-line sbp-l sbis-cb cf"></div>
<div class="speech-wrap sb-id-13 sbs-stn sbp-l sbis-cb cf">
<div class="speech-person">
<figure class="speech-icon"><img decoding="async" class="speech-icon-image" src="https://design-eight.com/wp-content/uploads/2020/10/businessman1_nayami.png" alt="悩む人" /></figure>
<div class="speech-name">悩む人</div>
</div>
<div class="speech-balloon">
<p>プログラミングを始めたい。</p>
<p>スクールはコスト的に難しいなぁ。</p>
<p>独学してる人多いけど、実際どうやって、どこまでできるんやろか？</p>
</div>
</div>
<p>そんな疑問に対して、私が独学し、その成果でできることをお伝えします。</p>
<p>この記事を読むと</p>
<div class="info-box">
<ul>
<li>プログラミングの独学方法</li>
<li>4ヶ月でどのくらいのレベルまで達成</li>
</ul>
</div>
<p>がわかります。</p>

  <div id="toc" class="toc tnt-number toc-center border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">結論：独学で副業レベルまで達成可能</a></li><li><a href="#toc2" tabindex="0">最初にやるべきこと</a><ol><li><a href="#toc3" tabindex="0">ドットインストールを使おう</a></li><li><a href="#toc4" tabindex="0">PROGATE（プロゲート）</a></li><li><a href="#toc5" tabindex="0">JQueryについて</a></li><li><a href="#toc6" tabindex="0">模写サイトコーディングでまとめ</a></li></ol></li><li><a href="#toc7" tabindex="0">平均学習時間は？</a><ol><ol><li><a href="#toc8" tabindex="0">時間はいかに作るかがポイント</a></li></ol></li></ol></li><li><a href="#toc9" tabindex="0">まとめ</a><ol><li><a href="#toc10" tabindex="0">次のステップは</a></li></ol></li></ol>
    </div>
  </div>

<h2><span id="toc1">結論：独学で副業レベルまで達成可能</span></h2>
<p><img fetchpriority="high" decoding="async" class="alignnone size-full wp-image-467" src="https://design-eight.com/wp-content/uploads/2020/09/self_study11-1.jpg" alt="" width="1024" height="683" srcset="https://design-eight.com/wp-content/uploads/2020/09/self_study11-1.jpg 1024w, https://design-eight.com/wp-content/uploads/2020/09/self_study11-1-300x200.jpg 300w, https://design-eight.com/wp-content/uploads/2020/09/self_study11-1-768x512.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>プログラミングの勉強を始めて４ヶ月目で副業レベルまで到達できました。</p>
<p>近年様々なツールで、しかも無料でプログラミングが学べます。WEBサイト、youtubeなどでかなり細かいところまで学べ<wbr />ます。しかし、独学とは疑問点があっても自分でググって調べるなど自己解決しなければならず、『絶対習得してやる！』という強い心を持ってください。独学の挫折は自己解決ができないから生まれるのです。ググれば必ず解決できます。それを前提に臨んでいきましょう。最初はみんなそうやってスタートしているのです。知識0ベースの私は現にぐぐりまくりました。</p>
<p>これからはじめる人にとって全くの知識０からどこまでできるようになるか目安としてもらえれば幸いです。<br />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- study --><br />
<ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-9519111903483360" data-ad-slot="8128845889" data-ad-format="auto" data-full-width-responsive="true"></ins><br />
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
<h2><span id="toc2">最初にやるべきこと</span></h2>
<p><img decoding="async" class="alignnone size-full wp-image-459" src="https://design-eight.com/wp-content/uploads/2020/09/self_study24.jpg" alt="" width="1024" height="683" srcset="https://design-eight.com/wp-content/uploads/2020/09/self_study24.jpg 1024w, https://design-eight.com/wp-content/uploads/2020/09/self_study24-300x200.jpg 300w, https://design-eight.com/wp-content/uploads/2020/09/self_study24-768x512.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>勉強をはじめるにあたり、まず独学かスクールかの２択があるかと思います。私は在宅ワーク中の空き時間や通勤時間が丸々浮いた分でコツコツ独学でやることにしました。もちろんスクールの費用も安くはないので独学一択です。</p>
<p><span class="bold">※０円のプログラミングスクールという近道</span><br />
最近はプログラミングスクールも増えており、最初の基礎ベースを身につけるならTechAcademyの方が早いかもです。TechAcademyは無料体験があるので、これを使ってプログラミングの基礎を学ぶのもありですね。<br />
<a rel="nofollow" href="//af.moshimo.com/af/c/click?a_id=2178666&amp;p_id=1555&amp;pc_id=2816&amp;pl_id=22703&amp;guid=ON"> » TechAcademyの無料体験はこちら</a></p>
<p>&nbsp;</p>
<p>まずは最初に学ぶべきことにはHTML／CSSがあります。すべてのWebサイトのベースとなる知識でこれを知っていないとなにも始まりません。</p>
<p>とはいえ、HTML／CSSの基本を学ぶことはとても簡単です。今は無料である程度学べる環境が整っています。</p>
<h3><span id="toc3">ドットインストールを使おう</span></h3>
<p><img decoding="async" class="alignnone size-full wp-image-471" src="https://design-eight.com/wp-content/uploads/2020/09/study_self111.jpg" alt="" width="1024" height="683" srcset="https://design-eight.com/wp-content/uploads/2020/09/study_self111.jpg 1024w, https://design-eight.com/wp-content/uploads/2020/09/study_self111-300x200.jpg 300w, https://design-eight.com/wp-content/uploads/2020/09/study_self111-768x512.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>プログラミングを始める方にとっては絶対的な信頼の、とても有名なドットインストールを使います。</p>
<p>ドットインストールとは<span class="bold">プログラミングを動画でわかりやすく解説しているサイト</span>で、私もかなりお世話になっています。無料で基礎的なHTML,CSSが学べてしまいます。</p>
<p><a href="https://dotinstall.com/lessons/basic_html_v5">» HTML入門 (全14回) – プログラミングならドットインストール</a></p>
<p><a href="https://dotinstall.com/lessons/basic_css_v5">» CSS入門 (全15回) – プログラミングならドットインストール</a></p>
<p>有料コンテンツもあり月額１０００円程度なので私は有料プランでお世話になりました。有料コンテンツは無料の内容をさらに深堀したものになっています。スクールに比べたら安いので即入会です。</p>
<p>ドットインストールの始め方についての記事はこちら↓</p>
<p><a title="【独学】ドットインストールの始め方" href="https://design-eight.com/2020/09/12/self_study-2/">【独学】ドットインストールの始め方</a></p>
<p>&nbsp;</p>
<div class="blank-box bb-tab bb-check bb-blue"><a rel="noopener" href="https://www.amazon.co.jp/gp/product/B07PS1ZJN6/ref=as_li_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=B07PS1ZJN6&amp;linkCode=as2&amp;tag=eighteight-22&amp;linkId=2bc7057ee0bc51066720c000a41df63d" target="_blank"><img loading="lazy" decoding="async" class="alignleft" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&amp;MarketPlace=JP&amp;ASIN=B07PS1ZJN6&amp;ServiceVersion=20070822&amp;ID=AsinImage&amp;WS=1&amp;Format=_SL250_&amp;tag=eighteight-22" width="96" height="122" border="0" /></a><img loading="lazy" decoding="async" style="border: none !important; margin: 0px !important;" src="//ir-jp.amazon-adsystem.com/e/ir?t=eighteight-22&amp;l=am2&amp;o=9&amp;a=B07PS1ZJN6" alt="" width="1" height="1" border="0" /><a rel="noopener" href="https://www.amazon.co.jp/gp/product/B07PS1ZJN6/ref=as_li_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=B07PS1ZJN6&amp;linkCode=as2&amp;tag=eighteight-22&amp;linkId=96c4112f06865e7ca7bdf9775dcf1e17" target="_blank">1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座</a><img loading="lazy" decoding="async" style="border: none !important; margin: 0px !important;" src="//ir-jp.amazon-adsystem.com/e/ir?t=eighteight-22&amp;l=am2&amp;o=9&amp;a=B07PS1ZJN6" alt="" width="1" height="1" border="0" /><br />
この本１冊でWEBサイトの仕組みや構成、制作までの道のりを最低限の知識でこなせるような内容です。より実戦に近い情報があるのでWEBだけでは補えない部分もこれでフォローしました。</div>
<h3><span id="toc4">PROGATE（プロゲート）</span></h3>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-451" src="https://design-eight.com/wp-content/uploads/2020/09/self_sutdy22.jpg" alt="" width="1024" height="683" srcset="https://design-eight.com/wp-content/uploads/2020/09/self_sutdy22.jpg 1024w, https://design-eight.com/wp-content/uploads/2020/09/self_sutdy22-300x200.jpg 300w, https://design-eight.com/wp-content/uploads/2020/09/self_sutdy22-768x512.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></p>
<p>プロゲートも独学ツールとして必ずあげられるサイトです。これはゲーム感覚で進められるアプリ、WEBサイトです。携帯アプリからの勉強だと単語の穴埋め的な作業で進めていくので簡単に進めていけます。WEB上での勉強方法は実際に単語を打ち込んで行きますのでより実戦にちかい勉強方法です。これも有料プランが月額１０００円程度なので私は入会しました。ドットストールとは違った形でのアプローチなのでHTML,CSSの理解がより深まるはずです。</p>
<div class="speech-wrap sb-id-12 sbs-stn sbp-l sbis-cb cf">
<div class="speech-person">
<figure class="speech-icon"><img decoding="async" class="speech-icon-image" src="https://design-eight.com/wp-content/uploads/2020/10/2757dbf8990a31ee92fadced42b4cf24-1.png" alt="ねこまる" /></figure>
<div class="speech-name">ねこまる</div>
</div>
<div class="speech-balloon">
<p>私はドットインストールとプロゲートを同時に進行していきました。あとはどうしても理解ができない部分はググって見ていろんな角度からの説明で理解しました。HTML CSSに関してはこれで大体内容は掴めるようになりました。</p>
</div>
</div>
<p>&nbsp;</p>
<p>ここまで来れば簡単なホームページは作れるようになってます。あとは小技としてJQueryを使用して動きのあるサイトにしていきます。<br />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- study --><br />
<ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-9519111903483360" data-ad-slot="8128845889" data-ad-format="auto" data-full-width-responsive="true"></ins><br />
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
<h3><span id="toc5">JQueryについて</span></h3>
<p>jQueryとは、JavaScriptでできることを、より簡単な記法で実現できように設計されたJavaScriptライブラリです。CSSでは表現できないアニメーションなどの動きを実装できるプログラムです。</p>
<div class="info-box">これが実装できるとサイトのクオリティが上がりますので抑えておきましょう。</div>
<p>これもProgateやドットインストールで学習可能ですが有料プランです。またググってみても多くのサイトで説明されてますがベースを把握していないとやや理解に時間がかかるかもです。</p>
<div class="speech-wrap sb-id-12 sbs-stn sbp-l sbis-cb cf">
<div class="speech-person">
<figure class="speech-icon"><img decoding="async" class="speech-icon-image" src="https://design-eight.com/wp-content/uploads/2020/10/2757dbf8990a31ee92fadced42b4cf24-1.png" alt="ねこまる" /></figure>
<div class="speech-name">ねこまる</div>
</div>
<div class="speech-balloon">
<p>私はまずProgateで基礎を学んだ後、足りない部分はググって調べていきました。</p>
</div>
</div>
<h3><span id="toc6">模写サイトコーディングでまとめ</span></h3>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-457" src="https://design-eight.com/wp-content/uploads/2020/09/self_study23-1.jpg" alt="" width="1024" height="683" srcset="https://design-eight.com/wp-content/uploads/2020/09/self_study23-1.jpg 1024w, https://design-eight.com/wp-content/uploads/2020/09/self_study23-1-300x200.jpg 300w, https://design-eight.com/wp-content/uploads/2020/09/self_study23-1-768x512.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></p>
<p>ここまできたら実際のサイトを真似して作ってみます。これを模写コーディングといいます。いろんなレベルがあるのですが、これができたら大体のもは制作できるレベルのサイトまで模写できるようになりました。</p>
<p><a href="http://smytk0809.xsrv.jp/isala/isala_copy.html">模写サイト実績１はこちら</a></p>
<p><a href="http://smytk0809.xsrv.jp/jin_copy.html">模写サイト実績２はこちら</a></p>
<p>&nbsp;</p>
<div class="question-box common-icon-box"><strong>模写作成には必ずわからない部分が出てきます。そこでいかに自分でググって自己解決できるかがポイントです。これは実戦でも必ず出てくる状況なので、しっかり取り組んで検索する力をつけましょう。</strong></div>
<div></div>
<div>模写コーディングについてはこちらでまとめてますのでどうそ↓</div>
<div></div>
<div><span class="badge badge-red">関連</span><a title="【初心者向け】模写コーディングのやり方" href="https://design-eight.com/2020/09/10/self_study_coding/">【初心者向け】模写コーディングのやり方</a></div>
<h2><span id="toc7">平均学習時間は？</span></h2>
<div class="speech-wrap sb-id-13 sbs-stn sbp-l sbis-cb cf">
<div class="speech-person">
<figure class="speech-icon"><img decoding="async" class="speech-icon-image" src="https://design-eight.com/wp-content/uploads/2020/10/businessman1_nayami.png" alt="悩む人" /></figure>
<div class="speech-name">悩む人</div>
</div>
<div class="speech-balloon">
<p>勉強する時間がないよ</p>
<p>いつすればいいのか・・・</p>
</div>
</div>
<p>仕事をしながら勉強で何かを新しく習得することはなかなかできることではありません。だからこそ、取り組む人が少なく、取り組んだ人こそが副業などの選択肢が増え、生活を豊かにできるのです。</p>
<h4><span id="toc8">時間はいかに作るかがポイント</span></h4>
<p>勉強する人としない人の差は0か100の差です。1日10分でもいいので取り組むことが大事です。</p>
<div class="speech-wrap sb-id-12 sbs-stn sbp-l sbis-cb cf">
<div class="speech-person">
<figure class="speech-icon"><img decoding="async" class="speech-icon-image" src="https://design-eight.com/wp-content/uploads/2020/10/2757dbf8990a31ee92fadced42b4cf24-1.png" alt="ねこまる" /></figure>
<div class="speech-name">ねこまる</div>
</div>
<div class="speech-balloon">
<p>在宅ワークの日は通勤時間が丸儲け！往復2時間程度の時間を有効に使えたよ。</p>
</div>
</div>
<div class="info-box">
<p><strong>お仕事をしている方の時間の作り方</strong></p>
<ul>
<li>通勤時間</li>
<li>寝る前</li>
<li>早起き</li>
<li>休日</li>
</ul>
</div>
<p>やはり通勤時間は有効です。ドットインストールやProgateなどはスマホでも勉強可能です。他の人が映画や漫画を読んでいる間に勉強してさを付けましょう！</p>
<p>また就寝前は余裕があるときにしましょう。眠い時はあまり頭に入らないので、コンディションによって決めましょう。</p>
<p><strong>個人的には早起きしてからの勉強がおすすめです。やはりフレッシュな状態での取り組みは一番効果的です。</strong>もし可能ならば1時間でも30分でも早起きして取り組むことで時間が作れますのでぜひ一度試してみてください。</p>
<p>&nbsp;</p>
<div class="speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf">
<div class="speech-person">
<figure class="speech-icon"><img decoding="async" class="speech-icon-image" src="https://design-eight.com/wp-content/uploads/2020/09/827e4d52a33e90a41f13dd8a5f91dbdc.png" alt="" /></figure>
</div>
<div class="speech-balloon">
<p>早起きかぁ</p>
<p>厳しいなぁ</p>
</div>
</div>
<p>そういう人はほとんどですが、<strong>強い気持ちがないとそもそも独学は無理です。</strong></p>
<p>個人によりますが4ヶ月での勉強時間は平均的に1日1〜2時間、月に50時間ほどは取り組むことが1つ指標です。もちろん、それより早く習得する人もいれば、もう少し時間がかかる場合もあります。</p>
<p>結果的に、模写サイトを作れれば問題ないので、2ヶ月目でも作れるスキルがあればOKです！</p>
<h2><span id="toc9">まとめ</span></h2>
<p>独学での勉強は強い気持ちが大事です。私は4ヶ月でおおよそのLP制作の知識は得る事ができましたが、勉強できる環境は様々です。期間はあくまで目安として、<strong>本質はしっかり習得することです。</strong></p>
<p>自分でサイトを作成できることがゴールならば、それに向かって確実に焦らずに進めていきましょう。</p>
<h3><span id="toc10">次のステップは</span></h3>
<p>次のステップは案件獲得です。これがまたなかなか取れずに苦戦中です。。。知識０の私でもサイト１つ作れる自信がつきました。皆さんも必ずできるようになりますのでぜひ頑張ってください。</p>
<p>&nbsp;</p>
<p><span class="badge badge-red">関連</span><a title="【独学プログラマーが副業】すべきタイミング" href="https://design-eight.com/2020/10/07/freelance-site/">【独学プログラマーが副業】すべきタイミング</a></p>
<p>&nbsp;</p>
<p><span class="bold">※０円のプログラミングスクールという近道</span><br />
前述しましたが最近はプログラミングスクールも増えており、最初の基礎ベースを身につけるならTechAcademyの方が早いかもです。TechAcademyは無料体験があるので、これを使ってプログラミングの基礎を学ぶのもありですね。<br />
<a rel="nofollow" href="//af.moshimo.com/af/c/click?a_id=2178666&amp;p_id=1555&amp;pc_id=2816&amp;pl_id=22703&amp;guid=ON"> » TechAcademyの無料体験はこちら</a></p>The post <a href="https://design-eight.com/2020/09/08/programing_study/">＜プログラミング独学まとめ＞４ヶ月でできたこと</a> first appeared on <a href="https://design-eight.com">気になるBLOG</a>.]]></content:encoded>
					
					<wfw:commentRss>https://design-eight.com/2020/09/08/programing_study/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
