☰
あきブログ Written by Akihiro Nishiyama

プログラミング学習でコードを書き始めるときに注意すべきこと【プログラミング超初心者必見！】

Programming

プログラミング初心者「『Progate』である程度学習したから、実際にエディタでコード書いてみよう！」

1時間後……。

プログラミング初心者「CSSが全然反映されないんだけど！！てか、そもそもどういう風にコード書き始めたらいいの！？」

これ、僕ですw
先日、僕はこんなツイートをしました。

「Progate」ではコードの書き始め方は紹介していないので、自分でコードを書こうとすると詰まっちゃう方もいると思います！
僕と同じくコードを書き始められない人にとって少しでも役に立てばいいなと思って、記事にしてみました。

本記事の内容

  • プログラミング学習の落とし穴！
  • 相対パスの注意点 htmlにcssを出会わせる手順と注意点

    • 僕はエディタで「VSCode」を使っているので、ここでは「VSCode」でのコードの書き始め方を書いていきます。
    「Atom」などの他のエディタでも基本は一緒なので、参考にしてみてください！

    プログラミング学習の落とし穴！相対パスの注意点

    罠
    「相対パス」というのは、今いるファイルから、必要なファイルまでの道筋を表す言葉です。
    ちょっと分かりづらいかもしれませんので解説していきますね。

    プログラミングするための道筋

    まず、「パス」というのは「経路」とか「道」という意味です。
    「相対」というのは「向き合う」とかそういう意味ですよね。
    これを踏まえると「相対パス」というのは向き合うための道筋という意味になります。
    今回の「cssをhtmlに反映させたい！」という場合で考えてみましょう。

    今、僕たちがいるファイルは「htmlファイル」です。
    そして、今、会いにいきたいのは「cssファイル」ですよね。
    このhtmlファイルとcssファイルをくっつけてあげるための道筋を作ってあげることが必要になります。
    なんとなくイメージできましたか？
    それでは次に、実際にその道筋を作る手順に移っていきます。

    htmlにcssを出会わせる手順と注意点

    道筋
    実際に相対パスを分かりやすく、僕なりの道筋を以下のように分けてみました。

    1. 全体のフォルダを作る
    2. 全体フォルダにHTMLシートを作る
    3. 拡張子について
    4. 全体フォルダの中にcssフォルダを作る
    5. cssフォルダにcssファイルを作る
    6. 画像フォルダも全体フォルダに作る
    7. htmlファイルに、cssファイルのリンクコードを書く

    こんな感じですね。
    それでは解説していきます！

    1:全体フォルダを作る

    まずVSCodeを開きます。左側のワークスペースに「新しいフォルダ」というアイコンがあるので、そのアイコンから自分の好きな名前のフォルダを作りましょう！
    例えば、「あきフォルダ」みたいな感じです。これで「あきフォルダ」という全体ができあがりです！
    これは簡単ですよね！

    2:全体フォルダにHTMLシートを作る

    次に、同じようにVSCODEの左側にある「新規ファイル」アイコンをクリックします。
    そうするとファイル名を打ち込めるようになるので、好きなファイル名を書き、最後に「.html」と書きましょう！
    例を書くと「あきファイル.html」という感じです。
    これでhtmlファイルのできあがりです！ばり順調です！！

    3:拡張子について

    HTMLファイルを作るときに「.html」と書きましたよね？
    これは拡張子と呼ばれていて、パソコンで扱うファイルの種類のことです。
    ワードなら「.doc」、エクセルなら「.xls」のような拡張子はみなさんも一度は見たことありますよね?
    この例と同じように、htmlファイルなら「.html」、CSSファイルなら「.css」というように書いていきます。
    僕は拡張子って聞いて身構えちゃいましたが、説明を聞くと「そんなに難しくないやん！」ってなりましたw

    4:全体フォルダの中にcssフォルダを作る※注意点

    では、大事なポイント部分に入っていきます！
    今度は全体フォルダの中にcss専用のフォルダを作っていきます。
    容量は今までと同じで、左上の「新規フォルダ」アイコンから新規フォルダ名を打ち込みます。
    このときに注意点ですがフォルダ名には「css」ということを書いておきましょう。
    これで、css専用のフォルダということが分かりやすくなります。

    全体フォルダにcssファイルを作らない理由

    疑問
    ここで僕が疑問に思ったことは、「なんで全体フォルダの中に直接cssファイルを作っちゃいけないの？」ということです。
    たぶん、これを読んでいる方の中にもいるんじゃないでしょうか。
    これは、料理で言う食材を分けて保存するイメージに近いと思います。
    同じ冷蔵庫でも、野菜は「野菜室」、肉は肉用もしくは冷凍室に入れた方がいいですよね？
    このイメージが分かりづらかったらごめんなさいw
    こうすることで、何がどこにあるかという構造をわかりやすく分けることができて、
    編集するときに効率が良くなります。
    最初に「大事ポイントです！」と言ったのはこういう作業効率を高めるための理由があるからでした！

    5:cssフォルダにcssファイルを作る

    さて、いよいよcssファイルを作っていきます。要領はhtmlファイルを作るときと全く同じです！
    「新規ファイル」アイコンからファイル名を入力していき、最後にcssの拡張子の印として「.css」と書きます。
    例としては「あきスタイル.css」みたいな感じです。ここはサクッといけちゃいますね！

    6:画像フォルダも全体フォルダに作る

    WEBページを作るときに、やっぱり画像は入れたいですよね！
    そんなときは画像フォルダも作っておきましょう！容量はcssフォルダと同じです。
    左上の「新規フォルダ」から画像専用のフォルダを作っていきます。
    例としては「あき画像フォルダ」みたいな感じです。
    これでほぼ準備は整いました。あとは最後の仕上げをしていきます！

    7:htmlファイルに、cssファイルのリンクコードを書く

    最後のポイントです！
    これを忘れると、せっかく準備したのにcssが反映されないので注意です。
    「.html」から「.css」を読み込むコードは、
    　

    <link rel=“stylesheet” href=“./cssフォルダ名/cssファイル名”>

    です！

    これを

    </head>

    の上に書いておきます。
    あとは、cssファイルを広げて、htmlとcssをProgateで学習したように書いていけば
    cssが反映されたページを表示してくれるようになります！
    おめでとうございます！htmlとcssが無事に出会うことができました！！

    今日のまとめ

    最後に、今日読んだことをもう一度まとめておきます。

    1. 全体のフォルダを作る
    2. 全体フォルダにHTMLシートを作る
    3. 拡張子について
    4. 全体フォルダの中にcssフォルダを作る
    5. cssフォルダにcssファイルを作る
    6. 画像フォルダも全体フォルダに作る
    7. htmlファイルに、cssファイルのリンクコードを書く

    これでコードの書き始めに悩まなくなってくれると嬉しいです！

    最後まで読んでいただきありがとうございました！

    それでは、また明日！

    >  >  プログラミング学習でコードを書き始めるときに注意すべきこと【プログラミング超初心者必見！】