こんにちは、ミナミです。

と悩んでいませんか？

display:blockやinline-blockなどは最初に習うCSSの1つです。

しかし、display::blockやinline-blockの使い方や違いは難しいと感じると人もいるはずです。

僕も全くわかりませんでした。

そこで、今回はdisplay:block、inline-block、inlineについてわかりやすく初心者目線で解説します。

widthとheightについて難しいと感じている人はこちらの記事でわかりやすく解説しています▼

あわせて読みたい

【わかりやすい図解あり】widthとheightを解説｜読み方や使い方、効かないときの対処法などの疑問を解決

marginとpaddingについて詳しく知りたい人はこちらの記事で解説しています▼

あわせて読みたい

【図解あり】marginとpaddingの違いや使い分けを初心者の人でもわかりやすく解説｜効かないときの対処法…

【CSS】displayプロパティで表示形式を変えられる

displayプロパティは

などに変更することができます。

「block」や「inline-block」ってなに？って思うかもしれないですね。

HTMLのbody内で使われるタグは「block」「inline-block」「inline」などの要素に分かれている

例えば、<p>タグはblock要素、<textarea>inline-block要素、<span>タグはinline要素です。

See the Pen block要素 by minamide kosei (@__kosei) on CodePen.

<p>タグはblock要素のように、HTMLタグは最初から要素が決まっています。

さらに、

「block」「inline-block」「inline」の要素はそれぞれ特徴に違いがある

そのため、<p>タグに「inline-block」の特徴はないです。

なので、

displayプロパティを使って、<p>タグの「block」要素を「inline-block」要素に変更したりする

「block」「inline-block」「inline」のそれぞれの違いは？特徴を解説

「block」「inline-block」「inline」はそれぞれ違いがあるので、特徴を解説しますね。

block要素の特徴

block要素は親要素の幅が反映される

block要素は親要素の幅がそのまま反映されます。

例えば、親要素が1000pxだった場合、子要素のblock要素も1000pxの幅になります。

block要素は縦に並び、改行される

block要素は上から順番に縦に並んでいきます。

横には並ばず、改行されるのが特徴です。

See the Pen block改行 by minamide kosei (@__kosei) on CodePen.

width、height、margin、paddingの指定ができる

block要素は、width、height、margin、paddingの指定が上下左右できます。

block要素を中央に配置したい場合は、margin: 0 auto;

block要素はtext-alginが指定できません。

つまり、block要素を中央に配置したい場合は、

text-algin:centerではなく、margin: 0 auto;を指定しなければならない

inline-blockの特徴

inline-block要素は横に並び、改行されない

先ほどのblock要素は縦並びになりましたが、inline-block要素は横並びになる違いがあります。

この横並びになる特徴を使うために、block要素をdisplay:inline-blockにする場面がよくありますね。

横幅が文章量などで気まる

inline-block要素の横幅は文章量などで決まります。

block要素は親要素の横幅が100％反映されるので、inline-blockとは違いますね。

width、height、margin、paddingの指定ができる

inline-blockは高さと幅、余白の指定ができます。

高さと幅、余白の指定ができるのは、block要素と同じですね。

inlineの特徴

inline要素は横に並び、改行されない

inlineは、block要素やinline-block要素の中で使われることが多いです。

<a>タグや<img>タグなどですね。

inline要素は横に並ぶ特徴があります。

下のようにそれぞれ<p>タグで書いたinline1とinline2があります。

<pタグはblock要素なので、縦に並びます。

<p>タグにCSSでdisplay:inlineを指定します。

widthとheightの指定ができない

inline要素はblock要素やinline-block要素と違って、widhtやheightの指定ができません。

paddingとmarginの上下の余白の指定ができない

inline要素はpaddingとmarginの上下の余白の指定はできません。

横の余白の指定はできます。

displayプロパティの具体的な使い方

ここまでで、block要素、inline-block要素、inline要素の違いがわかったと思います。

しかし、具体的にCSSのdisplayプロパティをいつ、どのように使うのか気になった人はいるかもしれません。

displayプロパティの具体的な使い方を解説します。

<a>タグに背景やwidth、heightをしたい場合

<a>タグは、inline要素なので、背景やwidth、heightを指定することはできません。

なので、

<a>タグに背景やwidth、heightをしたい場合はdisplay:inline-blockにすることで背景やwidth、heightを指定することができる

下のように「HOME」、「NEWS」、「CONTACT」の3つリンクがあったとします。

See the Pen display 具体例 by minamide kosei (@__kosei) on CodePen.

この3つのリンクで、「CONTACT」のリンクだけ背景を変えたい場合に、display:inline-blockを使います。

See the Pen display具体例1-2 by minamide kosei (@__kosei) on CodePen.

「CONTACT」の<a>タグにdisplay:inline-blcokを指定して、背景やwidth、heightを変更しました。

このように<a>タグに背景やwidth、heightをしたい場合はdisplayプロパティを使うので、試してみてください。

タイトルを縦に並べたい場合

セクションのタイトルを縦に並べるときに、display:blockを使います。

display:blockのブロックは縦に並ぶ特徴を使って、タイトルを縦に並べられます。

具体的には、下のように横に並んだ英語の「NEWS」とカタカナの「ニュース」を縦に並べたい場合です。

See the Pen Untitled by minamide kosei (@__kosei) on CodePen.

英語の「NEWS」にdisplay :blockを使うことで、縦に並びます。

See the Pen Untitled by minamide kosei (@__kosei) on CodePen.

display:blockを指定することにより、marginの指定もできるようになるので、余白が調整できます。

display:block、inline-block、inlineの違いや使い方を解説　まとめ

今回は、displayプロパティについて解説しました。

そして、block要素、inline-block要素、inline要素の違いも解説しましたね。

HTML//CSSの勉強を始めたばかりの人は、「blockってなに？」「inlineはどういう意味？」となると思います。

blockやinlineの違いなどはとても大切なので、この記事を何回も読んで、しっかり理解しましょう。

blockを理解できれば、成長スピードが格段に上がります。

この記事がHTML/CSSの勉強している人の参考になれば嬉しいです！！

こんにちは、ミナミです。

とwidthやheightについてわからない人に向けて記事を書いています。

独学でHTML/CSSを学んでいる人にとって、widthやheightはとても基本であり、重要なCSSです。

widthやheightを理解していないと、コーディングはうまくできません。

そこで、今回はwidthとheightについてわかりやすく解説します。

さらに、calcの使い方やwidthとheightが効かないときの対処法も紹介します。

marginとpaddingについて詳しく知りたい人はこちらの記事で解説しています▼

あわせて読みたい

【図解あり】marginとpaddingの違いや使い分けを初心者の人でもわかりやすく解説｜効かないときの対処法… こんにちは、ミナミです。 「marginとpaddingの違いがわからない」 「marginとpaddingどっち使い分ければいいかわからない」 「marginとpaddingの使い方はどうすればい…

widthとheightの読み方

まず、このwidthとheightの読み方はなに？と思うかもしれませんね。

width　「ウィズ」または「ウィドス」または「ワイズ」

height　「ハイト」

widthは人によって読み方が分かれますね。

自分の好きな読み方でいいと思います。

ちなみに「ウィズ」と読んでいます。

widthとheightの使い方

widthは幅、heightは高さの大きさを指定するプロパティ

例えば下の「BOX1」の高さを500px、幅を1000pxにしたい場合だと

html
<div class=”box1″>
<p>BOX1</p>
</div>

CSS
.box1{
　　height:500px;
　　width: 1000px;
　　margin: 0 auto
　　text-align: center
　　line-height: 500px;
　　background-color: #dcffd6;
font-size:50px
}

となります。

widhtとheightはCSSの中で一番使うCSSといってもいいくらいよく使います。

使い方は簡単なので、ガンガン使っていきましょう。

widthとheightの単位は？

widthとheightで指定できる大きさの単位はいくつかあります。

px

pxはWeb上でよく使われる絶対単位です。

他の要素から影響を受けないので、heightを100pxと指定したら必ず100pxで表示されます。

例えば、親要素の幅が1000pxの場合でも、子要素にwidth:1200pxを指定すると親要素より子要素の方が大きくなる

pxで指定すると、画面のサイズが変わっても、pxは変わらないので、画面のサイズごとにpxを変更する必要があるので注意が必要です。

％

widthやheightで％の単位を使うと親要素を基準としたときの割合になります。

例えば、親要素が幅が1000pxの場合だと、子要素にwidth:50%を指定します。

すると、親要素の幅1000pxの50％なので、子要素の幅が500pxになる

em

emは親要素のサイズを基準とした単位です。

親要素のフォントサイズを基準としたサイズになるので、親要素のフォントサイズが50pxだった場合だと、

50px ＝ １em になります。

例えば、親要素BOX1のフォントサイズが50pxとすると、子要素の高さを height:4em 指定してみた場合だと、

子要素の高さが 50px✖️4 = 200pxとなります。

つまり、子要素BOX2の高さは200pxです。

emは少しわかりにくいですが、親要素のフォントサイズが基準となることを覚えましょう。

rem

remはルート要素（htm要素）のフォントサイズに対応した単位です。

多くのブラウザの設定は、標準のフォントサイズが16pxなので、16px = 1rem となります。

高さをheight: 5rem とすると、16✖️5 = 80px　高さが80pxになります。

vw

vwは「viewport width」の略です。

ビューポートの幅を基準とした割合の単位となります。

ビューポートとはブラウザでWebサイトを閲覧しているときの表示領域

ビューポートの幅が1400pxの場合、50vwは1400pxの半分の700pxとなる

vwはブラウザの幅によって幅が変わるので、さまざまなデバイスに対応させるときに便利ですね。

vh

vhは「viewport height」の略です。

ビューポートの高さを基準とした割合の単位です。

ビューポートとはブラウザでWebサイトを閲覧しているときの表示領域

ビューポートの高さが600pxの場合、50vhは600pxの半分の300pxとなる

widthとheightの便利なcalcの使い方

widthやheightで幅や高さを指定するときに便利なのが calc()関数 です。

calc()関数は、CSSのプロパティ値の計算して指定することができる

widthやheightの値を計算で出すことができるので便利で、よく使います

使い方は calc()のカッコの間に計算式を書きます。

widthを使ってのcalcの使い方

例えば、下のBOX1,2,3の幅を均等に横幅いっぱいにしたいときです。

box-list li {
　　width:calc( 100% / 3);
}

で、BOX1,2,3の幅を親要素のBOX-LISTから３等分にします。

すると、きれいにBOX1,2,3が均等の幅になりましたね。

heightを使ってのcalcの使い方

heightでよくあるのが、画像をブラウザの高さいっぱいの100vhから100pxだけ低くしたい場合です。

下の画像は高さがheight:100vh;のときです。

ここから、

height:calc(100vh – 100px);

すると、画像が100vhから100px引かれた状態の高さになります。

このようにcalc()関数はwidthやheightよく使います。

値が出ない数値のときにcalc()関数は活躍します。

他のCSSでもよく使うので使い方に慣れておきましょう。

widthとheightの効かないときの対処法

「widthやheightが効かない！」ときはよくあります。

そんなときに試して欲しい対処法を紹介します。

スペル間違いはないか

widthやheightが効かないときはスペル間違いがないか確認してください。

僕もよくあるんですが、widthやheightのスペル間違いはよくあります。

width → widht

height → heigth

になっているなどのスペル間違いがあるので、widthやheightが効かないときは、スペルを確認しましょう。

display:inlineになっていないか

displayにinlineが指定されていると、widthやheightは指定できないので注意しましょう。

display:inlineを指定すると、インラインボックスになり、要素を行ボックスにして1行ずつ折り返して表示するので、widthやheightは指定できません。

