【挑戦企画】大学生のHTML&CSS入門!簡単なコードを書いてみよう〜2日目だよ〜

 

今週HTML&CSSを勉強中のはらくん(@harakunishere)です!

ちなみに前回はHTMLを書いていく準備として

Google Chrome と Visual Studio Codeをインストールしました。

 

【挑戦企画】大学生のHTML&CSS入門!コードを書く準備〜1日目だよ〜 ただいまHTML&CSSを一気に勉強していますはらくん(@harakunishere)です! 自分が勉強した内容な...

 

今回はいよいよcodeを少し書いていきましょう。

Visual Studio Code 使い方

起動からコードを書いていく流れを説明します!

HTMLでコードを書く準備

先ずはVisual Studio Codeのアプリを起動しましょう。

 

最初の画面はこんな感じですね

では

メニュー → 新規ファイル で新規ファイルを作成します。

 

そうしたら

もう一度 メニュー → 名前を付けて保存 の順番で名前を付けて保存します。

デスクトップなど分かりやすいところに保存しておくと良いでしょう。

”●●●.html”という名前にしましょう”.html”を付けることによって

今からhtmlという言語でコードを書いていきますよ〜って

認識させることができるようです。

僕は[index.html]という名前で保存しました。

 

そうするとこのようにアプリの右下の右端の方にHTMLといった文字が出てきました。

 

HTMLを触ってコードを書いてみよう

 

タグを学ぼう-見出しタグってなに?-

とりあえず何か書いてみましょう笑

今回、僕は僕のファンクラブの入会フォームを作っていきたいと思います!

 

ファンクラブ、、、、、(まあ。何も言わないでください)

 

こんな風にとりあえず打ってみます。

そして保存をクリック!

 

 

Google Chromeを開いて、作ったファイルをGoogle Chromeへドラック&ドロップします。

 

するとこんな風に表示されました!

 

今度は<h1></h1>で囲ってみましょう。

 

するとこんな風になります!

 

 

<h1><h1>で囲った部分が見出しのようになっていますよね

こういった<>で囲まれたものをタグと言います

文字の前後をこのタグで囲いますが

初めのタグを開始タグ。後ろのタグを終了タグ。と言います。

 

そしてこの<h1></h1>というタグを見出しタグと言います。

見出しタグには

h1だけではなくh2.h3.h4.h5.h6の6種類のタグがあります。

これらの違いをみてみましょう。

 

このような感じになります!

一番上が見出しタグを付けなかった場合です。

そしてその下から順番にh1~h4までのタグで囲ってみました。

大きさが全然違いますよね。

見出しタグを使ってWebページに見出しを付けていく事になります!

 

タグを学ぼう-Pタグってなに?-

 

では、具体的にカエルファンクラブの入会申し込みフォームを作っていきます!

 

ページのタイトル:かえるファンクラブ入会申し込み<h1></h1>で囲みます。

 

<h1>かえるファンクラブ入会申し込み</h1>

 

次にこのフォームの説明を記載します。

フォーム説明 : 入会するには以下のフォームにご記入ください。

これを<p></p>というタグで囲みます。

詳しい説明は後に回しますね。

 

<p>入会するには以下のフォームにご記入ください</p>

 

こんな感じになりましたね。

先ほど勉強したように<h1></h1>で囲った

かえるファンクラブ入会申し込みは大きく表示されています。

 

<p></p>というタグについて説明していきます!

 

このタグはPタグと呼ばれているタグです。

P=パラグラフ(の頭文字)=段落ですね。

なのでこのPタグで囲む事によって段落付けをすることが出来ます。

 

通常一つのまとまった文章を囲むようです。

 

タグを学ぼう-inputタグってなに?-

 

ここでは最初に完成したページをみてみましょう。

 

このページを作っていきます。

今まで勉強したのは見出しタグPタグでしたね。

これら二つのタグを使っても上の画像にあるような色んな入力欄を作ることはできませんよね。

 

