WEBサイトを作ろう！HTMLとCSS入門 #1

プログラミング
目次
はじめに
事前準備
HTMLの基本
CSSの基本

はじめに

あなたが見ているこのサイトもFacebookもGoogleもブラウザを通じてみるサイトはほとんどがHTMLとCSSで作成されています。もちろん、ブラウザは機械なので「ここにボタンを配置する」「ここに縦横100pxの画像をのせる」などということを一つ一つなんの曖昧性もなく設定しなければなりません。それを日本語や英語で指定するとフォーマットが定まらず膨大な作業量になります。そこでどこかの偉い人たちがスーツを着て葉巻を片手に言いました（嘘です）。

「HTMLとCSSを全世界のWEBサイトの表示方法の規定とする」と

彼らのせいで私達人類はHTMLとCSSという謎で大文字で覚えにくい名前のカラフルな言語を勉強しなければなりませんでした。

事前準備

エディタのダウンロード

これからコードを書いていくにあたって道具が必要になります。

コードを書くのですから文字を編集するものが必要になります。

これはファイルを作成でき文字を編集して保存できるのであればなんでもいいです。

グーグルドキュメントでもいいです。本当です。

ですが、文字と記号の羅列をただ白黒で表して編集するのは少し大変です。

なので我々エンジニアはコーディング専用のエディタを所有しています。

コーディングをする際に便利な機能が詰まったもの

をダウンロードしましょう。

Sublime Text 3

a12e7424f3b7680357cf3f293773e15c.gif

下記のURLにアクセスし、ご自身の所有のパソコン（MacやWindows）に合わせたものをダウンロードしましょう。

Download - Sublime Text
www.sublimetext.com

1a22bfe3de4ca8536aedc7258678cde6.png

ダウンロードが完了して、ダウンロードしたファイルを開くと

以下のような画面が出てくると思います。ので、Sublime Textを移しましょう。

Sublime Text Download

以上でSublime Textはダウンロードできました。

続いて、Finderを開きApplicationsの中からSublime Textを開きましょう。

Screenshot 2018-10-14 21.05.51.png

そうすると下記のようなアプリが開けたはずです。

僕の画面は自分好みにカスタマイズをしているため少し色合いが違うかもしれませんが全く問題ないです。

以後はこれを使用してコードを書いていきます。

Screenshot 2018-10-14 21.07.24.png

プロジェクトの作成

それではコードを書くエディタをダウンロードすることができましたので、これから書いていくコードを保存する場所（フォルダ）を作成します。

今回は Documents の中に はじめてのHTMLとCSS というフォルダを作成しましょう。

026e56dd2cffa3b1e11ae6d8d9207307.gif

エディタの基本的な使用方法

それでは先ほど作成したフォルダをエディタで開いてみましょう。

プロジェクトの開き方

File > Open から はじめてのHTMLとCSS を選択しましょう

ec81afb9f00b5aae0a0089a0481134a4.gif

新規フォルダの作成方法

それでは今回のために#1という名前の新たなフォルダを作成します。

作成したいフォルダの親の上にマウスを載せた状態で、右クリックを押して New Folder を選択します。

エディタの下に名前の入力欄がでるのでそこに「#1」と入力してEnterを押しましょう。

e9d2dd1a7b7b39cc6cb18cd3272159af.gif

新規ページの作成方法

先程作成した#1というフォルダのなかに index.html という名前のファイルを作成したいと思います。

#1というフォルダにマウスを当てた状態で右クリックから New File を選択します。そうすると名前がついていないファイルが作成されますので、そのまま index.html と打ちファイルを保存します。

ファイルを保存する際はツールバーの File > Save からでも、

Macの場合は Command + S , Windowsの場合は control + S などのショートカットキーで保存できます。

ファイルの保存は頻繁に使用しますので、ショートカットキーを使用することをおすすめします。

e05de65e60387225c811c7a6a2c6e647.gif

拡張子とは

先程に新規ページ作成をした際に変わったファイルの名前で登録したことが気になっている人も多いのではないでしょうか。.html とはなんなのでしょうか。