親要素にwidthやheightが指定されていないか

親要素にwidthやheightが指定されていると、子要素にwidthやheightを指定しても効かない場合がある

例えば、BOX1の中にあるimageをwidth:100%;に指定して、ブラウザのサイズが変わっても、横幅に合わせてimageのサイズも変わるようにした場合です。

実際にブラウザの幅を変更しても、imageの幅は変更されません。

width:100%が効いていません。

imageのwidth:100%;が効かない理由は、imageの親要素にwidthが指定されているから

imageの親要素、つまり、BOX1要素にwidth:1000px;が指定されているので、BOX1の子要素であるimageはwidth:100%が効かなかったのです。

解決法は、親要素のwidthを1000pxから、％などに変更すればOKです。

このように、親要素にwidthやheightが指定されていると、子要素のwidthやheightが効かなくなるので注意しましょう。

widthとheightを解説　まとめ

今回は、widthとheightについて解説しました。

widthとheightはCSSの中で、とても重要なCSSです。

そのため、widthとheightの使い方はぜひ理解しておくようにしてください。

単位も、種類があるので、「この単位はどういう意味？」とならないように、この記事を何度も見返してください。

こんにちは、ミナミです。

と悩んでいる人はいませんか？

HTML/CSSを独学で勉強していると、初心者のころはmarginとpaddingは似ていて、違いがわからないですよね。

僕も、最初は、marginとpaddingの違いに苦しめられました。

ということで、今回はmarginとpaddingの違いや使い方、効かないときの対処法をわかりやすく解説します。

この記事を見れば、marginとpaddingの違いに悩まされることはなくなりますよ。

HTML/CSSを独学で勉強している人は、目指すべきはコーディングしたサイトの公開です。

HTML/CSSを独学で勉強して、コーディングしたサイトを公開までのステップを解説した記事があります。

今、HTML/CSSを独学で勉強している人が参考になる記事です。

あわせて読みたい

【HTML /CSS知識０から3ヶ月で可能】独学でWebサイトを作り、ネットに公開できるまでの最短7ステップ（…

marginとpaddingの違い

HTML/CSSを勉強している初心者のことは、marginとpaddingの違いがわからないですよね。

marginとpaddingの違いは、

margin：要素の外側の余白を指定するプロパティ

padding：要素の内側の余白を指定するプロパティ

です。

marginとpaddingの違いは、外側の余白か内側の余白かの違いです。

と言われてもわかりにくいですよね。

なので、図でわかりやすく解説します。

下の図のように「BOX１」というBOXを用意しました。

「BOX1」のpaddingの内側の余白は下の緑の部分になります。

BOX1の内側の余白を変えたいと思ったら、paddingを指定すると変更できる

例えば、BOX1の内側の余白を50pxにしたい場合、CSSは

.box1 {
　padding: 50px;
}

次に「BOX１」のmarginの外側の余白の部分は下の黄色の部分になります。

BOX1の外側の余白を変えたい場合は、marginを指定すると変更できる

例えば、BOX1の外側の余白を100pxにしたい場合だと、

box1{
　margin:100px;
}

marginとpaddingの使い分けは？

コーディングをしているときに、「marginとpaddingどっち使えばいいだろう」と使い分けに悩むときがあるかもしれません。

marginとpaddingの使い分けは、

です。

marginの使い分け

marginと使うときは、隣り合うHTMLの兄弟要素同士で余白を変更したいときです。

わかりやすく図で説明しますね。

上の図では、item1、2、3、4、5、6は隣り合うHTML兄弟要素になります。

隣り合う兄弟要素の間の余白を変更したいときはmarginを使う

HTMLで見ると

となります。

HTMLの兄弟要素同士の余白ではmarginを使うので、覚えておきましょう。

paddingの使い分け

paddingは親要素と子要素間で余白を開けたいときに使います。

具体的にわかりやすく図で解説しますね。

itemsというコンテンツがあります。

itemsのコンテンツが親要素であり、子要素に「items」のタイトルやitem1、item2があります。

itemsのコンテンツの親要素と子要素のタイトルとitem1、item2の間に余白を変更したいときに、paddingを使う

そして、item1の中で、余白を変更したいときも同じです。

item1が親要素であり、その中のタイトルやテキストが子要素なので、paddingで余白を変更する

このように、marginとpaddingの使い分けは、HTMLの要素が兄弟なのか、親子なのかを確認してmarginとpaddingを使い分けましょう。

marignやpaddingを使い分けるコツ

marignやpaddingを使い分けるコツは

要素にbackgruond-colorでわかりやすく色をつける

初心者のうちは、marginとpaddingの使い分けは難しいと思います。

しかし、要素の背景に色をつけることで、どこがpaddingでどこからがmarginなのかはっきりするようになり、わかりやすいです。

初心者のうちは、marginとpaddingがわかりやすいように、上のように背景に色をつけるのがおすすめです。

色が違うので、余白がどうなったのかすぐにわかります。

marginとpaddingの区別がついたらCSSを消せばいいので、とても簡単です。

marginとpaddingの使い分けに困ったら、要素にbackgruond-colorでわかりやすく色をつけるコツしてみてください。

marginやpaddingの書き方

marginやpaddingでは、余白を変更する部分を指定することができます。

このように「margin(padding)-指定場所」で変更する余白部分を指定できます。

他にも、topやrightなどと書かずに、余白を変更する場所を指定する方法があります。

margin(padding):（上）（右）（下）（左）;

例えば、内側の右と下の余白を50pxに変更した場合

padding:0 50px 50px 0;

となります。

指定しない部分は0にして、指定する場所に数字を入力します。

上の場合は４箇所の数字を入力する必要がありますが、上下と左右が同じ余白なら、２箇所だけでいい場合もあります。

margin:0 autoの場合

marginが効かないときの対処法（相殺されるので注意）

模写コーディングをしていて、「marginがうまく効かない！どうしよう」となった人はいるかもしれません。

marginは重なり合うと相殺されて、大きい方のmarginしか適用されないので注意

下に青いBOXと赤いBOXがあります。

赤いBOXの下にmarginで100px余白をあけてみます

余白が100pxになりましたね。

それでは今度はそのまま、青色のBOXの上に50px余白をあけてみます。

上から100pxと下から50pxなので、余白は合わせて150pxになるかと思えば…。

余白のサイズは100pxのままで変わりません。

これがmarginが重なり合うと相殺されることです。

同じ余白の部分に、上と下からmarginを指定すると、大き方のmarginが適用される

注意しましょう。

ちなみに、

padding同士や、paddingとmarginでは、同じ部分の余白を指定しても相殺されない

です。

参考にしてください。

marginとpaddingの違いや使い分け まとめ

今回はコーディングを始めたときに苦戦する、marginとpaddingの違いや使い分けをわかりやすく解説しました。

marginとpaddingの違いは

margin：要素の外側の余白を指定するプロパティ

padding：要素の内側の余白を指定するプロパティ

でした。

でも、実際にmarginとpaddingを使っていると、どう使い分ければいいかわからないですよね。

そんなときは

と意識してコーディングをしてみてください。

コーディングができるようになると次のステップはコーディングしたサイトの公開です。

サイトの公開方法を知っているのと知らないのでは仕事でできる幅が全く違います。

こちらの記事でサイトの公開方法を解説しているのでみてください▼

あわせて読みたい

【誰でも簡単にできる】コーディングしたWebサイトの公開方法 5ステップ｜ドメイン？サーバー？の疑問も…

こんにちは、ミナミです。

と悩んでいる人はいませんか？

サイトを模写コーディングをするときに、時間がかかりすぎてしまう人は多いと思います。

もっと効率的に模写コーディングがしたい人は、chromeの拡張機能を使えば、解決できる

ということで、今回は、模写コーディングに必須な拡張機能ツール5つ紹介します。

どのツールも模写コーディングに必須です。

初めて今回紹介するツールを使う人は、便利すぎて驚くはずです。

模写コーディングなどのHTML/CSSを独学で学んでいる人のために自分のサイトを作って、ネットに公開するまでのステップをわかりやすく解説した記事があります。

気になる人はチェックしてください▼

あわせて読みたい

【HTML /CSS知識０から3ヶ月で可能】独学でWebサイトを作り、ネットに公開できるまでの最短7ステップ（…

模写コーディングに必須な拡張機能ツール5選

サイトの幅や余白の数値が確認できる　『Designer Tools』

「サイトの幅の広さや、余白のサイズを簡単に調べたい」と思っている人は、『Designer Tools』を使ってみてください。

chromeの拡張機能ツールでである『Designer Tools』はサイトの幅や余白などの数値を簡単に表示することができる

実際に『Designer Tools』を使うとサイトに余白の数値が表示されます▼

余白や高さの数値が『Designer Tools』を使うと一瞬でわかるので、模写コーディングにとても便利です。

と悩む必要がありません。

僕も、模写コーディングしていたときは、拡張機能ツールの中で『Designer Tools』を一番よく使っていました。

「『Designer Tools』がないと、コーディングできないな」と感じるくらいでしたね。

『Designer Tools』の具体的な使い方

①『Designer Tools』をchromeウェブストアから自分のchromeへ追加する

②自分の幅などの数値が知りたいサイトを表示する

③自分のchromeブラウザの右上にあるパズルピースのアイコンを選択する

④『Designer Tools』と書かれているところを選択します

⑤サイトの上と左に目盛りが表示され、『Designer Tools』が使えるようになる

⑥自分のサイズが知りたい場所をクリックすれば、数値がわかる

このように『Designer Tools』はとても簡単に使えます。

模写コーディングには『Designer Tools』は必須のツールなので、使ってみてください。

サイトにある色を調べられる　『ColorZilla』

「このサイトにあるカラーコードを知りたい！」という人に使って欲しいのが、『ColorZilla』という拡張機能です。

拡張機能『ColorZilla』はサイトにある色をクリックするとカラーコードをコピーすることができる

正確なカラーコードを調べる時は、ソースコードを見るしか確認できなかったです。

『ColorZilla』を使うと、簡単にカラーコードを調べることができるので、模写コーディングするときに効率的になるツールです。

カラーコードを調べるときに、ソースコードを確認するのは時間がかかってしまいますよね。

この『ColorZilla』は一瞬でカラーコードを調べられるので、効率的に模写コーディングできます。

『ColorZilla』具体的な使い方

①『ColorZilla』をchromeウェブストアから自分のchromeへ追加する

②カラーコードが知りたいサイトを表示する

③自分のchromeブラウザの右上にあるパズルピースのアイコンを選択する

④『ColorZilla』と表示されているところを選択

⑤「Pick Color From Page」を選択する

⑥カラーコードを知りたい場所にカーソルを持っていくと、カラーコードが表示される

⑦カラーコードをコピーして、エディタに貼り付ける

サイトにある文字のフォントがわかる　『What Font』

「この文字のフォントを簡単に調べられないかな」と感じている人には、拡張機能の『What Font』がおすすめ。

拡張機能『What Font』はサイトに表示されているフォントを一瞬で調べられる

『What Font』を使えば、サイトの文字のフォントがすぐにわかるので、模写コーディングがスムーズにできます。

サイトで使われているフォントは、サイトによって違うので、その時々でフォントを調べる必要があります。

しかし、フォントを調べる作業はめんどくさいですよね。

拡張機能『What Font』は簡単にフォントを調べられるので、使ってみてください。

『What Font』具体的な使い方

①『What Font』をchromeウェブストアから自分のchromeへ追加する

②フォントを知りたいサイトを表示する

③自分のchromeブラウザの右上にあるパズルピースのアイコンを選択する

