見出し画像

非エンジニアのスタートアップ 0 年生 ( 2. HTML、CSS、JavaScript の基本 )

furuuchi

こんにちは、株式会社ピケでサーバサイドエンジニアをしている古内です。

こちらの記事は【 2. HTML、CSS、JavaScript の基本 】になります。

1. サービス開発に必要なこと
2. HTML、CSS、JavaScript の基本 ( 本記事 )
3. Python の基本
4. Docker の基本
5. Django で開発
6. GCP にデプロイ

目次

1. この記事について
2. HTML
3. CSS
4. JavaScript
5. まとめ

1. この記事について

前回の記事を読んでいただいた方はわかっていると思いますが、このシリーズの記事の目標は勉強ではなくリリースなので多少わからないことがあっても進んでください。

必要なときに調べましょう！

それでは本題に入ります。

よく HTML、CSS、JavaScript セットで書かれている記事があると思います。

これは、HTML、CSS、JavaScript がブラウザ上 ( フロント ) の技術のまとまりだからです。

そのためこの記事でも一気通貫してフロントの基礎だけ書いていこうと思います。

まず、記事を読み始める前に HTML、CSS、JavaScript のイメージをを人間に例えると

HTML が骨、CSS が皮膚、JavaScript が筋肉のような関係になります。

骨 ( HTML ) が人体 ( Web ページ ) の基盤になり、皮膚 ( CSS ) によって色や厚みを持ち、筋肉 ( JavaScript ) で動くイメージです。

このイメージを持ちながら読んでいただけるとわかりやすいかと思います。

2. HTML

HTML は文章の構造を定義するものです。

例えば、この記事でもタイトルの「知識はないけどサービスを作りたい ( HTML、CSS、JavaScript の基本 ) 」があって見出しの「 2. HTML 」があってそれについての文章があります。

これからやることは

各文章の役割をタグで宣言する作業になります。

では早速 HTML を見ていきましょう。

----- HTML の決まり文句 -----

<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

「 ... 」以外の部分が決まり文句になります。

html タグは HTML を書きますの宣言です。

head タグはブラウザ上に見えないけど必要な情報を書く。

body タグはブラウザ上に見える情報になります。

最初はこの認識で大丈夫です。

お気付きかもしれませんが、タグには始まりと終わりがあります。

始まりは <html>、終わりは </html> のよう終わりのタグには「 / 」が入ります。

これから勉強する部分は「 ... 」の部分です。


----- ブラウザに文字列を表示してみる -----

ここから HTML を書いてブラウザで表示するので、手元のパソコンで試してみたい方は以下をやってください。

1. 好きな場所に html フォルダを作る
2. html フォルダ内にメモ帳やエディタで index.html ファイルを作る

以下のコードは index.html です。

<html>
  <head></head>
  <body>
    <h1>わたしのブログ</h1>
    <p>
      私はサーバサイドエンジニアです。
    </p>
  </body>
</html>

このコードを index.html に保存してブラウザ上にドラック & ドロップしてみてください。
以下の画像のような表示がされます。

body タグ内に書いたコードが表示されました。
このコードには h1 と p タグがあります。

h1 タグは見出しになります。
p タグは段落（文章）になります。

このように HTML のほとんどの作業は body タグ内に 各役割のタグと内容（文章等）を書いていく作業になります。

タグには

・h1
・h2
・p
・div
・img
・a

など他にも様々なものがあります。

たくさんタグがあるので全部覚えるのではなく、必要なときに調べて使うことをおすすめします。

----- タグの属性 -----

各タグには属性を持ちます。

属性とはタグに対して付加的な情報を与えるものです。

具体例を見るために以下のコードを index.html に保存してください。

<html>
  <head></head>
  <body>
    <h1>わたしのブログ</h1>
    <p>
      私はサーバサイドエンジニアです。
    </p>
    <a href="https://pique.co.jp/">会社ページ</a>
  </body>