そもそもパソコン上にあるファイルは全て何かの種類に分けることができます。例えば、一番見慣れたものだと画像ファイルの最後に、 .png .jpg .jpeg とあるのを見たとことがある人は多いと思います。

ドット( . )のあとにそのファイルのフォーマットの種類の名前を拡張子と呼びます。

便宜上、ファイルにはこのような拡張子をつけることになります。これらの拡張子によりどのアプリでそのファイルをい開けばいいのかなどがわかるからです。今回はHTMLのファイルなので .html というふうに拡張子をつけます。

HTMLファイルをブラウザで開ける

それでは現在Sublime Textで開いているHTMLファイル(index.html) をブラウザで開いてみましょう。Sublime Textはファイルを読み込んでそのまま文字として表示しますが、ブラウザでHTMLファイルを開くとWEBページとして開いてくれます。

Sublime Textから以下のようドラッグアンドドロップでHTMLファイルは開けます。現在はHTMLファイルに何も記述がないので真っ白のページが表示される状態になると思います。

ee14c1e5ad5a592758fc5709e49c7f6c.gif

HTMLの基本

HTMLの文法

自然言語にも文法があるようにプログラミング言語にも文法があります。ですが自然言語とは違ってかなり簡単なものなのでさくっと覚えてしまいましょう。

<タグの名前>...</タグの名前>

HTMLでは上記のようなタグと呼ばれるものをしようします。

ほとんどのタグは <>…</> のほうにペアで使用します。このときスラッシュ（/）ががあるほうを閉じタグといいます。これらタグで挟むことにより要素の階層構造を表すことができます。

HTMLの基本のフォーマット（テンプレート）

それでは実際のHTMLの基本となる構造を見ていきましょう。

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>...</body>
</html>

上記のコードはHTMLのテンプレートみたいなものです。コードを説明しますと、

まず１行目に <!DOCTYPE html>とあります。これはこのファイルはHTML5であると示す魔法の言葉です。

そして、2行目から4行目まで<html>...</html>で囲まれてますね。htmlタグはHTMLファイルを書くときの一番最上層に当たるタグです。これで全ての要素を囲むという作法みたいなものなので質問せずに黙って暗記しましょう。

次にhtmlタグの中にheadタグとbodyタグがあります。headタグでは主にそのページのメタ的な情報を記述し、bodyではそのページの実際の中身を記述します。今は正直何を言っているかわかんないと思いますが、使っているうちにわかってくるのでパニックになって叫ばなくても大丈夫です。今はただ bodyにページの中身を記述する ということを覚えておきましょう。

実際にHTMLを書いてみる

それでは実際にHTMLのコードを書いてブラウザで表示してみましょう！これで今日からあなたもプログラマーです。おめでとうございます。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

これは、h1タグと呼ばれるものです。その中に Hello World という文字をいれています。
h1と呼ばれるタグはheader（ヘッダー）の略で文字をこれのタグの中にいれると大文字の太字が表示されます。
主に見出しを表示させたい時に使用します。

ではこのHTMLファイルをブラウザで表示させてみましょう。先程ブラウザで表示させたページをリロードしましょう。

おめでとうございます！このように大きな文字で Hello World! と表示されたと思います！ちなみにプログラミングの世界で何かの入門した時にHello Worldという言葉を表示させる慣習があります。そのため「入門」というような意味があります。

classとid

HTMLには classとidという概念があります。どちらも名前付けの役割があります。後にCSSというものを紹介しますが、その時に特定の要素を選択しなければなりません。タグだけでは一つのファイルにいくつも同じものがあるので要素選択ができなくなります。そのために作成された機能がclassとidです。では先程作成したh1要素にclassとidをつけてみましょう。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1 id="myfirst-title">Hello World!</h1>
  </body>
</html>

実際にこのようにコードをこのように変えて、ブラウザをリロードしてみてください。

そいて右クリックから「要素の検証」を押してみてください。コンソールが開かれると思います。

Google Chromeを使用している方はMac: 「Command + Option + i 」、Windows: 「Control + Option + i」がショートカットキーになります。