④『What Font』と表示されているところを選択

⑤カーソルをフォントを知りたい部分に持っていくと、フォントが表示される

⑦文字をクリックすると、さらに詳しいフォント情報が表示される

フォントだけでなく、文字の色やスタイルも調べられる

サイトの画像を一気にダウンロードできる『Imaga Donloader』

模写コーディングを始めるときに、サイトの画像をそのまま利用したいときに、使える拡張機能が『Imaga Donloader』です。

『Imaga Donloader』は利用したいサイトの画像を一括でダウンロードすることができる

模写コーディングするときは、サイトの画像も同じ画像を使う方が効率的です。

しかし、一つ一つサイトの画像をダウンロードするのは、大変ですよね。

そんなときは、効率的に画像をダウンロードできるツールの『Imaga Donloader』を使えば、簡単にできます。

模写コーディングは始めるまでに、画像のダウンロードするなどの準備に時間がかかります。

『Imaga Donloader』は画像を一括でダウンロードできるので、効率的に模写コーディングをを始めらます。

『Imaga Donloader』具体的な使い方

①『Imaga Donloader』をchromeウェブストアから自分のchromeへ追加する

②画像をダウンロードしたいサイトを表示する

③自分のchromeブラウザの右上にあるパズルピースのアイコンを選択する

④『Imaga Donloader』と表示されているところを選択

⑤ダウンロードしたい画像をチェックを入れて、ダウンロードする

画像をすべてダウンロードしたい場合は、「slect all」にチェックをいれる

サイトの背景画像が表示される　『背景画像を表示』

先ほどの『Imaga Donloader』では、背景に指定された画像はダウンロードできません。

しかし、

拡張機能『背景画像を表示』を使えば、サイトの背景画像でも簡単にダウンロードできる

模写コーディングするときに、サイトの背景画像を表示させる方法は、

1. 右クリック
2. 検証
3. CSSの中から、画像ファイルを探す
4. 表示させて、保存する

でした。

しかし、この方法はかなり時間がかかってしまい、効率がとても悪いです。

効率的に背景画像をダウンロードできるのが、『背景画像を表示』です。

『背景画像を表示』は簡単に素早く、背景画像をダウンロードできるので、模写コーディングに必須ですね。

僕も背景画像があるサイトを模写コーディングする時は、絶対に使っていました。

『背景画像を表示』の具体的な使い方

①『背景画像を表示』をchromeウェブストアから自分のchromeへ追加する

②背景画像をダウンロードしたいサイトを表示させる

③サイトにあるダウンロードしたい背景の上で、右クリックする

④「背景画像を表示」を選択する

⑤背景画像だけが表示された新しいタブが開くので、「右クリック→名前をつけて画像を保存」で背景画像をダウンロードできる

背景画像をファイルにドラッグ＆ドロップでもOK

模写コーディングをするときの大事なコツ

模写コーディングをしているとできなかったり、難しかったりして、模写コーディングをするモチベーションが下がってしまうときがあると思います。

そんな時のために、模写コーディングをするときのコツを紹介します。

この4つのコツが模写コーディングをするときは、とても大事です。

模写コーディングのコツを知りたい人はこちらの記事で詳しく紹介しています。

あわせて読みたい

【できないのは当たり前】模写コーディングができない・難しいと感じる理由5選【模写コーディングのコツ…

模写コーディングに必須な拡張機能ツール5つを紹介　まとめ

いかがだったでしょうか？

今回は模写コーディングに必須な拡張機能ツールを5つ紹介しました。

この5つの拡張機能ツールがあれば、模写コーディングは格段に効率的になります。

全部無料で使えるので、模写コーディングしている人は、使ってみてください。

便利すぎて驚くはずです。

模写コーディングは慣れるうちは大変ですが、この拡張機能ツールを使って学習していきましょう。

こんにちは、ミナミです。

XDからコーディングを始めると、

• line-height
• letter-spacing

の数値をどうやって出せばいいかわからなくて、悩みますよね。

僕も、XDからコーディングしているときは、分かりませんでした。

そこで今回は、line-heightとletter-spacingの計算方法を初心者の人でも、わかりやすく解説します。

この記事を見れば、XDからのコーディングもスムーズにすることができます。

デザインカンプからのコーディングのやり方はこちらの記事で、解説しています▼

模写コーディングの次はすぐにデザインカンプからコーディングするべき｜コーディングのやり方も解説

デザインカンプからのコーディングができるようになると、自分でサイトを作れるようになります。

自分で作ったサイトをネットに公開することで、ポートフォリオになるので、作ったサイトはネットに公開しましょう。

公開方法が知りたい人はこちらの記事でだれでもわかりやすく解説しています▼

あわせて読みたい

【誰でも簡単にできる】コーディングしたWebサイトの公開方法 5ステップ｜ドメイン？サーバー？の疑問も…

line-height 計算方法

行間隔の数値 / 文字サイズ

行間隔の数値に文字サイズを割れば、line-heightの数値が出ます。

といっても、文字だと分かりにくいので、わかりやすくAdobe XDを使います。

①XDでline-heightの数値を調べたい文字を選択

②右側テキストプロパティの部分に表示されている、

• 文字サイズ
• 行間隔の数値を確認する

を確認する

• 文字サイズ：25
• 行間隔：50

なので、

行間隔の数値 50 / 文字サイズ 25 = line-height 2

ということになります。

なので、line-height：2になります。

とても簡単ですよね。

line-height 計算の例題1

行間隔の数値 45 / 文字サイズ 25 = line-height：1.8

上の数値だと、line-height：1.8ということになりますね。

line-height 計算の例題2

行間隔の数値 44 / 文字サイズ 23 = line-height：1.91304347…….

上のXDの数値だと、44に23を割っても、割りきれないです。

line-heightの数値が割りきれなかったら、calcを使う

今回の場合のように、line-heightの数値が割りきれなかった場合も、calcを使います。

line-height:calc(44/23);

とCSSに記述すればOKです。

letter-spacing 計算方法

XDのAV数値 / 1000 = 答えにemをつける

これだとわかりにくいので、XDでわかりやすく解説します。

①letter-spacingの数値を知りたいテキストを選択する

②テキストプロパティのAV数値を確認する

この場合は、AV数値：50なので、

XDのAV数値 50 / 1000 = 0.05em

となります。

CSSに記述すると

letter-spacing:0.05em

です。

letter-spacing 計算 例題１

上のXDのAV数値だと、

XDのAV数値 10 / 1000 = 0.01em

になりますね。

CSSに記述すると

letter-spacing:0.01em

になりますね。

line-heightとletter-spacingの計算方法　まとめ

今回は、line-heightとletter-spacingの計算方法について解説しました。

Adobe XDからコーディングをしていると、この2つの数値の出し方はわからなくなるんですよね。

なので、line-heightとletter-spacingの数値の計算方法がわからなくなったら、またこの記事をみてください。

もう一度、おさらいします。

line-heightの計算方法は

行間隔の数値 / 文字サイズ

letter-spacingの計算方法は

XDのAV数値 / 1000 = 答えにemをつける

となっています。

これでコーディングもはかどると思います。

こんにちは、ミナミです。

と悩んでいませんか？

プログラミング学習が楽しくできるProgate（プロゲート）は無料でできるところと有料でできるところが分かれています。

そのため、Progate（プロゲート）は無料だけでいいのか、それとも有料版になった方がいいのか悩む人もいると思います。

そこで今回は、Progate（プロゲート）は無料だけでいいのかを解説していきます。

さらに、Progate（プロゲート）の無料と有料の違いや、有料会員になったほうがいい人も紹介します。

ちなみにプロゲート以外にも無料でプログラミングが学習できるスクールがあります。

プログラミングを無料で体験したい人は有名プログラミングスクールの『テックアカデミー』もぜひ利用してください。

プロゲートとは違いプロのエンジニアに相談できるので、安心して学習できます！

無料でプログラミングを体験したい人は『テックアカデミー』をチェックしてください▼

＼不安を解消できる無料相談もあるよ ／

テックアカデミーで無料プログラミング体験をする

Progate（プロゲート）最初は無料だけでOK

「Progate（プロゲート）は無料だけでいい？」の悩みについて先に結論をお話しします。

最初は無料だけでProgate（プロゲート）で学習して、もっと学習したいと思ったら、有料会員になる

つまり、無料でProgate（プロゲート）をできるところまですることです。

Progate（プロゲート）の無料でできるところは、Webサイトを作る基礎の言語であるHTML/CSSコースだと初級編までです。

初級編だけでも、目安で3時間以上学習時間がかかります。

Progate（プロゲート）では、かなりの量が無料ですることができます。

なので、とりあえず無料できるところをやってみるのが、おすすめです。

無料でProgate（プロゲート）をやってみて、

• プログラミング楽しい・おもしろい
• もっとしっかりプログラミングを学びたい
• プログラミング自分に向いているかも

と感じたらProgate（プロゲート）の有料会員になれば大丈夫です。

反対に

自分に向いていないかもと思ったら、Progate（プロゲート）をやめれば、お金はかかりません。

僕の場合は最初は無料で、Progate（プロゲート）のHTML/CSSのコースを学習しました。

HTML/CSSの初級編だけで、おもしろいと思って、すぐに有料会員になった記憶がありますね。

Progate（プロゲート）は意味ないと言われていますが、そのことについてこちらの記事で解説しています▼

あわせて読みたい

【実体験】progate（プロゲート）は意味ない？【結論:プログラミング初心者には意味はある】

Progate（プロゲート）無料と有料の違い

Progate（プロゲート）の有料会員の料金は、月額で1,078円（税込）です。

• 無料：プログラミングを体験する
• 有料：プログラミング言語の基礎を学べる

Progate（プロゲート）は無料だけだと、プログラミングを体験することしかできません。

自分で簡単なコードを書いて、終わりです。

例えば、HTML/CSSコースだと、無料でできるのは初級編だけで、HTML/CSSを体験するだけになります▼

有料になると、月々1,000円払うことにより、すべてのコースが学習できるようになります。

そして、プログラミング言語の基礎を学ぶことができます。

月々約1,000円払うことにより、

などの言語の基礎を学べます。

これらの言語を書籍で学ぶのは、とても時間とお金がかかります。

そのことを考えると、Progateで有料会員になることは、オススメですね。

Progate（プロゲート）の無料だけではプログラミングは理解できない

「Progate（プロゲート）の無料の範囲だけで、プログラミングを学べないの？」と思うかもしれません。

先ほどもお話ししましたが、Progate（プロゲート）の無料だけの部分だと、プログラミングを体験することしかできません。

無料だけだと、プログラミング言語の基礎を学ぶことができないので、プログラミングを理解できない

もし、プログラングをしっかりと学びたかったら、有料会員になる必要があります。

月々1,000なので、Netflixなどのサブスクに入るようなものです。

期間を１か月だけと決めて学習すれば、1,000円だけでプログラミング学習ができるので、安く済ませる

僕もProgate（プロゲート）で有料会員になるのは1か月だけと決めてHTML/CSSを学習しました。

期限を決める方が、「勉強しなければいけない」と自分を追い込めるので、より学習に集中できました。

Progate（プロゲート）の有料会員になったほうがいい人

つまり、Progate（プロゲート）で有料会員になったほうがいい人は、プログラミングの学習意欲が高い人です。

プログラミングを学ぶたいと強く考えている人は、ぜひProgate（プロゲート）の有料会員になってください。

おそらく、月々の1,000円以上の意味があるはずです。

反対に、

プログラミングを学ぶ気持ちが薄い人は、無料の部分だけやってみて、有料会員になるか考えた方がいいかも