</html>

先ほどと同じようにブラウザで表示してみると

最初の状態と比べて

<a href="https://pique.co.jp/">会社ページ</a>

が追加されました。

この「会社ページ」をクリックすると https://pique.co.jp/ に遷移します。

これは「会社ページ」の a タグに href 属性を付与した結果です。

属性には href 以外にも

・class
・id
・src

など他にも様々な属性があります。
属性もたくさんあるので全部覚えるのではなく必要なときに調べることをおすすめします。


3. CSS

続いて CSS です。

CSS は見た目を定義するものです。

先程作った html フォルダ内に style.css の名前でファイルを作ってください。

CSS も HTML と同様にメモ帳やエディタを使ってファイルを作ります。

以下のコードを style.css に保存します。

h1 {
  color: red;
}

次に index.html の内容を以下に変更して保存します。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>わたしのブログ</h1>
    <p>
      私はサーバサイドエンジニアです。
    </p>
    <a href="https://pique.co.jp/">会社ページ</a>
  </body>
</html>

変更点は index.html の head タグ内に

<link rel="stylesheet" type="text/css" href="style.css">

が追加されました。

これは style.css を読み込む宣言になります。

ブラウザで index.html を表示してみると

「わたしのブログ」が赤文字になりました。

これは CSS によって見た目が変更された結果です。

CSS はセレクタ、プロパティ、値の 3 つの定義で作られます。

# style.css
h1 {
  color: red;
}

# 意味
セレクタ {
  プロパティ: 値;
}

style.css の h1 がセレクタ、color はプロパティ、red が値になります。

順番にセレクタ、プロパティ、値の説明をします。


----- セレクタ -----

セレクタはどのタグに対して見た目を変更するか指定する定義です。

style.css では h1 を指定しているので index.html 内のすべての h1 が赤文字に変更されます。

セレクタはタグ名以外にも class 属性や id 属性に対しても指定可能です。

index.html を以下の内容に変更して保存します。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>わたしのブログ</h1>
    <p class="text">
      私はサーバサイドエンジニアです。
    </p>
    <a id="company" href="https://pique.co.jp/">会社ページ</a>
  </body>
</html>
 タグに class="text" と a タグに id="company" を追加しました。

変更点は p タグに class="text" と a タグに id="company" を追加しました。

style.css を以下の内容に変更して保存します。

h1 {
  color: red;
}

.text {
  color: blue;
}

#company {
  color: green;
}

ブラウザに表示してみると

各文章の色が変わりました。

.text セレクタは class="text" を指定したもの、 #company セレクタは id="company" を指定したものになります。

つまり、class を指定したい時は「 . 」を、id を指定したい時は「 # 」を先頭につけて指定するということです。

また、セレクタは「 h1 .heading { ...  」のようにタグ名と class を組み合わせたり、タグ名とタグ名の組み合わせたり様々な表現ができます。

組み合わせや他のセレクタも全部覚えるのではなく必要なときに調べましょう。


---- プロパティ -----

プロパティは見た目の何を変更するかの定義です。

style.css だと color プロパティによって文字の色を変更しています。

プロパティは 1 つのセレクタに対して複数定義することもできます。

h1 {
  color: red;
}

.text {
  color: blue;
  font-size: 40px;
}

#company {
  color: green;
}

「私はサーバサイドエンジニアです。」の文字のサイズが大きくなりました。

このように文字の色と大きさを同時に変えることができます。

プロパティには

・margin
・padding
・width
・height
・display

など様々あるので必要なときに調べましょう。


----- 値 -----

値はどれだけ見た目を変更するかの定義です。

font-size プロパティを 10px から 40px に変更すれば文字列が大きくなります。
color プロパティの値に 16 進数を指定すれば自由に細かい色を指定できます。

また、指定する値の単位を変えることによって絶対的か相対的の指定もできます。