一番左のタブのElement（要素）がそのブラウザが読み込んだHTMLを見ることができます。そこのh1の要素にclassとidがついていることを確認しましょう。この要素の検証はかなりよく使うので覚えておきましょう。

ブロック要素とインライン要素

HTML要素は主に２つの要素に分類されます。ブロック要素とインライン要素です。

ブロック要素

ほとんどのブロック要素はインライン要素と違い他のブロック要素とインライン要素を中に含めることができます。ブロック要素には以下のようなものがあります。

<address>, <blockquote>, <center>, <div>, <dl>, <fieldset>, <form>, <h1>-<h6>,
<noframes>, <noscript>, <ol>, <p>, <pre>, <table>, <td>, <tr>, <th>, <ul>, <section>,
<code>, <nav>

インライン要素

主にインライン要素のなかにはブロック要素を入れることはできませんが他のインライン要素を入れ子構造にすることは可能です。インライン要素には以下のようなものがあります。ほとんどは文章の一部として扱われます。

<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>

よく使う要素

「ブロック要素とインライン要素をたくさんリストされてもわかんないよ！」と皆さん思っているかもしれません。正直にいうと私も上記の要素をすべて知ってるわけではないです。それでは実際によく使用されている要素を紹介していきます。

<h1>, <h2>, <h3> … <h6>

これらはheader(見出し)の略です。番号が大きくなればなるほど小さな見出しを表します。

<div>

これはdivision(分割)の略です。これがHTMLの要素の中で一番良く使う要素です。意味は特にない要素ですが、画面の骨組みを組むために画面を分割するためのものです。ブロック要素の代表格と言っても過言ではありません。

<p>

これはparagraph(パラグラフ)の略です。主に文章を表示するために使用する要素です。例えばこの記事の文字もほとんどが<p>で囲まれています。

<ul>, <li>

これは<ul>はunordered list と list itemの略です。これらはリストを表示するために使用される要素です。以下が使用例です。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

CSSの基本

CSSの文法

指定したい要素 {
  プロパティ: 値;
}

CSSはHTMLの要素の飾り付けをする言語です。なので「どのHTMLの要素」を「どのように変更（飾り付け）するか」を記述します。要素の指定の仕方はいくつかの方法があります。今回は以下の３つを見ていきましょう。ちなみにこの「指定したい要素」に記入されるものはセレクタと呼ばれます。

  • タグの名前
  • class
  • id

ちなみに「プロパティ: 値;」はいくつあっても構いません。複数のプロパティを調整したい場合は以下のようにします。

セレクタ {
  プロパティ1: 値1;
  プロパティ2: 値2;
  プロパティ3: 値3;
}

それでは実際に例を見ていきましょう。

<h1 id="myfirst-title">Hello World!</h1>

例えば上記のようなHTML要素があったとします。これは上のほうで書いた見出しですね。今回はこの見出しの文字を赤くしてみましょう。

タグの名前

セレクタをタグの名前の場合を見ていきます。セレクタをタグの名前のみでする際はそのHTMLファイルにあるタグ（今回の場合はh1）すべてが対象になるため注意が必要です。

h1 {
  color: red;
}

class

次にclassをセレクタとして使用する際は「.」を前につけます。同じ名前のclassがあればすべてが対象になります。

.title {
  color: red;
}

id

idをセレクタとして使用する際は「#」をつけます。同じ名前のidがあれば該当する一番はじめのものが対象です。

#myfirst-title {
  color: red;
}

いかがでしょうか。このように要素を指定する際に

classとidの違い

軽く説明しましたが、classとidが「.」と「#」以外にも違いがあります。それは

classは同じ名前のものがあれば全てが対象になりますが、idは該当する一番始めの要素が対象になります

このことから、classでは同じ名前をつけても構いませんがidはかぶらないようにしましょう。さらに同じような飾り付けをしたい場合は一つ一つの要素に対して同じコードを書かないためにも同じclassの名前をつけてそれで指定してあげるのが原則になります。

入れ子構造の要素の指定