Progate（プロゲート）で有料会員になって学習するときの注意点

Progate（プロゲート）で、プログラミングができるようにならない

Progate（プロゲート）は、あくまでも、プログラミングがどのような言語で、どんなふうに使うのかを知ることができるサービス

なので、実際にプログラミングを1から書けるようになることを目的としていないです。

Progate（プロゲート）の有料会員になっても、プログラミングはできるようになりません。

コードを1から書けるようになるには、自分でエディタを用意して、コードを書く練習をする必要があります。

HTML/CSSの学習の場合だったら、まずはサイトの模写コーディングから始めます。

模写コーディングを繰り返し練習することで、コードを書くことに慣れて、1からコードを書けるようになる

Progate（プロゲート）で学習する場合は、プログラミング学習後に自分で1からコードを書く練習が必要なことを注意しましょう。

模写コーディングのはじめ方や手順はこちらの記事で解説しています▼

あわせて読みたい

【超初心者必見】模写コーディングを始めるまでの具体的な手順と模写コーディングのやり方をわかりやす…

同じコースを何周もしない

Progate（プロゲート）で学習していると、1周してもわからないことが多いと思います。

しかし、わからないからと言って、Progate（プロゲート）のコースを何周もするのは意味ありません。

コードを書くことは、覚えることでなく、慣れることが大事

そのため、Progate（プロゲート）を何周もして、理解して覚えようとするのは間違いです。

Progate（プロゲート）を1周したら、より実践的に自分のエディタでコードを書いてく方が、何倍も意味ある

Progate（プロゲート）だけを何周もすることを例えるなら、料理本を何回も読んで、料理を作らないことです。

これは全く意味ありませんよね。

料理本を読んだら、実際に自分で料理を作ることのほうがはるかに意味があります。

Progate（プロゲート）も一緒です。

Progate（プロゲート）でプログラミング学習が１周したら、自分で調べながら、簡単なサイトやサービスを作ることをしましょう。

有料会員の期限を決める

Progate（プロゲート）の有料会員になると月々約1,000円かかります。

Progateに時間をかけてプログラミング学習をしていると、1,000円が2,000円となり、5,000円となり、10,000円となっていきます。

このように、無駄にお金を払ってしまうことがよくあります。

お金がもったいないので、有料会員の期限を決めて、Progate（プロゲート）で学習しましょう

「1か月だけでProgate（プロゲート）を終わらせる」と期限を決めれば、学習の意欲も出て、お金も節約できるので、おすすめです。

1か月だけだと、1,000円でプログラミングの学習ができるので、コスパはとてもいいです。

僕も、HTML/CSSのコースを1か月で終わらせると決めて、Progate（プロゲート）の有料会員になりました。

そして、その後も、Progate（プロゲート）で他の言語を学ぶときは、1か月だけと決めて、学習しました。

自分が学習するときだけ、有料会員になるほうが無駄のお金を払わずに済むのでおすすめです。

Progate（プロゲート）は無料だけでいい？　まとめ

今回は、Progate（プロゲート）は無料だけでいいのかをお話ししました。

まとめるとProgate（プロゲート）は最初は無料だけOKです。

無料でProgate（プロゲート）を試してみて、続けられそうだったら有料会員になりましょう。

無料と有料の違いはこちら。

• 無料：プログラミングを体験する
• 有料：プログラミング言語の基礎を学べる

プログラミングを学びたいという学習意欲が高い人は有料会員になるべきですね。

Progate（プロゲート）の有料会員になるときに注意することはこちらです。

Progate（プロゲート）はプログラミング初心者には、とても良いサービスです。

ですが、Progate（プロゲート）だけではプログラミングを書けるようにはならないので、注意しましょう。

プログラミング学習の第一歩はProgate（プロゲート）です。

Progate（プロゲート）を初めて、プログラミング学習をスタートさせましょう。

こんにちは、ミナミです。

と悩んでいる人はいませんか？

模写コーディングが練習できるサイトで有名なのが「Codejump」です。

そんなCodejumpがいいサイトなのか評判が気になる人は多いと思います。

そこで、今回の記事は、Codejumpの評判について解説していきます。

他にも、Codejumpの特徴やおすすめな人、使い方についてもご紹介します。

僕自身がコーディング練習のためにを使っていたので、その経験もお話ししていきます。

『Codestep』のサイト名は『Codejump』に変更されました。

『Codejump【旧 Codestep】』とは

Codejumpはコーディングの練習が無料でできるサイト

progate（プロゲート）や本などで、HTML/CSSの基礎を学んだ後の次のステップは、実際に自分でWebサイトのコーディングをしていくステップです。

• Webサイトの模写コーディング
• AdobeXDのデザインカンプからのコーディング

がCodejumpでは練習できます。

このように無料でコーディングの練習がしたい人のためのサイトがCodejumpです。

コーディングとは

コーディングとは、Webサイトなどのデザインをもとに、下の画像のように、HTML/CSSなどの言語をエディタに書いていくこと▼

Codejumpはレベル別にコーディングするサイトが18サイトも用意されています。

• 入門編（6サイト）
• 初級編（5サイト）
• 中級編（5サイト）
• 上級編（2サイト）

自分のレベルに合ったサイトを選んで、コーディング練習がすることができます。

さらに、有料で実案件を仮想したコーディング学習ができるサービスも2022年に始まりました。

Codejumpの評判はとてもよかった

そして、気になるCodejumpの評判は一言でいうと、

Webサイト制作を学習する人のことを、よく考えられた素晴らしいサービス

Codejumpは素晴らしいサービスです。

その証拠にCodestepを、コーディング学習におすすめする声はたくさんあります。

progateでhtml.cssの基本を学んだら、
codestepで模写コーデイングをするのが、
おすすめです。

実践的な方法なので、
これができるようになれば、
かなりの実力がつきますよ。#プログラミング勉強中#プログラミング初心者

— ユキハル@プログラミングする人を全力応援💪 (@yukiharu2021) December 16, 2022

おはようございます☀️
コーディング学習でめちゃお世話になっていたCodestepというサイトで、今はこんなサービスを提供されているようです😳これはすごい…!無料のコンテンツもかなり充実していて、サイト模写するならホントおすすめです！#Codestep #デイトラ #WSSクラス #Web制作 https://t.co/rR10G2Qm5M

— あつし＠Web制作フリーランス (@aworks_okubo) November 2, 2022

こんにちは✨コーディングでしたらprogateとかcodestepがおすすめです😊デザインスクール高いですよね…😂

— ゆる🍏紙モノ&Webデザイナー (@WebYuru) September 5, 2022

この声を見ると、Codejumpの評判はとてもいいですね。

さらに実際にCodejumpでコーディングの練習している人の声もたくさんあります。

デザインカンプからのコーディング修行中🥷

☑︎ Codestep 7/10 終了🔥

やっぱりコードに無駄が多いな…😑
あと3つ！！
チラ見したけど、むずそうすぎ。 pic.twitter.com/q1edklIwpo

— おまつ@WEB制作学習中 (@matsu_matsu_24) December 31, 2022

模写コーディングは時間がかかりますが、わからない箇所が浮き彫りになります。わからない所が分かるという、素晴らしい循環です。人それぞれやり方はあると思いますが、私にはこのやり方がgoodです👍#webデザイン初心者 #webデザイン勉強中 #codestephttps://t.co/4lHRxoGSnJ

— りんのすけ (@rinnosuke2022) December 27, 2022

これ以外にも、Codejumpで学習している人は数えきれないほどいました。

学習している人で発信している人がこれだけいるので、実際にCodejumpで学習している人はもっとたくさんいると考えられます。

それだけ、多くの人のWeb制作の学習に使われているCodejumpの評判はとてもいいと言えると思います。

ちなみに悪い評判も探してみました。

しかしながら、

Codejumpの悪い評判は一つも見当たらなかった

ということは、CodestepはWeb制作を学習している人のために作られたとても評判の良いサービスです。

Codejumpの５つの特徴

「実際にCodejumpのどんなところがいいの？」と気になると思います。

そこで、具体的な特徴について解説します。

コーディング練習できるサイトの数が多い

Codejumpでは、全部で18サイトの模写コーディング、デザインカンプからのコーディングができます。

最初にも話しましたが、Codejumpの練習できるサイトの数の多さは他にはありません。

他のコーディングが練習できるサイトでも、多くて5つくらいです。

さらに、18サイトをレベル別に分けられています。

• 入門編（6サイト）
• 初級編（5サイト）
• 中級編（5サイト）
• 上級編（2サイト）

入門編からコーディング練習をしていき、上級編までいくと、基本的なWeb制作の技術が身につくようになる

無料でコーディング練習ができる

Codejumpはコーディング練習が基本的に無料です。

18サイトを無料でコーディング練習できます。

この無料でできるのも、大きな特徴の1つですね。

• 模写コーディング
• デザインカンプからのコーディング

この２種類のコーディング練習が無料できるのは、他では少ないです。

よくあるのが、

初級編のWebサイトのデザインカンプが無料でコーディング練習できるが、中級編、上級編のデザインカンプが有料になっているパターン

簡単なコーディングは無料で、難しいコーディングのデザインは有料になっているものが多いです。

僕がCodejumpで学習しているときは、「コーディング練習のために、サイトのデザインにお金を払うのがもったいないな」と感じていました。

これは無料だからこそ感じていたことです。

このように、Codejumpは基本的には入門編〜上級編まで、無料でコーディング学習することができる素晴らしいサイトです。

コーディング初心者でも、わかりやすいようなレイアウト解説やソースコード（答えのコード）などのサポートがある

CodejumpはWeb制作、コーディング学習している人にとても優しいサポートがあります。

コーディング初心者でもわかるようなレイアウト解説

Codejumpには、コードが書きやすいように、コーディングするサイトのレイアウトが解説されています。

コーディング練習を始めたばかりの人は、いきなりコーディングしていくのは難しいです。

コーディングを始める前に大事なのが、コーディングするサイトのレイアウトをイメージすることです。

Codejumpでは、下のように、コーディングするサイトのレイアウトが解説されています▼

レイアウト解説があることにより、

とコーディングのイメージがしやすいです。

このようなレイアウト解説があるのは、Codejumpだけの特徴です。

見やすいソースコード（答えのコード）

Codejumpでは、下のようにコーディングするサイトのソースコード（答えのコード）を見ることができます。

このソースコードを簡単に見ることができるのも、特徴です。

わざわざ、ソースコードをエディタを使って見なくていいので、とても簡単に答えを見れます。

他の、コーディング練習できるサイトは、ソースコードをエディタを使って、見る必要があります。

これは僕の経験から言うと、かなりめんどくさいです。

ソースコードをサイト内で見ることができるのは、コーディング初心者の人にとってかなり助かります。

HTML/CSS、jQueryだけでなく、Wordpressのサイト作成の解説もある

Codejumpでは、Wordpressを使ったサイト制作の学習もすることができます。

Webサイト制作で最初に学習する必要があるのが、

• HTML
• CSS
• jQuery（JavaScript）

です。

Webサイトをコーディングしていくには、Codejumpで上の言語を使って練習していきます。

HTML/CSS、jQuery（JavaScript）でサイトを作れるようになってきたら、次はWordpressを使ってサイト制作をしていきます。

WordPress（ワードプレス）はPHPというプログラミング言語で作られているCMS（コンテンツマネジメントシステム）の一種で、ブログやWebサイトを作る事ができます。 

世界中で利用されているWordPressですが、日本でも人気が高く、利用されたCMSのうちWordPressが8割を占めるほどです。個人ではアフィリエイト等のブログに、企業ではWebサイトや記事メディアと広く使われています。 

引用：さくらのホームページ教室

