【挑戦企画】大学生のHTML&CSS入門!コードを書く準備〜1日目だよ〜

 

ただいまHTML&CSSを一気に勉強していますはらくん(@harakunishere)です!

自分が勉強した内容なんかを少しづつ記事にしていこうと思います。

同じ大学生やプログラミングを始めたいな〜って思っている方に参考になれば嬉しいです。

 

HTMLやCSSは他のプログラミング言語よりも取っ付きやすいと思います!

僕も初心者なので一緒に頑張っていきましょう!

今日は簡単なとこをやっていきますね。

 

【挑戦企画】HTML&CSS入門!初心者からマスターするまでの流れ こんにちは!大学の友人関係の飲みや旅行が重なってお勉強ができていないはらくん(@harakunishere)です。。。 そ...

初心者の方へ、HTMLの作り方を見ていきましょう!

 

今回は最初の準備として用意したいツールをダウンロードしていきましょう!

Google Chromeをインストールしよう

Google  ChromeというWebブラウザをインストールしていきます。

Google Chrome = グーグル クロム です。

Google ChromeとはGoogleが開発したWebブラウザです。

 

 

Google Chromeではこんな風に開発者ツールを使うことが出来きます。

個人的にChromeのデザインは好きですね。

Google Chromeのインストールはこちら→Google Chromeインストール

Google Chromeインストールの手順

 

簡単にインストール方法を説明します。

まずはGoogle Chromeのインストール をクリックします!

 

 

こちらのサイトでCHROMEをダウンロードをクリックしましょう。

 

利用規約が表示されますので同意してインストールをクリックしましょう。

そうするとGoogle Chrome のファイルがダウンロードされます。

 

ダウンロードしたファイルをクリックすると

 

 

こんな画面が出てきます。

ここでGoogle Chromeのアイコン

 

このマークを下のファイルにドラック&ドロップしましょう。

 

ドラック&ドロップ

ドラック&ドロップはマウスの操作のひとつです。

移動させたい文字や画像やファイルの上で「左ボタン」をクリックし押したまま、目的の場所まで移動して(ドラッグ)、「左ボタン」を離す(ドロップ)操作です。

 

そうするとインストールすることができます。

 

Visual Studio Codeをインストールしよう

 

Visual Studio Codeはマイクロソフトが開発したテキストエディターです。

このVisual Studio Codeにプログラムを書いていく事になります。

 

Visual Studio Codeインストールの手順

 

まずはインストールしていきましょう。

こちらからインストールすること出来ます → Visual Studio Code インストール

Visual Studio Code インストール←こちらを先ずはクリックしましょう。

 

ダウンロードする画面に飛びますね。

ここでお使いの端末に対応するVisual Studio Codeをダウンロードしていく事になります。

対応するボタンをクリックしましょう。

僕の場合はMacなのでMacをダウンロードしました。

 

そしてダウンロードすると

 

 

このような画面になります。ダウンロードしたVisual Studio Codeのファイルを展開するとアプリをインストールすることが出来ます。

 

Visual Studio Codeってどんな感じなの?

 

Visual Studio Codeの画面を見てみましょうか。

 

これが一番最初の画面です。

ここから新規ファイルを作成してコードを書いていくんですよね。

 

何か作ってみましょうかね。。。

 

こんな感じでコードを書いていきます!なんかカッコいいですよね。この画面!

 

ぽちぽちぽち、、、

 

今回は「カエル日記」という文字と「HTML&CSSの作り方を記事にしていくよ!」という

文字をWebに表示させます!

 

Visual Studio Codeで作成したファイルをGoogle Chromeにドラックすると、、、

 

 

はい!こんな感じですね笑

 

以上がとりあえずコードを書いて練習していくための準備ですね。

では次の記事からはいよいよコードを練習していきます!

 

 

【挑戦企画】大学生のHTML&CSS入門!簡単なコードを書いてみよう〜2日目だよ〜 今週HTML&CSSを勉強中のはらくん(@harakunishere)です! ちなみに前回はHTMLを書いていく準...