突然難しい言葉を使用して申し訳ありません。HTMLの要素は基本的に入れ子構造になっています。例えば、こちらのコードでは<html>を除いた全ての要素はhtml要素の中に入っていて、さらにhtmlタグの中のbodyタグの中にh1タグがあります。このような構造を入れ子構造と呼びます。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1 id="myfirst-title">Hello World!</h1>
  </body>
</html>

このような構造のものはセレクタにスペースを入れることで表すことができます。例えば、bodyの中のh1を表すときはこのようにします。

body h1 {
  color: red;
}

これは限られた要素の中でのみ、そのCSSを使用したい時に使うと便利です。

実際にCSSを書いてみる

それでは前置きがかなり長くなってしまいましたが、実際にコードを書いて反映させてみましょう。HTMLファイル何CSSを書くときは<style>というタグの中に記述します。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1 id="myfirst-title">Hello World!</h1>
  </body>
</html>
<style>
h1 {
  color: red;
}
</style>

このようにファイルを編集し、ブラウザをリロードしてください。赤い文字で 「Hello World!」と表示されたと思います。

このコードのセレクタは一番簡単なタグの名前ですが、class でも idでもできますのでぜひご自身でお試しください。

別のファイルにCSSを移す

一般的にCSSはHTMLファイルとは別に記述するものです。なので今回も別にファイルを作成してそこのコードを移した上でHTMLファイルからその新規ファイルを読み込みましょう。

新規CSSファイルを作成

今回はstyle.cssというファイルを作成します。CSSファイルの拡張子は.cssです。そこにCSSのコードを移しましょう。

現在このようなコードになっていると思います。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1 id="myfirst-title">Hello World!</h1>
  </body>
</html>

h1 {
  color: red;
}

しかし、これだけではHTMLファイルからCSSファイル（style.css）の読み込みができていません。HTMLでは読み込みをするための便利なタグがあります。linkタグを使用してそこのhrefアトリビュートをcssファイルに指定すると読み込みをしてくれます。

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

そして、このような読み込みは主に<head>の中に記述します

では最後にHTMLファイルの<head>の中に上のコードを入れてみましょう。そしてブラウザをリロードして「Hello World!」が赤い状態だったらOKです！

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1 id="myfirst-title">Hello World!</h1>
  </body>
</html>

お疲れ様でした！以上がHTMLとCSSの基礎知識になります。ゲームやスポーツと同じく、プログラミングもスキルなので実際に手を動かさないとできるようになりません。なのでこのように実際に手を動かすこと前提にした入門記事を書いてみました。次回もHTMLとCSSの基礎をもう少し書きますので、この記事が役に立ったやわかりやすかったと思った方はいいねやコメントを押して頂けると励みになります。記述ミスやわかりずらいところがあればコメント欄もしくは本サイトのコンタクトからお問い合わせください！

 

 

 

Naggi Club（ナギ倶楽部）ではプログラミング学習をサポートしております。

現役のシリコンバレーエンジニアが豊富な経験と知識により、挫折しないプログラミング学習を全力で提供します。

プログラミングに関する技術的な質問からスケジュール管理やモチベーション維持まで精一杯サポートさせていただきます。

詳しい情報はこちらからよろしくおねがいします。

シリコンバレーエンジニアがあなたのプログラミング学習を本気でサポートします　五石凪（シリコンバレーエンジニア）｜メンターに教えてもらおう
サポートによって生徒の方々はこのような実績を残しました長期インターン獲得単発エラーの解決プログラミングスクールのためのオリジナルサービス完成就職（就職紹介）案件（案件ご紹介）こんな人におすすめエンジニ....
menta.work

 

もし興味があり、ご登録の頂ける場合はこちらのリンクから登録いただけると５００円の割引がございます！

いつでも相談できるオンラインメンターをみつけよう｜MENTA
困った時にきける、相談できるメンターがいれば学習スピードがあがります。もう、Googleで数時間調べてばかりの日々は終わりです。メンターから学んで自分でつくれる力を身につけましょう。
menta.work

 

 

コメント

タイトルとURLをコピーしました