絶対的なケースだと値に 50px を指定すると 50px で表示されます。
相対的なケースだと値に 50% を指定すると画面に対して半分で表示されます。

また、プロパティによって入る値は変わります。

値はプロパティによって指定できるものが変わるのでプロパティを調べたときに確認すれば大丈夫です。


4. JavaScript

最後に JavaScript です。
ここまで HTML、CSS について書くのは大変でしたけど、JavaScript も頑張って書いてみます。( ここまで全部読んでいただいた方も大変だと思います )

今までの内容はプログラミングではありませんでした。
ここからはプログラミングです。

ですが、プログラミングの概念については次章の「 3. Python の基本 」で書きます。

ここでは、JavaScript でできることだけを説明します。

まずは html フォルダ内に index.js を作ります。

例のごとく JavaScript もメモ帳やエディタで作ります。

次に index.html を以下の内容に変更して保存します。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>わたしのブログ</h1>
    <p class="text">
      私はサーバサイドエンジニアです。
    </p>
    <a id="company" href="https://pique.co.jp/">会社ページ</a>

    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

変更点は body タグの終わり際に

<script type="text/javascript" src="index.js"></script>

を追加しました。

終わり際に書いた理由は、JavaScript で操作できるのは読み込まれた HTML だけだからです。

そのため HTML すべて読み込んだあとに JavaScript を読み込んでいます。

以下のコードを index.js に保存してください。

var companyLink = document.getElementById("company");

// カーソルが「会社ページ」の上にある時に色をピンクにする
companyLink.addEventListener("mouseover", () => {
  companyLink.style.color = "pink";
}, false);

// カーソルが「会社ページ」の上以外にある時に色を緑にする
companyLink.addEventListener("mouseout", () => {
  companyLink.style.color = "green";
}, false);

ブラウザに表示すると

「会社ページ」にマウスを乗せるとピンクになりました。

( 余談ですが script タグを body タグの始まりに書くと動かないことが確認できます。 )

画像のように CSS を変更することもできますし HTML の内容も変更できます。
また、 HTML の追加、削除もできます。

index.js のざっくりな説明をしますと

var companyLink = document.getElementById("company");

で companyLink に id="company" のタグ TODO 

次にマウスが上にあるときのイベントを登録します。

companyLink.addEventListener("mouseover", () => {

このコードで、先程宣言した companyLink に対してイベントを登録します。

次にイベントが発火したときにする動作を定義します。

companyLink.style.color = "pink";

このコードでイベントが発火したときに文字をピンクにしています。

テキストを緑に戻す処理も似た感じです。

かなりざっくりしすぎてわかりにくいと思いますが今は JavaScript で動的に HTML や CSS の操作できると思ってください。

次章のプログラミングの概念でなんとなく理解できるようになると思います。

JavaScript と Python って違くない？と思われますがプログラミングの概念はほとんど一緒なので概念さえ覚えてしまえば JavaScript だろうが Python だろうがわかってしまうということです。

5. まとめ

初心者の方になるべく細かいことは抜きにして最低限必要だと思うものに限定して書いてみました。

各ファイルを作るにあたってメモ帳やエディタを使っていましたが今後出てくる Python や Dockerfile 等も同じになります。

一度読んでみて理解できないから「他の記事を読む」、「もう一回この記事を読む」などされるかもしれません。

個人的には概念や用語だけ覚えれば良いと思っています。
私も最初は網羅的に覚えることに必死でしたが、実際にサービスを作ってみて都度調べて覚えたことのほうが多いです。

さくさく進めましょう！


=======================================
PR
古内開発教室始めてみました！
この記事読んだけどもうちょっと知りたい！
自分ひとりだと心細い！
そういった方がいましたらぜひこちらを見てください！
古内開発教室
=======================================



次の記事 3. Python の基本
前の記事 1. サービス開発に必要なこと

この記事が気に入ったらサポートをしてみませんか？