この入力欄を作ったりできるのがinputタグというものです。

 

基本的な形は<input type=”●●” name=”●●”>です。

inputタグは今まで勉強したh1やPタグとは違い、終了タグがありません。

また何やらinputの後ろに type=”” name=”” というのがあります。

 

先ずは、typeについて説明します。

 

はじめに説明したとおりinputタグは

登録ボタンを作ったり入力フォームを作ったりと色んな入力フォームを作ることが出来ます。

逆に言えば、どの入力フォームを作るのか?。

指定してあげないといけない!ということですね。

 

その指定する場所がtype=”●●”の部分なわけです。

このの部分の種類に関しては以下のサイトを参照してみてください!

inputタグで使う色んなtypeについてのサイト

ちなみにこのタイプの種類についてtype属性と言います。

 

今回は

名前とメールアドレスとパスワードを入力するフォームを作っていきます。

 

名前の入力フォームに使うtype属性:type=”text”

これは一行のテキストボックスを作成し、自由に文字を打ち込めます。

メールアドレスの入力フォームに使うtype属性:type=”email”

~@~といった形を打ち込めます。

パスワードの入力フォームに使うtype属性:type=”password”

パスワードを打ち込むことが出来ます。打ち込んだ後の文字列が●で隠されます。

 

次にnameの説明をします。

nameとは入力した文字がどんな種類の文字なのかをプログラムに認識してもらうために付けるものです。

本当に名前みたいですね。

分かりやすい名前を書いておきましょう。

 

ちなみにこのname=”●●”という形で指定されるものをname属性と言います。

今回は

名前のname属性:name=”text-name”

メールアドレスのname属性:name=”mymail”

パスワードのname属性:name=”passcode”

としました。

 

実際にはこんな感じで打ち込んでいく事になります。

 

name属性の後ろにあるplaceholderというのはあとで説明するので無視してください!

placeholderは書かなくても大丈夫です!

 

タグを学ぼう-buttonタグってなに?-

 

もう一度先ほどの画像をみてみましょう。

 

登録ボタンというのがありますね。

今度はこの登録ボタンを作るのに使うのがbuttonタグです。

 

buttonタグの基本的な形は<button type=”●●”>●●</button>です。

buttonタグで囲った画像やテキストなどをボタンにすることが出来ます。

 

今回のbuttonタグは先ほどのinputタグとは違い終了タグがありますね。

 

buttonタグにもtype属性を付けていきます。

今回はtype=”submit”というtype属性を使って送信ボタンとして使います。

submitは英語で提出するという意味の単語ですね。

 

したがって今回は

<buttton type=”submit”>登録する</button>

というコードを書きました。

 

ここまできたら

名前からパスワードまでをpタグで囲って段落分けしましょう。

例:<p>名前: <input type=”text” neme=”text-name”></p>

こんな感じですね。

 

以上のコードを書いて保存し、Webページを更新すると以下の画像のようになります。

(Webページの更新はページのURLが書いてあるところのクル♬としたマークを押します。)

 

おまけ-HTMLで入力欄に薄く文字を書いておく

 

おまけです。

 

こんな感じで最初から薄く文字を書いておく方法です。

この文字は入力フォームに打ち込み始めると消えます。

これがあると、どの入力フォームに何を入力したら良いかが分かりやすいですね。

この文字を書くためには

inputタグの属性を書くの部分に

placeholder=”●●”

というのを追加すれば大丈夫です。

 

●●の部分には薄く表示させたいテキストを打ち込みます。

 

例:<p>名前: <input type=”text” neme=”text-name” placeholder=”山本拓郎”></p>

 

以上です!

いかがでしたでしょうか?

 

なんか少しできるようになった気分になりませんか?

まだまだ勉強していきましょう!

 

 

【挑戦企画】大学生のHTML&CSS入門!基本的な構造を学ぼう〜3日目だよ〜 最近勉強にはまっているはらくん(@harakunishere)です! 今回はHTML&CSSに関して学んだことの続きを書い...