WordPressを使ってWebサイトを作ることはWeb制作で仕事をしていきたい人にとって、必須です。

Codejumpでは、HTML/CSS、jQuery（JavaScript）だけでなく、WordPressの学習もすることができます。

具体的にはコーディングしたサイトをWordPress化を学べます。

より実務に近い形で、コーディング練習ができる有料プランがある

Codejumpでは2022年に実務に近い形でのコーディングができるサービスが始まりました。

その名もCodejump Pro

企業からのコーディング案件受注を想定した、
実践的なコーディング学習サービスです。

実案件をモデルにしたコーディング教材（※以下、仮想案件と呼びます）を、
毎月1件お送りいたします。

単価、納期、納品方法など、全てリアルなものとなっております。

お送りする仮想案件の内容や難易度は実案件と同じく様々です。

中には自分のスキルが全く通用しない、
これが実案件だったらと思うとゾッとする案件に出くわすかもしれません。

そんなリスクに事前に備えることで、
本番で最高のパフォーマンスを発揮していただければと思います。

引用元：Codejump Pro

このように、Codejump Proは有料ですが、実際の案件に近い方法で、コーディング練習することができます。

このプランができるようになったら、実際に仕事を取ることができるはずです。

コーディングが成長してきて、本番の案件に応募するのが不安な人には、Codestep Proはとてもおすすめ

Codejumpはコーディング初心者だけでなく、コーディングができる人でも成長できるサービスがつまっています。

Codejumpを利用して欲しいおすすめな人

ここからはCodejumpを利用して欲しいおすすめな人を紹介します。

当てはまり人はぜひ、Codejumpを利用して、Webサイト制作の学習を行なってください。

基本的には、無料で学習できるので、Webサイトを作る仕事がしたい人は全員におすすめできます。

Codejumpの具体的な使い方

Codejumpの使い方はコードを書くことに慣れるために、入門編のサイトから順番にコードを書くこと

といっても、Progate（プロゲート）や本でHTML/CSSの基礎が学習した人がいきなりCodejumpを使って、コーディング練習することは難しいです。

具体的な使い方を解説します。

コーディングができる準備や模写コーディングのやり方についてはこちらの記事で詳しく解説しています▼

あわせて読みたい

【超初心者必見】模写コーディングを始めるまでの具体的な手順と模写コーディングのやり方をわかりやす…

Codejumpで模写コーディング学習を始めた時の注意することは

コーディング初心者の人がCodejumpで初めから模写コーディングはできないことを理解する

ことです。

もし、模写コーディングができないと悩んでいたら、こちらの記事を読んでみてください▼

あわせて読みたい

【できないのは当たり前】模写コーディングができない・難しいと感じる理由5選【模写コーディングのコツ…

コーディングは慣れ

Codejumpのサイトを模写していけば、慣れてきて、できるようになります。

コーディングは自転車を初めて乗るとき同じです。

できるようになるまでが大変ですが、慣れると自然とできるようになります。

できるようになるために、Codejumpを入門編や初級編を何回も模写コーディングしていきます。

大事なのは、ソースコードを見ながらでもいいので、毎日手を動かして、コードを書くこと

僕も初めは、模写コーディングが全くできずに、挫折を繰り返していました。

しかし、毎日コードを書くことより、模写コーディングができるようになりました。

そして、今では、デザインカンプからのコーディングができるようになったのです。

デザインカンプからのコーディングができるようになると、実際の案件に応募できるレベルになります。

デザインカンプからのコーディングのやり方はこちらの記事で解説しています▼

あわせて読みたい

【レベルアップ】模写コーディングの次はすぐにデザインカンプからコーディングするべき｜コーディング…

Codejump中級編をデザインカンプからのコーディングができるようになれば、次のステップに進むことができます。

• 実際の自分ができそうな案件に応募する
• 自分でコーディングしたサイトをネットに公開する
• WordPressの学習を始める

コーディングができるようになると、いろいろな次のステップに進むことができます。

Codejumpを使って、コーディングができるようになるレベルまで、練習をしましょう。

自分でコーディングしたサイトをネットに公開する方法はこちらの記事で詳しく解説しています▼

あわせて読みたい

【誰でも簡単にできる】コーディングしたWebサイトの公開方法 5ステップ｜ドメイン？サーバー？の疑問も…

Codejumpの評判　まとめ

今回はCodejumpの評判について記事にしました。

Codejumpはとても評判のいい、Webサイト制作の学習をする人に、とてもおすすめなサービス

Codejumpの特徴はこちら。

Codejumpは無料で多くのサイトをコーディング練習できる素晴らしいサイトです。

そんなCodejumpを使って欲しいおすすめな人はこちら。

やっぱりコーディング練習をこれから始める人に、おすすめですね。

そして、使い方はこちら。

大事なのは、とにかく答えを見ながらでも、手を動かしてコードを書くことです。

そうすることにより、コーディングに慣れて、自然とコードを書けるようになります。

Codejumpの中級編のサイトをデザインカンプからのコーディングができるようになると次のステップに進めます。

Codejumpは僕もコーディング練習にいつも使っていたサイトです。

このおかげで、僕はとても成長することができたので、これからコーディングを始める人におすすめです。

ぜひ、Codejumpを使ってみてください。

こんにちは、ミナミです。

と悩んでいませんか？

もし、progate（プロゲート）は意味ないと感じている人がいたら、それはprogate（プロゲート）の使い方を間違えている可能性があります。

progate（プロゲート）はプログラミングを手軽に学ぶことができるサービスです。

これからprogate（プロゲート）でプログラミングを学ぼうと考えている人は多いはず。

そこで、今回の記事は、

• progate（プロゲート）がほんとうに意味がないのか
• progate（プロゲート）がプログラミング初心者に意味がある理由
• progate（プロゲート）が意味ないと感じる理由
• progate（プロゲート）の使い方

について解説していきます。

実際にprogate（プロゲート）でHTML/CSSを学習した経験を活かしていきます。

progate（プロゲート）は意味ない？

progate（プロゲート）が意味ないのか、結論は

プログラミングの知識０の初心者の人には、progate（プロゲート）は意味ある

プログラミング初心者の人にとって、progate（プロゲート）は意味はあります。

というより、これからプログラミングを学習したい人はprogate（プロゲート）をやるべきです。

そのくらいprogate（プロゲート）は素晴らしいサービスです。

プログラミングの知識０の初心者の人には、progate（プロゲート）は意味ある理由について解説します。

progate（プロゲート）がプログラミング初心者に意味ある理由

プログラミングで何ができるか具体的に学ぶことができる

プログラミングを全く知らない初心者の人は、プログラミングでどんなことができるかイメージしづらいと思います。

progate（プロゲート）では、プログラミングで何ができるか具体的に学ぶことができます。

例えば、progate（プロゲート）にはHTML/CSSという言語を学ぶコースがあります。

HTML/CSSはWebサイトを作るときに必要な言語です。

progate（プロゲート）では、実際にHTML/CSSを学びながら、簡単なWebサイトを作っていきます。

簡単なWebサイトを作っていくことで、HTML/CSSがどのような言語で、どういうふうに使われるのかを知ることができます。

僕もprogate（プロゲート）で学ぶ前は、HTML/CSSがなんなのか全く知りませんでした。

しかし、progate（プロゲート）で学ぶことにより、HTML/CSSをどのように使って、Webサイトが作られるのかを知ることができました。

このように、progate（プロゲート）でプログラミングを学習すると、具体的なプログラミングの使い方を学ぶことができます。

実際にコードを書きながら、プログラミングを学べる

参考書や動画でプログラミングを学習すると、読んだり、見ているだけになります。

しかし、progate（プロゲート）では実際にコードを書きながら、プログミングを学ぶことができます。

読んだり、見たりするだけと、実際にコードを自分で書くのは、プログラミングの成長スピードがかなり違う

その理由は、

ためです。

「こういうふうにコードを書いたら、こう動く」と、体験できると、プログラミングの理解がとても進みます。

さらに、コードを書いて正常に動作することが、楽しさにも繋がります。

僕もprogate（プロゲート）を使い、実際にコードを書くと、楽しいと感じていました。

プログラミングの楽しさがあったから、学習を続けられました。

このようにprogate（プロゲート）では、実際にコードを書きながら、楽しくプログラミングを学べるので、参考書や動画ではできないようなプログラミング学習をすることができます。

プログラミング初心者には、progate（プロゲート）はとても意味のあるサービスです。

自分でエディタなどを準備しなくていい

プログラミングのコードを自分で書いていくには、エディタが必要になります。

エディタとは、下の画像のような、プログラミング言語を書くためのノートみたいなものです▼

このエディタを自分で準備するのは、初心者の人には少しわかりづらく、めんどくさいです。

しかし、

progate（プロゲート）では、コードを書くためのエディタがprogate（プロゲート）の中に用意されているので、自分のパソコンでエディタを準備する必要がない▼

これがプログラミング初心者にはとても助かります。

僕も、最初にエディタを準備しなければいけなかったら、挫折していたかもしれません。

エディタが用意されているprogate（プロゲート）はとても便利なサービスです。

プログラミングを解説するスライドが丁寧でわかりやすい

プログラミングは、知識がない初心者の人には、理解しづらいところがあります。

そのため、progate（プロゲート）にはプログラミングをわかりやすく解説するスライドがあります。

図や絵、キャラクターを使って、わかりやすくプログラミングをスライドで解説している

スライドのおかげで、難しいプログラミングでも、初心者の人に理解がしやすくなっています

ただの文字だけで解説するよりも、図や絵、キャラクターがあることにより、スライドがわかりやすく、頭に入りやすくなります。

僕もprogate（プロゲート）を使っているときは、わからないことがあったら、何度もスライドを見て理解していました。

progate（プロゲート）のスライドを見るだけでも、プログラミング初心者の人には、意味があると感じます。

progate（プロゲート）が意味ないと感じる理由

ここまで、progate（プロゲート）はプログラミング初心者には意味があるとお話ししました。

しかし、

progate（プロゲート）が意味ないと感じる人もたくさんいる

プログラミング経験者がprogate（プロゲート）をしている

progate（プロゲート）はプログラミング経験者には物足りないかもしれません。

それは、

progate（プロゲート）がプログラミング初心者に向けての学習サービスだから

なので、プログラミング経験者がプログラミング技術を上げるためにprogate（プロゲート）をすることはおすすめできません。

もっとレベルが高く、実践的にプログラミングを学習できるようなサービスや参考書を使った方がいいです。

プログラミング経験者がprogate（プロゲート）で学習することを例えるなら、

車の運転をする人が、もっと運転技術を上げたいから、自動車学校に行くようなもの

運転できる人が、自動車学校に行っても意味ないですよね。

progate（プロゲート）はプログラミング初心者がプログラミングに慣れるためのサービスなので、プログラミング経験者だと意味ないと感じてしまうのです。

もちろん、プログラミング経験者でも、自分が知らない言語がどんな感じなのか知るために、progate（プロゲート）を使うのはアリ！！

progate（プロゲート）だけで、プログラミングができるようになると思っている

progate（プロゲート）だけで、プログラミングができるようにはなりません。

progate（プロゲート）はプログラミング初心者の人がプログラミングがどんな感じなのか知る目的には最適なサービスです。

しかし、プログラミングを知って、自分でプログラミングができるようはなるには難しいです。

基本的にprogate（プロゲート）では、スライドで解説したことを、自分でコードを書いていきます。

そのため、１から自分で考えて、コードを書けるようにはならないです。

プログラミングができるようになるには、１から自分でコードを書けるようになる必要があります。

progate（プロゲート）で学習したことを活かして、次のステップとして、実践的に１からコードを書けるように学習しましょう

