プログラミングの学習

初心者でも出来るプログラミングの基礎を学ぶ!

これは私がプログラミングを勉強するために始めたドットインストールの事を自分が勉強して感じたことを交えながら作っていくブログ記事です。

皆さんの参考になれば幸いです。

では最初に環境作りから始めましょう。

プログラミングの基礎のHTMLを学ぶための環境を整える

プログラムを勉強する前に勉強ができるように環境を整える必要があります。

それは

1 ブラウザの「chrome」をインストールする
2 プログラミング用のAtomエディターをインストールする
3 プログラミング用のフォントを導入する
4 拡張子が分かるように設定する

Windowsのブラウザのエクスプローラーだと上手く作動しない事があるのでGoogle chromeをインストールする必要があります。

Google chromeをインストールする

chromeと検索すると以下のように出てきますのでクリックします。

「chromeをダウンロード」をクリックしてダウンロードします

プログラミング用のAtomエディターをインストールする

atomで検索して下のようにAtomのページが出てきたらアクセスし「Download」をクリックします。
少し時間がかかります。

ダウンロードが終わりましたら、画面下の方に出てくるセットアップをクリックして起動させます。
下のような青い画面が出てきますので赤枠のところをクリックしておけばいいです。

下の画面はAtomを起動したときにこの画面が出てきますので、次から出したくない時は下にあるチェックを外しましょう。

プログラミング用のフォントを導入する

アトムにプログラミング用のフォント「Ricth Diminished」 を導入します。
検索して下のように結果が出たらクリックします。

画面が出てきたらレギュラー「Regula.ttf」をクリックして、画面が変わったら右横にあるダウンロードボタンをクリックします。
ダウンロードができたらインストールをクリックしてインストールします。

この後アトムを再起動します。

再起動したAtomの左上側にある「File」をクリックし中ほどの「Settings」をクリック
「Editor」の画面の中の下の方に「Font Family」という項目が出てくるので「Ricty Diminished」と間違わないように入力しましょう、入力を間違うと違うフォントになりますので間違わないように。

Atomの画面が暗くて見にくい場合には「Themes」をクリックして「UI Theme」と「Syntax theme」に「Atom Light」を選択してやると画面が白くなって見やすくなります。

拡張子が分かるように設定します

写真や画像には名前の他に「.」ドットから始まるアルファベットがあり、それを拡張子と呼びます。

その拡張子が出ていないとプログラムを作る時に画像や写真を組み込めなくなるからです。

その拡張子が出ていなければ、出るように設定をします。

下の写真の赤線のところに「.JPG」とあります、これがこの写真の拡張子でJPG方式で保存されていることが分かります。

まず最初に「エクスプローラー」を呼び出します、使っていればこのように出ますが、出ていなければ、下の検索窓に入力して検索して下さい。

エクスプローラーが出てきたら赤線の「表示」タブをクリックしてください。

表示の内容が出てきますので「ファイル名拡張子」のところにチェックを入れると画像などの後ろに拡張子が表示されます。

これでプログラムを勉強するための準備が整いました。

学習の前段階

ここからはアトムにHTMLで書くことを知らせることと、ブラウザにどのように表示されるかを見ていきます。

その前にAtomエディタのことをもっと使いやすくするためにはこちらを参考にして下さい。

学習の前段階の流れ

  1. フォルダーを作成する
  2. Atomを起動しhtmlで書くことを伝えます
  3. 文字を入力して保存する
  4. chromeを起動する
  5. どのように表示されるか見てみる

フォルダーを作成する

デスクトップ上にフォルダーを作成しておきます。

この中に練習で使う部品をバナー工房や画像変換ソフトを使用して作っていきます。

フォルダーの名前は自由ですが「Myforuda」とつけておきました。

アトムを起動しhtmlで書くことを伝えます

アトムを起動するとこのような画面が出てきます。

下の赤枠のところが「Plain Text」になっていますのでここを「html」に変更します、ここをクリックしたら入力画面が出てきますのでhtmlと入力して「Enter」を押すとここが変わります。

文字を入力して保存する

Atomの画面の下に「HTML」と表示されたのを確認して、文字を入力してみます、すると下の画面のように今までバツ印の所が青い〇になりました。

これは保存していない事を表します。

保存の方法は画面左側の「File」をクリックして「Save」をクリックしてもできますが、ショートカットキーを使えば簡単です。

保存は「Ctrl」+「S」キーを押せば保存できます。

最初はファイル名が付いていないのでファイル名をが入力しる画面が出てきますので「index.html」と入力しました。

Google chromeを起動する

このマークをクリックしてchromeを起動します。

どの様に表示されるか確認します

chromeが起動されたらフォルダーの中の赤枠のchromeのアイコンをWクリックするかchromeの上部にドラッグ&ドロップで画面を表示させます

上がブラウザに表示されているもので、下がAtomに入力した画面です。

このように表示されたら今はOKです、これから色々学習していきましょう。

初心者でも出来るプログラミングの基礎を学ぶ!

なかなか難しいイメージがありますが頑張って学習していきましょう。

第2回はこちらから

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事