HTMLとCSSの初心者もソフトウェアをインストールして練習しよう

最近と言うか、一昨日からなんですけどHTMLとCSSの勉強を始めました。

前々からWEB制作に興味があって、ネットでHTMLとCSSの勉強についての記事を見つけて読んでいるうちに挑戦したくなりました。

それと、今は大学2年になる直前の春休みで時間があり、大学生活にもだいぶ慣れてきたのでちょうどいいなと思いました。このブログと並行してやっていくつもりです。

HTMLやCSSなどのマークアップ言語やスタイル言語とプログラミング言語などは、ネットの中でも特に使えるものなので今のうちに習得しておきたいです。

案件をこなせるようになればそこそこ稼げるらしいです。

それはさておき、HTMLとCSSを勉強するにあたって必要なものがあります。それらをパソコンにインストールしていきます。

HTMLとCSSを学ぶのに必要なツール

HTMLとCSSを学ぶには、テキストエディタとブラウザが必要です。

 

テキストエディタは、HTMLとCSSを書き込んでテキストファイルとして保存するのに使います。これはぶっちゃけ何でも良くて自分が使いやすいものでいいのです。Macの標準エディタの「テキストエディット」でもいいです。

でも、ちょっと使いづらいと思います。なので今回は一般的なテキスエディタであるAtomエディタをインストールします。僕もこれを使っています。

WindowsとMacの両方で使うことができます。両方使えるテキストエディタは他にもVisual Studio Codeなどがあるのでそちらでもいいと思います。

 

ブラウザはコードの表示確認のために必要です。 Macの標準ブラウザはSafariですが、Google Chromeを使います。参考書やサイトで紹介されているのは大体Google Chromeだと思います。

ブラウザでは、Google Chromeは1番使われていて、僕も使っています。Chromeはスマホのアプリでもブックマークが検索できるので優秀です。

 

どちらのソフトも無料で利用することができます。

ソフトウェアのインストールと設定

Google ChromeとAtomエディタのインストールをしていきます。

Google Chromeの方は普通にインストールするだけですが、Atomエディタの方はフォントもインストールします。

※僕のメインのパソコンがMacなので、Macでのインストール方法となります。Windowsでも可能ですが、環境的には圧倒的にMacの方が学びやすいのでそちらをオススメします。高いですが、しっかり勉強すれば元どころではないくらいのリターンがあります。

Google Chromeのインストール

ChromeはSafariからダウンロードできます。すでに、Chromeをインストールしている場合は飛ばして大丈夫です。

リンクはこちら→Google Chrome

「Chromeをダウンロード」をクリックしてダウンロードします。初期設定のままならMacのダウンロードのところに追加されるので、それを開きます。

 

他のソフトウェアをダウンロードしたことある人は分かると思いますが、Macではホームページからアプリをインストールした場合は、アイコンをドラッグしてフォルダに入れます。

 

インストーラーに関しては、もう必要ないので「“Google Chrome”を取り出す」で消してしまいます。

 

アプリを立ち上げると、ブラウザが起動して使えるようになりました。これで、アプリのインストールが完了しました。

Atomエディタのインストール

次にAtomエディタのインストールを行います。

リンクはこちら→Atomエディタ

Downloadを押すとインストールできます。

 

こちらはダウンロードした場所にアプリがインストールされるのでアプリケーションの一覧の方に移動させておくといいです。

 

Atomエディタを開くとこんな感じです。全部英語...

僕も英語は得意ではないのですが、設定できましたから大丈夫です。

設定の前にRicty Diminishedというテキストエディタ用のフォントをインストールしておきます。

リンク→Ricty Diminished

これも英語ですが、下の方に行くとダウンロードリンクがあります。

 

たくさんありますが、「RictyDiminished-Rgular.ttf」をダウンロードします。「Regular」というやつです。

 

少しわかりにくいですが、「Download」ボタンがあるのでそこからダウンロードします。

 

ダウンロードしたファイルを起動するとこのような画面になるので、「フォントインストール」をクリックします。

 

すると、Font Bookに追加されます。これでフォントのインストールが完了したので、Atomエディタの設定をしていきます。

 

Welcome GuideやTelemetry Consentなどは消してしまっていいと思います。

 

設定はMacの場合は上のメニューから行います。

Atom→Preferencesで設定のタブが開かれると思います。

 

Editor→Font Familyで、使用する「Ricty Diminished」と入力します。綴りを間違えないようにしてください。

 

それと、ついでにCore→File EncodingでUTF-8となっているか確認してください。

Recty Diminishedはプログラミング言語用のフォントなので、全角や半角などのミスがわかりやすくなります。

ファイルの拡張子を表示する

これはついでなんですが、Macの初期設定ではファイルの拡張子が表示されないので、表示するように設定しておきます。

このprofileというファイルはJPGなんですけど、パッと見ただけでは拡張子がないので何のファイルか分かりません。

テキストを作成した時に何のファイルか分かりやすくもなります。

 

Finder→環境設定を選択します。

「すべてのファイル名拡張子を表示」にチェックします。

 

これでファイルの拡張子が表示されました。

 

これでHTMLとCSSを勉強する環境設定は終了です。これからどんどんコードを書いて一緒に頑張っていきましょう。

まとめ

小学校でもプログラミングが必修化されるようなので、僕も一応まだ若者なので負けないように頑張りたいと思ういます。最近は、中学生でも自主的にプログラミングをゴリゴリやっている人がいるみたいです...

だらだらと大学生活を消費していては勿体無いので、自分のペースではありますが気合いを入れて案件をこなせるレベルには到達したいと思います。

 

↓参考書はこれだけを使って勉強していくつもりです。あとはネットで詰め込みます。

コメント