僕もprogate（プロゲート）でHTML/CSSを学習しましたが、自分で用意したエディタにコードを書こうとしましたが、全く手が進みませんでした。

progate（プロゲート）では、スライドやサポートが充実しているからコードが書けていたんだと、そのときに気づきましたね。

progate（プロゲート）だけでプログラミングをできるようになると思っていたら、progate（プロゲート）は意味ないと感じるかもしません。

progate（プロゲート）を無料の範囲だけでしている

progate（プロゲート）で無料の範囲だけしていても意味ないです。

progate（プロゲート）には無料で学習できる部分と、有料で学習できる部分があります。

progate（プロゲート）の無料の部分だと、各言語のコースの初級編（ I ）までしかすることができない

各コースには初級編（ I ）以外にも

• 中級（ II )
• 上級（Ⅲ )
• （ Ⅳ ）
• （ Ⅴ ）

と続いていきます。

無料だと、この中の初級編（ I ）しかできません。

progate（プロゲート）の無料の範囲だけしていると、プログラミングの知識や具体的な役割などを知ることができません。

なので、

progate（プロゲート）でプログラミングを学習するなら、有料会員（月1,078円税込）になることをおすすめします。

progate（プロゲート）で無料の範囲だけでプログラミング学習をしていたら、意味ないと思ってしまうでしょう。

progate（プロゲート）で同じコースを何周もしている

progate（プロゲート）は同じコースを何周もするものではありません。

同じコースを何周もするのは意味ないです。

progate（プロゲート）はプログラミング言語がどんな言語なのか、どんな役割なのか知ることができるサービスです。

そのため、

プログラミング言語を理解するために、一度やった言語のコースを何周もするのは意味ない

何周もするなら、自分でエディタを用意して、自分で１からコードを書いていく方が意味があります。

progate（プロゲート）では同じコースを1度か2度するくらいして、より実務に近い方法でコードを書きましょう

HTML/CSSを学習しているなら、HTML/CSSを使って、サイトを模写する模写コーディングをするなどです。

より実践的な方法でコードを書くと、成長できるので、progate（プロゲート）は何周もしないようにしましょう。

僕も、HTML/CSSの基礎をprogate（プロゲート）で学習して、模写コーディングを行い、自分でコードが書けるようになりました。

progate（プロゲート）の意味のあるオススメの使い方

これがprogate（プロゲート）の意味のある使い方です。

他の言語を学びたいとなったら、2から始めればOKです。

模写コーディングのやり方を知りたい人はこちらの記事で解説しています▼

あわせて読みたい

【超初心者必見】模写コーディングを始めるまでの具体的な手順と模写コーディングのやり方をわかりやす…

progate（プロゲート）は意味ない？　まとめ

いかがでしたか。

progate（プロゲート）をやっている人の中には、意味ないと感じている人はいるかもしれません。

しかし、それはprogate（プロゲート）の使い方を間違えている可能性があります。

プログラミングの知識０の初心者の人には、progate（プロゲート）は意味あります。

その理由はこちら▼

反対に、progate（プロゲート）が意味ないと感じる理由はこちら▼

そして、最後にprogate（プロゲート）の使い方はこちら▼

僕はprogate（プロゲート）を使ったおかげ、プログラミングというのがどんなものなのか知ることができました。

プログラミングを全く知らない人が、いきなり1からコードを書くことは難しいです。

progate（プロゲート）があるおかげで、プログラミング学習が手軽にできるようになったと思います。

プログラミングに興味がある人は、progate（プロゲート）を使ってみてもいいかもしれません。

こんにちは、ミナミです。

と考えている人はいませんか？

模写コーディングは、HTML/CSSの書くことに慣れることができるので、絶対にするべき学習方法です。

しかし、模写コーディングを始める手順、やり方はかなり難しいです。

僕も超初心者のときは、模写コーディングを始めるまでに四苦八苦していた思い出があります。

そこで僕の経験をふまえて、今回の記事では、超初心者でもわかりやすく、誰でもできる、模写コーディングの具体的な手順、やり方について解説します。

模写コーディングの次にすることが知りたい人はこちらの記事で解説しています▼

あわせて読みたい

【HTML /CSS知識０から3ヶ月で可能】独学でWebサイトを作り、ネットに公開できるまでの最短7ステップ（…

【超初心でもわかる】模写コーディングを始めるまでの手順

模写コーディングを始めるまでの手順えは４つあります。

超初心者の方はここの模写コーディングを始めるまでにかなり苦戦します。

僕も最初「エディタってなに？」「ファイルはどうすればいいの？」と模写を始めるまでにとても時間がかかりました。

その経験から、超初心者の方でもわかりやすく、模写コーディングを始めるまでの4つの手順を、解説しているので参考にしてください。

1|コードを書くエディタを用意する

模写コーディングを始める最初の手順は、HTML/CSSを書くためのエディタを用意する必要があります。

エディタはHTML/CSSの言語書くためのノートのようなものです。

プロゲートでは、エディタはプロゲートの中で用意されていました。とても便利ですよね。

しかし、自分で模写コーディングするときはエディタは必須になります。

ちなみにエディタはこのようなものです▼

プログラミングといえば、上の画像をイメージするかもしれませんね。

しかし、「どのエディタをどうやってを使えばいいの？」と思いますよね。

超初心者の方は「Visual Studio Code」を使えば間違いなし！

「Visual Studio Code」略してVSCodeは無料で使えるエディタです。

多くのエンジニアの人がこの「VSCode」を使っているので、わからないことがあっても、ネットで調べれば解決します。

超初心者の方でも、わかりやすいエディタなので、「Visual Studio Code」をインストールしましょう。

「Visual Studio Code」のインストール方法

「Visual Studio Code」の公式ページからインストーラーをダウンロードします。

1.公式ページから「other platforms」を選択

2.自分に合ったOSを選択して、インストーラーをダウンロードする

3.「Visual Studio Code」をイントールしていく

Macの場合

ダウンロードしたインストーラーを開いて、「Visual Studio Code」をインストールする

「Visual Studio Code」で模写コーディングするための準備

「Visual Studio Code」をインストールしたら、準備することがあります。

この2つは模写コーディングする上で必須なので「Visual Studio Code」で準備しましょう。

初期設定が英語なので、日本語に設定する

「Visual Studio Code」を最初に開くと英語になっています。（解説画像はすでに日本語です）

⒈左側にある拡張機能のアイコンを選択

⒉上の検索で「Japanese Language Pack」と検索する

⒊一番上の「Japanese Language Pack」をインストールする

⒋インストールが完了すると、画面右下に「Restart」と表示されるので選択する

⒌「Visual Studio Code」が再起動されて、日本語表示になる

コーディングしたWebサイトをローカルサーバーで確認できるようにする

「Visual Studio Code」でコーディングするときは、コーディングしたサイトを確認するためにローカルサーバーで表示するようにしなければいけません。

わかりづらいと思うので、具体的に説明します。

ローカルサーバーに表示できるように設定をすると、コーディングしたエディタの右下に「Go Live」と表示されるので、選択します。

すると、自分のブラウザにコーディングしたサイトが表示できます▼

この設定をすることにより、

自分が書いたコードがどのように表示されている確認できるので、模写コーディングするときは必須

設定方法

⒈拡張機能のアイコンを選択して、「Live Server」と検索。

⒉下の紫色のアイコンが表示されている「Live Server」をインストールします。

⒊メニューバーの「ファイル」から、「自動保存」を選択（この設定をするとコードを書いたときに自動でブラウザが更新される）

コードを書くときに右下に「Go Live」と表示れていればOK！

コードを書いたときに、「Go Live」をクリックして、ブラウザに表示れるか確認しよう

2 | 模写するサイトを決める

エディタの準備が整ったら、模写するサイトを決めていきます。

超初心者の方は、模写するサイト選びはとても大事です。

模写するサイトが難しいと、そこで挫折してしまう場合がある

なので、最初はとても簡単なサイトを模写コーディングしていきましょう。

おすすめなのが、codestepという無料でコーディング練習ができるサイトの初級編「Profile」

codestepはコーディング練習するためのサイトです。

• 入門編
• 初級編
• 中級編
• 上級編

とコーディングするサイトが分かれていて、自分のレベルに合ったサイトをコーディング練習ができます。

僕もこのcodestepのおかげでコーディングができるようになりました。

codestepはとても評判がいいので、模写コーディング練習におすすめです。

そんなcodestepの中でも、最初は初級編の「Profile」がおすすめです。

他にも、模写コーディングがで練習できるサイトがあるので、気になる人はこちらの記事で解説しています▼

あわせて読みたい

【HTML・CSS初心者】模写コーディングが無料で練習できるおすすめサイト３選｜デザインカンプからのコー…

3 | ファイルを作成

模写するサイトを決めたら、ファイルを作成していきます。

初めて模写コーディングする人には、少しややこしいかもしれませんが、わかりやすく解説します。

僕はMacを使っているので、Macの画面になります。（基本的にはWindowsも一緒です）

⒈自分のパソコンに新しくフォルダを作成する（名前はProfileにします）

⒉Profileフォルダの中に「img」フォルダを作る

⒊imgフォルダの中に、先ほど紹介した、codestepの入門編「Profie」の画像をドラッグ&ドロップする

画像は何でもいいので、自分でオリジナルの画像を用意してもいい

⒋ファビコンのアイコンを保存する（必要ない人は⒐へ進む）

　Profileのサイトで右クリックして、「検証」を選択する

ファビコンとは？

ファビコンとは、ブラウザのタブなどに表示されるWebサイトのアイコンのこと。

⒌右側にある、HTMLが書かれている部分の<head>タグの右にある「▶︎」をクリック

⒍「img/favicon.ico」の上で右クリックする

⒎「Open in new tab」を選択する

⒏表示されたファビコンをProfileのimgフォルダにドラッグ&ドロップする

⒐Profileのフォルダを「Visual Studio Code」にドラッグ&ドロップする

⒑Profileの横の「新しいファイル」を選択する

「新しいファイル」と「新しいフォルダ」を２種類あるので、間違えないように注意！

11.新しいファイルに「index.html」を入力する

12.Profileの横の「新しいフォルダ」を選択する

「新しいファイル」と「新しいフォルダ」を２種類あるので、間違えないように注意！

13.「css」と入力する

14.cssのフォルダを選択した状態で、「新しいファイル」を選択する

15.「style.css」と入力する

これでファイルの作成は完了。

index.html、style.css、imgフォルダが入った、Profileのフォルダができます▼

4 | コーディングしていく

ファイルが完成したら、後はコーディングをしていくだけです。

といっても、最初はどうやってコーディングしていけばいいかわからないと思います。

そういうときは写経していきましょう。

写経とは、実際のコードをそのまま移していくこと

codestepはとても親切で、Webサイトのソースコードを見ることができます▼

ソースコードを見ながら、どうやってWebサイトができるのかを確認しましょう。

ただ写すのではなく、「このコードはこういうふうに表示される」というように自分で確認しながらコードを写すことが大事

ここまでは模写コーディング始めるための手順をわかりやすく解説しました。

【超初心でもわかる】模写コーディングのやり方

模写コーディングを始める準備ができたので、模写コーディングしていきます。

と言われても超初心者の方は、いきなり模写コーディングをしていくのは難しいと思います。

【できないのは当たり前】模写コーディングができない・難しいと感じる理由5選【模写コーディングのコツあり】

僕も初めて模写コーディングするときは、何から始めていけばいいかわかりませんでした。

そこで、ここからは超初心者の方でもわかる、模写コーディングのやり方について解説します。

解説にはコーディング練習サイト『codestep』の初級編「Profile」を使っていきます。

模写コーディングの今回のやり方はHTMLを全て書いてからCSSを書きますが、「HTMLのヘッダーを書いてから、ヘッダーのCSSを書く」というように、その都度CSSを書いていっても大丈夫（自分のやりやすい方でやりましょう）

⒈模写するサイトのレイアウトなどの確認

コーディングする前に確認することはいくつかあります。

• レイアウト
• セクションごとの幅の広さや高さ
• 文字の大きさ
• 文字や背景の色
• 余白の広さ

などなどです。

最初に上のことを確認するとコーディングしやすくなるので、模写するサイトのレイアウトなどの確認はしましょう。

最初は、文字の大きさや文字の色、背景の色などは答えのコードを見て、確認すればOK

レイアウトのイメージはこのようにヘッダー、メイン、フッターで分けるイメージです▼

「ここまでがヘッダーで、ここからがメインだな」とイメージできたらコーディングがしやすいです。

模写コーディングに便利なツール

ブラウザにGoogle Chromeを使っている人は模写するときにとても便利なツールがあります。

例えば、このように使えます▼

HTMLのheadタグ

それでは、模写コーディングをしていきます。

最初はHTMLのheadタグを書いていきます▼

「HEAD」とは、文書のヘッダ部分を指定するタグです。<head>タグで囲まれた内容はhtmlファイルの情報を宣言するものであり、<html>タグのあと、<body>タグの前に書きます。
<head>タグの中の内容は、<title>タグを除いて普通はブラウザの画面上に表示されません（title要素はブラウザ上部のタイトルバーに表示されます）。ヘッダ部分では<title>タグ、<meta>タグ、<link>タグなど、HTMLファイルのさまざまな情報が指定されます。また、スタイルシート（CSS）やJavaScriptを外部ファイル化した場合に、<head>タグの中に記述して読み込ませることもあります。

引用元：HTML辞典

headタグでできること

• サイトタイトルをつける
• サイトにアイコンをつける
• CSSやJavascriptを追加する
• リセットCSSを追加する　　　などなど

最初、headタグで大事なのは、CSSを追加することです。

headタグに正しくCSSを追加できないとCSSを書いてもHTMLに反映されないので注意が必要

といっても、headタグは慣れるまで難しいのです。

最初はあまりわからないと思うので、答えのコードを見ながらやればOK

codestepでは、上の画像のように答えのコードを手軽に見ることができるので、見ながらコードを書けるので、おすすめです。

コードを書いていくうちに、慣れてきます。

HTMLのヘッダー

headタグを書いたら、次はbodyタグを書いていきます。

bodyタグで書いたコードはWebサイトに表示される内容になる

bodyタグの中に、ヘッダー、メイン、フッターを書いていきます。

模写コーディングは基本的にはサイトの上のヘッダーから書いていきます。

codestepの「Profile」のサイトだと、タイトルアイコンとナビゲーションがある部分になります▼

HTMLだと、この部分です▼

HTMLのメイン

次はメインの中のコードを書いていきます。

メインの中はメインビジュアルやセクションごとに分かれているので、上から順番にコードを書いていきます。

HTMLのフッター

HTMLの最後にフッターを書いていきます。

CSS

HTMLが書けたら次は、CSSを書いていきます。

CSSはHTMLとは別のファイルで書いていきます。

最初は、共通部分のCSSを書いていきます。

次にヘッダーからメイン、フッターにかけて、CSSを書いていきます。

最後にレスポンシブサイズのコーディングを書いていきます。

レスポンシブとは？

画面のサイズによって、Webサイトのレイアウトを変更すること。

レスポンシブ対応ができているサイトだと、スマホなどの小さい画面で見ても、Webサイトが見やすくなる

上が普通のWebサイト画面になりますが、レスポンシブ対応していると下のようなレイアウトになります▼

スマホでも見ても見やすいレイアウトになっています。

模写するサイトと自分で書いたサイトを見比べる

最後に模写するサイトと自分が作ったサイトを見比べて、違いがないか確認します。

大きく違いがあれば、修正していきます。

超初心者の方は、あまり完璧に模写することを考えずに、だいたい模写するサイズと合っていればOK

完成

完成したら、また同じサイトを模写していくか、次のサイトを模写していきます。

模写コーディングは慣れなので、１回で満足せずに、何回も数をこなしていくことが大事

今回紹介した模写コーディングのやり方を繰り返して、模写コーディングに慣れていきましょう。

模写コーディングを始めるまでの具体的な手順と模写コーディングのやり方　まとめ

今回は模写コーディングの具体的な手順と模写コーディングのやり方についてわかりやすく解説しました。

僕も超初心者のときは、模写コーディングを始めるときに、何が何だかわかりませんでした。

同じような状況になっている人もいると思うので、今回解説しました。

最後にまとめると、模写コーディングを始めるまでの具体的な手順はこちら。

模写コーディングのやり方はこちら。

最初は模写コーディングは大変かもしれませんが、慣れてくると模写コーディングが楽しくなります。

続けると、自分でサイトを作っている感覚がおもしろく感じるので、ぜひがんばってください。

こんにちは、ミナミです。

と考えている人は多いと思います。

僕も同じような思いを持っていました。

そして、独学で自分でプログラミングを必死に勉強して、Webサイトを作れるようになりました。

自分で作ったWebサイトをネットに公開できるようになると、自分でお金を稼げるようになります。

しかし、どうやって知識０から自分で作ったWebサイトを公開できるようになるかはわからない人もいるはずです。

独学で自分て作ったWebサイトを公開できるまでの道のりはとても大変です。

僕もいろいろ試行錯誤しながら、勉強してWebサイト公開まで辿り着きました。

そこで、今回はHTML/CSSを独学で学んで、Webサイトを作り、ネットに公開させる方法7ステップを紹介します。

自分で作ったWebサイトを公開できるようになるメリット３選

「そもそも、なんで自分で作ったWebサイトを公開する必要があるの？　」

と思った人もいるかもしれません。

自分で作ったWebサイトを公開できるようになるとたくさんのメリットがあります。

そのメリットはこちらです▼

自分のポートフォリオや実績を作ることができる

Webサイトを公開できるようになると、自分のポートフォリオや実績を作れて、他の人に見てもらうことができる

もし、Webサイトを作る仕事がしたい場合は、自分のポートフォリオや実績を持つことが必須になります。

自分のポートフォリオや実績を作ると、仕事を依頼する人がポートフォリオなどを見て、「この人に仕事を任せようかな」となります。

そのため、

自分のポートフォリオなどのサイトを作ってをネットに公開できると、ネット上で簡単に多くの人にポートフォリオを見てもらい、仕事に繋がりやすい

さらに、自分で作った仮想のサイトをいくつも公開できると、実績が多くの人の目に止まります。

その結果、Webサイトを作って欲しい人が、仕事を頼みやすくなります。

フリーランスや副業で稼げるようになる

自分で作ったサイトをネットに公開できることはサーバーやドメイン、FTPの知識が身に付き、稼げるようになります。

自分でWeb制作やコーディングの仕事をする場合は、依頼されて作ったWebサイトをクライアントのサーバーにアップしなければならない場合があります。

サーバーにアップすることにより、作ったWebサイトをネットで見られるようになります。

これは、自分でWebサイトをネットに公開させるのと同じ方法になります。

つまり、

自分でネットにWebサイトを公開できるようになると、「この人はサーバーに、作ったサイトをアップできる人だ」とクライアントに思われ、仕事を頼まれやすくなる

Webサイトをネットに公開させる方法を知っているか、知らないかはフリーランスや副業する人にとって大きな差があります。

自分のブログを持つことができる

自分でサイトを公開できるようになると、サーバーなどの知識が身に付き、自分でブログを持つことができます。

ブログを持つことはたくさんのメリットがあります。

ブログをすることはWeb制作で後々、必要になってくる知識を身つかせることができます。

僕が今、書いているのもWordPressで作ったブログです。

Webサイトを公開できると、自分のブログを持つことができて、お金を稼げるかもしれないです。

稼げなくても、Web関係の知識がとても身に付くので、Webサイトの公開はできるようになったほうがいいですね。

Webサイトを作るために必要な学ぶべき言語

「何を学べばWebサイトって作れるようになるの？」と疑問に思うかもしれません。

Webサイトを作るために必要な言語はこの３つです。

See the Pen html by minamide kosei (@__kosei) on CodePen.

上の「HTMLとは？」がHTMLでは、h1となり、これはタイトルようなものです。

このようにHTMLはWebページにタイトルや見出しをつけたり、文章やリンクを入れたりすることができる言語です。

しかし、このままだとWebページにただ文字やリンクを入れただけです。

色をつけるなどの装飾を行うのが次のCSSの役割になります。

CSSはHTMLで作成した文章などに色をつけたりできます。

また文章の場所を移動させたりなどの、配置を変更することもできます。

他にも、CSSにはいろんなことができるので、おもしろい言語だと思います。

具体的にCSSの役割はこのようになっています▼

See the Pen Untitled by minamide kosei (@__kosei) on CodePen.

先ほどのHTMLだけで作ったWebページよりも色を変えたり、文字を中央に配置したりなどを行いました。

これがCSSの役割になります。

HTMLとCSSの言語が書けるようになると簡単なWebサイトは作ることができます。

独学でWebサイトを作り、ネットに公開できるまでの7ステップ

それでは、本題の独学でWebサイトを作り、ネットに公開できるまでの7ステップはこちらです▼

時間が取れる人だと3ヶ月あれば、知識が０の状態からWebサイトを作って、ネットに公開することができます。

と言ったものの、人それぞれ学習できる時間が違います。

なので、

3ヶ月でできなくて当たり前なので、気にせずに自分のペースで継続して学習しましょう。

ステップ1　Progate（プロゲート）でHTML/CSSの基礎を学習

最初のステップはProgate（プロゲート）でHTML/CSSの基礎を学んでいきます。

HTML/CSSを学べば、簡単なWebサイトを作れるので、最初はProgate（プロゲート）のHTML/CSSの基礎を学びましょう。

jQuery(javascript)はまだ最初の段階では学習する必要はありません。

HTML/CSSを理解して、コードが書けるようになってからでOKです！！

Progate（プロゲート）はプログラミング知識が０の人が、学び始めの第一歩としてとてもおすすめです。

月々1,078円でかかりますが、1,078円を払う価値はあるサービスです。

１ヶ月だけ入って、学習をしっかりして解約することもできます。

Progate（プロゲート）を無料で学習できる部分もあります。

そのことについて詳しく知りたい人はこちらの記事へ▼

あわせて読みたい

Progate（プロゲート）は無料だけでいい？【プログラミング学習を続けたい人は有料版は必要】

Progate（プロゲート）がおすすめな理由

僕も最初はProgate（プロゲート）でHTML/CSSを学びました。

プログラミング知識がまったくなかった僕でも、Progate（プロゲート）はHTMLやCSSがどんな言語なの理解できました。

実際に解説を見ながら、手を動かてWebサイトを少しずつ作っていくので、楽しかったですね。

しかし、

Progate（プロゲート）だけしていても、あまりスキルアップはできないので、注意が必要

Progate（プロゲート）はあくまでも、「プログラミング言語を使ってこんなことができますよ」という体験ができるサービスです。

例えば、

• HTMLだと、ここにh1タグを入れたら、タイトルになる
• CSSだと、ここにfont-weight:bold;を入れたら、文字が太くなる

というふうにHTML/CSSの体験ができるのが、Progate（プロゲート）です。

なので、Progate（プロゲート）で学んだからと言って、すぐに学んだプログラミング言語が使えるようになるかと言われれば違います。

次のステップに進んで、0からプログラミングを使って、Webサイトを作る必要があります。

反対に、

何もプログラミングを知らない人が、どんなふうにプログラミングを使うのか体験したい人には、Progate（プロゲート）はとてもオススメ

詳しくはこちらの記事で解説しています▼

あわせて読みたい

【実体験】progate（プロゲート）は意味ない？【結論:プログラミング初心者には意味はある】

Progate（プロゲート）はどこまですればいい？

Progate（プロゲート）で学ぶべきコースはHTML/CSSコースです

HTML/CSSコースは

となっています。

このHTML/CSSコースをとりあえず、１周しましょう。

１周しても、あまりHTML/CSSを理解できないかもしれません。

僕も１周しただけでは、あまり理解できませんでした。

答えを見ながら、コードを書いていましたね。

１周しただけでは、あまり理解できなかった人は、もう１周HTML/CSSを学習する

または、わからないところだけ学習してもいいかもです。

しかし、

わからないからと言って、Progate（プロゲート）をHTML/CSSコースを何周もするのは絶対ダメ！！

このことは注意してください。

何周もProgate（プロゲート）をしても意味がないからです。

先ほども言いましたが、Progate（プロゲート）はプログラミングを体験するサービスです。

実践的なことはあまり身につかないので、わからなくても、次のステップに進んだ方が早く成長できます。

次のステップに進んで、自分でコードを書いていく方が早く成長できるので、Progate（プロゲート）は何周もしなくてOKです。

ステップ2　HTML/CSSをテキストで学習

HTML/CSSの学習はProgate（プロゲート）だけでなく、HTML/CSSのテキストで学習しましょう。

テキストで学習するときは、先ほどのProgate（プロゲート）をやりながらでも、OKです。

テキストがあることで、わからない部分がすぐに調べられるます。

「このHTMLってどうやって書けばいいのかわからない」ていうときでも、テキストを見て解決することがあります。

これは僕の実体験です。

手元に置いておくだけで、簡単にテキストを見ることができるので、１冊は持っておくことをオススメします。

Progate（プロゲート）とテキストでHTML/CSSの基礎を学習して、次のステップに進みましょう。

ステップ3　模写コーディング（HTML/CSS)

次のステップは模写コーディングです。

模写コーディングはWebサイトを作るための実践的な学習方法です。

Progate（プロゲート）とテキストでHTML/CSSを学んでも、実際にコードを書くのは難しいです。

コードを書くことに慣れるために、模写コーディングが必要になってきます。

模写コーディングはこのようにたくさんのメリットがあります。

模写コーディングができるようになると、自分で簡単なWebサイトを作れるので、コーディングが楽しくなりますよ！

模写コーディングのポイントはこちらです▼

何回もいろいろなサイトを、模写コーディングして、HTML/CSSを書くことに慣れることが大切

模写コーディングするまでの手順

模写コーディングを始めるまでの手順や模写コーディングのやり方はこちらの詳しく、わかりやすく記事で解説しています。

これから模写コーディングを始める人は見てください。

あわせて読みたい

【超初心者必見】模写コーディングを始めるまでの具体的な手順と模写コーディングのやり方をわかりやす…

1 | コードを書くエディタを用意する

コード書くための専用のエディタを用意しましょう。

エディタとはこのようなコードを書くためのソフトです。

なんとなく見たことがあるかもしれません。

僕はこのエディタにコードを書くことに憧れがありましたね。

エディタは無料で使える「Visual Studio Code」を使えばOKです。

多くの人がこの「Visual Studio Code」を使っているので、わからないことがあってもネットで調べることができます。

僕も「Visual Studio Code」を使っています。

2 | 模写するサイトを決める

模写するサイトは最初からネットにあるサイトを模写するのは難しいです。

なので

模写コーディングを学べるサイトにある、サイトを模写していくのがオススメ

模写コーディングを無料で練習できるサイトは、こちらの記事で紹介しています▼

あわせて読みたい

【HTML・CSS初心者】模写コーディングが無料で練習できるおすすめサイト３選｜デザインカンプからのコー…

その中でも、模写コーディングを学べるサイトでおすすめなのがCodestepです。

Codestepは模写コーディングやデザインカンプからのコーディング学習をするために作られたサイトです。

模写するサイトも

• 入門
• 初級
• 中級
• 上級

と分かれていて、自分のレベルに合ったサイトを模写することができます。

模写するサイトが18サイトあり、様々なパターンのサイトを模写することができます。

これが無料で学習できるので、codestepはとても評判がいいです。

Codestepの評判についてはこちらの記事で詳しく解説しています▼

あわせて読みたい

『Codejump【旧 Codestep】』の気になる評判は？【コーディング練習したい人にオススメのサイト】

僕もcodestepのおかげでコーディングができるようになりました。

3 | ファイルを作成

コーディングする前に、何のデータかわかるようにフォルダに1つファイルを用意します。（上の画像だとsampleの部分）

そのファイルの中に、

• index.html　（HTMLを書く場所）
• style.css　 （CSSを書く場所）
• img　 （画像を置く場所）　

を用意します。

この3つがあれば、HTML/CSSの模写コーディングができようになります。

4 | コーディングしていく

実際にコーディングしていきます。

1. HTMLのheadタグ
2. HTMLのヘッダー
3. HTMLのメイン
4. HTMLのフッダー
5. CSS

という順番でコードを書いていきます。

CSSは「ヘッダー書いたあとすぐにCSSを書く」というように部分ごとに書いていってもいいです。

先にHTMLを全て書いてからCSSを書く、セクションごとにHTMLとCSSを書く、などやりやすい方をしましょう。

模写コーディングは難しい・できないと感じるのは当たり前

模写コーディングをしていると難しい・できないという壁に突き当たります。

これは誰もが通るものです。

「自分は向いていないのではないか」

「全然できそうにない」

と思うかもしれません。

しかし、多くの人が同じように思って、それを乗り越えてきています。

大事なのは、難しい・できないと感じても模写コーディングを続けること

模写コーディングは慣れです。

僕も初めはまったく模写コーディングできませんでしたが、今ではできるようになりました。

それは諦めずに続けてきたからだと思います。

模写コーディングの難しい・できないという壁を乗り越えられると、コーディングスキルが身につき、自分でWebサイトを作られるようになります。

それでは、なぜ模写コーディング難しい・できないと感じでしまうのか、その理由はこちらです▼

模写コーディングが難しい・できないと感じている人は上の理由があてはまるかもしれません。

そんな人に、模写コーディングのコツがあります。

模写コーディングをするときは上のことを気にして、コードを書くようにしましょう。

詳しくはこちらの記事で解説しています▼

あわせて読みたい

【できないのは当たり前】模写コーディングができない・難しいと感じる理由5選【模写コーディングのコツ…

ステップ4　Progate（プロゲート）でjQuery(javascript)の基礎を学習

模写コーディングでHTML/CSSが理解できるようになったら、次はProgate（プロゲート）でjQuery(javascript)を学びましょう。

「なぜ、最初にProgate（プロゲート）をしたときに、jQuery(javascript)を学習しなかったのか？」

と疑問に持った人はいるかもしれません。

それは、

jQuery(javascript)はHTML/CSSに比べて単純に難しいから

jQuery(javascript)は最初にも話したようにWebサイトに動きを加えることができる言語です。

ある程度、HTML/CSSの基礎ができていないと、jQuery(javascript)は理解できないです。

そのため、HTML/CSSに慣れてから、Progate（プロゲート）でjQuery(javascript)を学びます。

上の2つのコースをProgate（プロゲート）でやりましょう。

ここでも大事なのが、何周もProgate（プロゲート）をしないことです。

jQuery(javascript)は難しいですが、Progate（プロゲート）でやるなら、2周くらいにしましょう。

Progate（プロゲート）でやるよりも、実際に自分でコードを書いていく方が自分の力になります。

ステップ5　模写コーディング（jQuery/javascript)

Progate（プロゲート）でjQuery(javascript)を学んだら、再び模写コーディングをしていきます。

jQuery(javascript)を使っているWebサイトを模写していきます。

jQuery(javascript)を使っているWebサイトは具体的にいうと、

• ハンバガーメニュー
• スクロールすると、コンテンツが動き出す
• タブメニュー
• スライダー
• ページ内クリックしたときに流れるような動き

などなどです。

jQuery(javascript)を使っているWebサイトは先ほど紹介した、codestepの模写コーディング練習サイトでもあります。

codestepの中級編から、jQuery(javascript)を使っているサイトがある

jQuery(javascript)を使っているサイトを何度も模写コーディングして、ハンバガーメニューやスライダーのコードの書き方に慣れましょう。

ステップ6　デザインカンプからのコーディング

模写コーディングができるようになってきたら、デザインカンプからのコーディングを行います。

デザインカンプからのコーディングは模写コーディングよりもレベルが上がります。

しかし、

デザインカンプからのコーディングができるようになると、Webサイトが作れるようになり、仕事が受けられます。

デザインカンプからのコーディングは模写コーディングよりも、実務に近いやり方です。

ぜひ頑張りましょう。

デザインカンプからコーディングには、デザインソフトが必要

オススメはAdobe XDです。

デザインデータの多くはAdobe XDで作られていることが多いです。

そのため、Adobe XDを使って、デザインカンプからのコーディングに慣れましょう。

デザインデータからのコーディングのやり方はこちらです▼

詳しくはこちらの記事で解説しているので、見てください▼

あわせて読みたい

【レベルアップ】模写コーディングの次はすぐにデザインカンプからコーディングするべき｜コーディング…

ステップ7　Webサイトを公開

最後のスッテプ、Webサイトの公開です。

デザインカンプからコーディングしたWebサイトをネットに公開させましょう。

最初にも話しましたが、Webサイトを公開させるメリットはたくさんあります。

自分でオリジナルで作ったWebサイトでもいいですし、既存のデザインデータからコーディングしたサイトでもいいです。

自分のポートフォリオを作った人もいると思います。

一から自分でせっかく作ったWebサイトを公開させないのはもったいないです。

自分の実績として、ネットに公開させましょう。

Webサイトの公開方法はこちら▼

知らない単語が出てきて、難しそうですよね？

安心してください。

とてもわかりやすく、誰でも簡単にコーディングしたWebサイトを公開させる方法を解説した記事があるので、そちらも見てください▼

あわせて読みたい

【誰でも簡単にできる】コーディングしたWebサイトの公開方法 5ステップ｜ドメイン？サーバー？の疑問も…

自分でWebサイトを公開させた後はそのサイトを使って、営業をして仕事をとってきたり、自分で作ったサイトで何か発信してもいいです。

次のステップである、PHPやWordPressについてさらに勉強することもできます。

自分で作ったサイトを公開できるくらいのレベルがあれば、何でもできますね。

独学でWebサイトを作り、ネットに公開できるまでの最短５ステップ　まとめ

今回は知識０の状態から、独学でプログラミングを学び、作ったサイトをネットに公開できるまでの７ステップ解説しました。

改めて、7つのステップがこちら▼

知識０の状態から、ネットにサイトを公開させるのはとても難しいです。何ヶ月もかかります。

でも、諦めなければ、スキルは身についてきます。

僕も自分で作ったWebサイトをネットに公開するまでに4ヶ月くらいかかりました。

時間はかかりますが、学習する価値はあります。

Webサイトを自分で作って、公開できる人なんて周りにいますか？

いないと思います。

それだけWebサイトを作って、公開できることはそれだけ希少なスキルです。

ぜひ、学習頑張ってほしいですね。

独学でWebサイトを作って、ネットに公開させたい人の参考になってもらえればと思います。