プログラミングで創ろう　稼ごう　仕事を自動化しよう

わかりやすい！初めてのHTML/CSS　Web制作で副業を

  • 2020年8月24日
  • 2022年1月30日
  • HTML/CSS
  • 11view
HTML/CSS
HaChi
HTMLは毎日見ているはずです。GoogleのページはHTMLで作られています。
目次

VS Codeをインストールする

プログラムを書くのにはエディタと呼ばれるソフトウェアが必要です。本説明では「Visual Studio Code」を使います。略してVS Codeには、プログラミングに便利な機能がたくさん備わっています。インストール手順を解説していきます。

VS Codeダウンロードページ

上のリンクからダウンロードページへとびます。次にインストールするためのファイル「インストーラー」をダウンロードしてください。MacとWindowで分かれているので、パソコンに合わせてインストールをしてください。

あとは指示に従ってVS Codeをインストールしてください。

VS Codeを開こう

Windowsではデスクトップのショートカットをダブルクリックして起動します。Macの場合はアプリケーションフォルダーのVisualStudioCode.appをダブルクリックして起動します。VSCodeを日本語化します。現時点では画面表示が英語になっています。公式の拡張機能をインストールして日本語化行います。画面左端の四角形が４つかかれたボタンをクリックして、検索欄でJapsneseと入力してください。そして「Japanese Language Pack for Visual Studio Code」をインストールしてください。

HTMLをかいてみよう

ファイル作成と保存
まず新しいファイルを作成します。メニューバーのファイルをクリックし、新規ファイルをクリックします。次に作成したこのファイルを名前を付けて保存してみましょう。メニューバーのファイルをクリックし、名前を付けて保存をクリックします。保存先にデスクトップフォルダを指定し、ファイル名にindex.htmlと入力したら保存ボタンをクリックします。

ここの.htmlの部分を拡張子といいます。ファイルの種類を示しています。例えば、テキストファイルなら.text　、Wordファイルなら .docxです。
VS CodeでHTMLを書いてみましょう。VS Codeの画面右下の「プレーンテキスト」を「HTML」と入力して変えます。次に半角で ! と入力し 、tabを押しましょう。HTMLファイルの雛形(テンプレート)が自動で入力されます。この素早く入力するするための仕組みのをエメットと呼びます。

HTML 文書の構造

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

この中にあるものは以下の通りです。

  • <!DOCTYPE html> — 文書型宣言です。昔々、 HTML がまだ出来たばかりの頃 (1991～2年)、文書型宣言は HTML ページを正しい書き方がなされているかを示すルールセット (自動エラーチェックなどの便利なもの) に関連付けさせる役割を担っていました。しかし、最近ではそのようなことを気にする人はいなくなり、うまく動くために存在するただの遺産となってしまいました。今はこれだけ知っていれば大丈夫です。
  • <html></html>— <html>要素です。この要素はページのすべてのコンテンツを囲み、ルート要素とも呼ばれます。
  • <head></head> — <head> 要素です。この要素は HTML ページの、閲覧者に向けて表示されないコンテンツをまとめるための入れ物です。<head>要素は検索エンジン向けのキーワードや説明書き、ページの見た目を変更するための CSS、文字コードの情報などを含みます。
  • <meta charset = "UTF-8"> — この要素は文書に対し文字コードを UTF-8 に設定しています。 UTF-8 には人類が使う言語の殆どの文字が含まれています。基本的には指定することにより文書に書いたテキストコンテンツを扱うことが出来ます。指定しない理由は特に無く、指定することで後から出てくる様々な問題を避けることが出来ます。
  • <title></title> — <title> 要素です。ページのタイトルを指定しています。このタイトルはページが読み込まれた時にブラウザのタブに表示され、ブックマーク（お気に入り）に登録した時の名前にもなります。
  • <body></body> — <body> 要素です。 <body> 要素はページの閲覧者に対して見せたいものすべてを含みます。文字、画像、ビデオ、ゲーム、再生できる音楽など、どんなものでもです。

そもそも HTML とは

HTML はプログラミング言語ではありません。マークアップ言語と言って、コンテンツの構造を決めるものです。 HTML は 要素の集まりでできています。要素とは様々なコンテンツがどのように見えるか、またどのように動くかを表現するためにタグで囲まれたまとまりです。タグは言葉や画像を表示したり、他のページに移動するハイパーリンクを作ったり、文字を斜体にしたり、大きくしたり小さくしたり、色々なことが出来ます。例えば、次の文を見てください。

My cat is very grumpy

上の文を単体で表示したいなら、段落タグ<p>で文を囲うことでこれが段落であると指定することができます。

<p>My cat is very grumpy</p>

HTML 要素の中身

この段落要素についてもうちょっと詳しく見ていきましょう。

要素は主に以下のようなもので構成されています:

  1. 開始タグ (opening tag): これは、要素の名前(今回は p)を山括弧で囲ったものです。どこから要素が始まっているのかやどこで効果が始まるのかを表しています。今回の場合どこから段落が始まるかを表しています。
  2. 終了タグ (closing tag): これは、要素名の前にスラッシュが入っていることを除いて開始タグと同じです。どこで要素が終わっているかを表しています。今回の場合どこで段落が終わるかを表しています。終了タグの書き忘れは、初心者のよくある間違いで、正しく表示されません。
  3. コンテンツ (content): 要素の内容です。今回の場合はただの文字です。
  4. 要素 (element): 開始タグ、終了タグ、コンテンツで要素を構成します。

要素は属性 (Attribute)を持つことが出来ます。このような感じです:

属性とは要素に対し実際には表示されない追加情報を含んだものです。ここでは class が属性の名前で editor-note が属性の値です。 class 属性を使って要素に識別するための名前を与えていて、後でこの要素を指定してスタイルをつけたり様々なことができるようになります。

属性は次のような形式です。

  1. 要素名(すでにいくつか属性がある場合はひとつ前の属性)との間の空白
  2. 属性名とそれに続く等号
  3. 引用符で囲まれた属性の値

要素のネスト

要素の中に他の要素を入れることも出来ます。これをネスト(または入れ子)と言います。もしあなたの猫が「とっても」機嫌が悪いことを表したいとしたら、「とっても」という単語を <strong> 要素に入れて単語の強調を表すことが出来ます。

<p>私のネコは<strong>とっても</strong>機嫌が悪い。</p>

しかしながら要素のネストは正しく行われなければなりません。上記の例ではまず始めに <p>要素が開始され、その次に <strong>要素が開始されています。そうしたならば、必ず <strong> 要素、 <p> 要素の順で終了しなければなりません。次の例は間違いです。

<p>私の猫は<strong>とっても機嫌が悪い。</p></strong>

要素は確実に他の要素の中もしくは外で開始し、終了する必要があります。上記の例のように要素が重複してしまうと、ウェブブラウザはあなたがしようとしていたことを推測してもっともよいと思われる解釈をするため、予期せぬ結果になることがあります。そうならないよう気を付けましょう！

空要素

コンテンツを持たない要素もあります。そのような要素を空要素 (empty elements) と呼びます。 <img> 要素を例に見ていきましょう。

<img src="images/firefox-icon.png" alt="My test image">

この要素は 2 つの属性を持っていますが終了タグ </image>はありませんし、内部にコンテンツもありません。これは image 要素はその機能を果たすためにコンテンツを囲うものではないからです。 image 要素の目的は画像を HTML ページの表示させたいところに埋め込むことです。

画像

 <img> 要素について見ていくことにしましょう。

<img src="images/firefox-icon.png" alt="My test image">

これは書いたところに画像を埋め込みます。画像ファイルのパスを値に持つ src (source) 属性を指定する事によってその画像を表示できます。

また、 alt (alternative; 代替) 属性も指定しています。これは以下の様な理由で画像を見られない人に向けて文字で説明をするものです。

  1. 目が不自由な人。著しく目の不自由な人はよくスクリーンリーダーと呼ばれるツールを使っていて、それは画像の alt 属性の内容を読み上げます。
  2. 何らかの理由で画像の表示に失敗した場合。例えば、 src 属性に指定したパスが間違っていたときなどです。ページを保存したり再読み込みしたりするとこのような本来画像があるべき場所に下記のような何かが表示されるでしょう。

alt 属性の内容は「説明する文」であるということが重要です。代替文は画像が伝えたいことをうまく言い表しているべきです。上の「My test image」はあまり良い例ではありません。 Firefox のロゴの代替文字列として適切なのは、「地球を囲む燃えるような狐の Firefox ロゴ」というようなものです。

あなたが用意した画像に良い代替文字列を付けてみましょう。

注記: アクセシビリティについて詳しくは MDN のアクセシビリティのページを参照してください。

テキストのマークアップ

この章では、文字列をマークアップするために使用する基本的な HTML 要素をいくつか見ていきます。

見出し

見出し要素は文書中の見出し、小見出しを指定することができるものです。通常の書籍でも主題、章題、副題があります。 HTML でも同じことが出来ます。 HTML では <h1> から <h6>の 6段階の見出しが用意されていますが、よく使うのはせいぜい 3 つから 4 つほどでしょう。

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

それでは、あなたの HTML の <img> 要素の上に適切なタイトルを付けてみましょう。

メモ: 見出しレベル1には暗黙のスタイルがあることがわかります。テキストを大きくしたり太字にしたりするために見出し要素を使用しないでください。これらはアクセシビリティやでSEOで使用されます。レベルをスキップせずに、ページ上に意味のある一連の見出しを作成してください。

段落

先に説明したように、<p> 要素は段落を示しています。通常の文章を書く時にはこの要素を頻繁に使うことになるでしょう。

<p>This is a single paragraph</p>

試しに <img>要素のすぐ下にいくつか段落を作り、文章を書いてみましょう。

リスト

多くのウェブのコンテンツはリストで出来ており、 HTML にはリストを表すための特別な要素が用意されています。リストは最低 2 つの要素を組み合わせて生成します。主要なリスト形式として番号付きリストと番号なしリストがあります。

  1. 番号なしリストは、お買い物リストのようにアイテムの順番が特に関係ない時に使います。番号なしリストは <ul> 要素で囲みます。
  2. 番号付きリストは料理のレシピのようにアイテムの順番が関係ある時に使います。番号付きリストは <ol> 要素で囲みます。

リストの中に入るそれぞれのアイテムは<li> (list item) 要素の中に書きます。

例えば、次の段落の一部をリストにしたい場合、

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

以下のようにマークアップします。

<p>At Mozilla, we’re a global community of</p>
    
<ul> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

あなたのページに番号付きリストと番号なしリストを追加してみましょう。

リンクはとても重要です ―― これがウェブをひとつのウェブにします。リンクを追加するには、シンプルな要素 <a>を使えばよいです。 a は “anchor” を省略したものです。段落中の文字をリンクにするには次の手順で行います。

  1. リンクにしたい文字を選びます。今回は “Mozila Manifesto” を選びました。
  2. 選んだ文字を<a>要素で囲みます。<a>Mozilla Manifesto</a>
  3. このように <a>要素に href 属性を追加します。<a href="">Mozilla Manifesto</a>
  4. このリンクがリンクしたいウェブアドレスをこの属性の値に書き込みます。<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

アドレスの先頭にある https:// や http:// の部分 (プロトコルと言います) を書き忘れると、予期せぬ結果となってしまうかもしれません。リンクを作ったら、ちゃんとそれが遷移したいところに行ってくれるかを確かめましょう。

href は属性名として変に思うかもしれません。覚えにくかったら、 href は hypertext reference を表しているということを覚えておきましょう。

もしまだやってないのなら、ページにリンクを追加してみましょう。

フロントエンドエンジニアになりたい人の Webプログラミング入門

全体のレイアウト

これから作っていくWebページは図のようなレイアウトになっています。
HTMLの構成は以下のようにしていきます。

<header>と<footer>

<div class=”header”>と<div class=”footer”>のような、ヘッダーとフッターのためのタグは非常によく使われるので、HTML5は<header>と<footer>というタグが用意されています。
<header>, <footer>を使う方が一般的なので、こちらを使いましょう。

トップ部分のレイアウト

次はトップ部分を作っていきます。
トップ部分の構造は図のようになっています。
順番に作っていきましょう。

背景画像を指定する

background-image

トップ部分の背景には画像を表示します。
CSSで背景画像を指定するにはbackground-imageプロパティを用います。
background-image: url(画像のURL);のように使います。

トップ部分のレイアウトを作ろう

背景画像の大きさを
指定する

background-imageで指定された背景画像は図のように表示範囲を埋め尽くすまで、繰り返し表示される性質があります。
background-size: cover;を指定すると、1枚の画像で表示範囲を埋め尽くすように画像の大きさが拡大縮小します。

トップ部分のレイアウトを作ろう

要素を中央に配置する

containerクラスを中央寄せにしましょう。
中央に寄せるためにはmarginの左右にautoを指定します。
marginにautoを指定するときは、必ずwidthを併せて指定します。
なお、上下のmarginにautoを指定することはできません。
このようなcontainerクラスを作る意味は今は理解しなくて大丈夫です。
後に便利になるので、作っておきましょう。


トップ部分のレイアウトを作ろう

背景画像の大きさを
指定する

background-imageで指定された背景画像は図のように表示範囲を埋め尽くすまで、繰り返し表示される性質があります。
background-size: cover;を指定すると、1枚の画像で表示範囲を埋め尽くすように画像の大きさが拡大縮小します。

トップ部分のレイアウトを作ろう

要素を中央に配置する

containerクラスを中央寄せにしましょう。
中央に寄せるためにはmarginの左右にautoを指定します。
marginにautoを指定するときは、必ずwidthを併せて指定します。
なお、上下のmarginにautoを指定することはできません。
このようなcontainerクラスを作る意味は今は理解しなくて大丈夫です。
後に便利になるので、作っておきましょう。

透明度、文字の間隔を調整しよう

透明度、文字の間隔を
調整しよう

完成物に近づけていきましょう。
今回は以下の二点に焦点をあてて学んでいきましょう。
・文字が透明である
・「LEARN TO …」の文字間隔が広い

透明度、文字の間隔を調整しよう

要素を透過させる

opacity

opacityプロパティを使えば要素を透明にできます。
透明度は0.0(完全に透明) ~ 1.0(完全に不透明)の数値で指定します。

透明度、文字の間隔を調整しよう

文字の間隔を指定する

letter-spacing

letter-spacingプロパティを用いることで文字の間隔を指定することができます。

ボタン部分を作ろう

ボタンを作っていきます。ボタンは<a>タグで指定します。
しかし<a>タグはインライン要素であり、インライン要素にはwidthやheightが指定できないなど不便な点があります。
これを解決する方法を学びましょう。

ボタンを作ろう

インラインブロック

inline-block

ブロック要素とインライン要素の特徴を併せ持つインラインブロック要素というものがあります。
インラインブロック要素はインライン要素と同様に横に並びますが、ブロック要素のように幅や高さをもちます。

ボタンを作ろう

display

display

<a>タグは初期状態でインライン要素になっていますが、displayプロパティを使うと、インラインブロック要素に変更することができます。
displayプロパティはblock（ブロック要素）, inline-block（インラインブロック要素）, inline（インライン要素）を指定することができます。

ボタンを作ろう

複数クラスの指定

ボタンのように、「共通の部分があるが、それぞれ小さい変化をつけたいとき」にはクラスの名前を複数指定すると便利です。
下図のように、半角スペースで区切って複数のクラスを指定することができます。

レイアウトを整えよう

レイアウトを整えよう

今回は以下三点に焦点をあてて学んでいきましょう。
・カーソルを乗せたときに色を変える
・ボタンを角丸にする
・テキストを中央に寄せる

レイアウトを整えよう

:hover

hover

カーソルが乗ったときの状態をhoverと言います。
CSSで、セレクタ:hoverとすることで、カーソルが乗ったときのCSSを指定することができます。


レイアウトを整えよう

レイアウトを整えよう

今回は以下三点に焦点をあてて学んでいきましょう。
・カーソルを乗せたときに色を変える
・ボタンを角丸にする
・テキストを中央に寄せる

レイアウトを整えよう

:hover

hover

カーソルが乗ったときの状態をhoverと言います。
CSSで、セレクタ:hoverとすることで、カーソルが乗ったときのCSSを指定することができます。

レイアウトを整えよう

border-radius

角を丸めるにはborder-radiusプロパティを用います。
数字が大きいほど角が丸くなります。

レイアウトを整えよう

text-align

text-alignプロパティを用いることで、テキスト等のインライン要素やインラインブロック要素の配置を指定することができます。
leftで左寄せ、centerで中央揃え、rightで右寄せに設定することができます。

レイアウトを整えよう

「margin: 0 auto」と
「text-align: center」

要素を中央寄せにする方法として、margin: 0 autoとtext-align: centerを学びましたが、それらの違いを整理しましょう。
containerクラスのように、広い範囲を囲うようなブロック要素の場合はmarginを、テキストやボタンのようなインライン要素・インラインブロック要素の場合はtext-alignを使うようにしましょう。

下図のように、ボタンにアイコンをつけましょう。

Font Awesomeとは？

アイコンを表示するにはFont Awesomeというものを使うと便利です。
たくさんのアイコンが用意されており、自分の気に入ったアイコンを簡単に使うことが出来ます。
https://fontawesome.com に詳しい使い方やアイコンの一覧が載っています。

アイコンを使おう

Font Awesomeの使い方

Font Awesomeは、以下の手順で使用することができます。
①Font AwesomeのCSSファイルを読み込む
②<span>タグにfaクラスとfa-アイコン名クラスを指定する
（Font Awesomeのサイトにアイコンごとのクラス名が載っています。）
これだけで簡単にアイコンを表示させることができます。

ヘッダーのレイアウト

次はヘッダー部分を作っていきましょう。
ヘッダーの構造は図のようになっています。
ヘッダーの背景色は少しだけ透明にします。

opacityとrgba

これまで要素を透明にするにはopacityを用いてきました。
しかし、opacityには要素の中身全てを透明にするという性質があります。背景色のみを透明にするには、rgbaというものを使う必要があります。
それを学んでいきましょう。

rgb

rgbaを学ぶには、まずrgbというものを理解する必要があります。
rgbは色の指定の仕方の1つで、3つの値の組み合わせで表示する色を決めます。色を指定するときは今まで使用してきた#ffffffのような記法を使ってもrgbを使っても構いません。

ヘッダーのレイアウトを作ろう

rgba

色を透明にしたいときは色をrgbaで指定します。rgbaは4つの値をコンマ（,）区切りで入れます。4つ目の値が透明にする度合いで、0 ~ 1の数値で指定します（値が小さいほど透明になります）。
opacityプロパティは要素全体を透過させますが、rgbaを使うとその色だけを透明にすることが出来ます。

ログインリンクを作ろう

次はログインリンク部分を作っていきます。

ログインリンクを
完成させよう

ログインリンクを完成させましょう。
以下二点の方法を学びます。
・hover時にアニメーション付きで色を変える
・ヘッダーの縦の中央にログインという文字を表示する

ログインリンクを完成させよう

transition

transitionを使うとアニメーションをつけることができます。
「変化の対象」や、「変化にかかる時間」などを指定できます。
「変化の対象」にはcolorなどのプロパティを指定しますが、allを指定すると全てのプロパティに適用出来ます。
transitionは多くの場合hoverと組み合わせて使います。

行間を指定する

line-heightプロパティを使うと、行の高さを指定することができます。
値が大きいほど行間が大きくなります。

ログインリンクを完成させよう

line-heightと
縦の中央寄せ

line-heightプロパティは本来行間を調整するためのプロパティですが、要素の縦方向の中央に文字を配置するのにも使えます。
line-heightプロパティの「高さの中心」に文字が配置されるため、要素の高さとline-heightプロパティを同じ値にすると、文字がちょうど中央に配置されるようになります。

ログインリンクを完成させよう

<a>タグをクリックできる
範囲

<a>タグはインライン要素なので、中身のテキストの部分しか大きさを持ちません。その結果、<a>タグをクリックできる範囲はテキストの部分だけになってしまいます。
<a>タグをブロック要素にすると、大きさが親要素いっぱいに広がるので、全体をクリックできるようになります。

一覧のレイアウト

一覧部分を作っていきます。
レッスン一覧部分は図のような構造になっています。
これらを1つ1つ作っていきましょう。
また、文字の太さを変える方法を学びましょう。

文字の太さを指定する

font-weight

font-weightプロパティを用いると文字の太さを変更することができます。normalまたはboldを指定します。
<h1>~<h6>の要素は初期状態でfont-weight: bold;となっているので、font-weight: normal;と指定すれば文字が細くなります。

相対的な大きさの指定

width

ボックスのwidthやheightをpxではなく%で指定すると、親要素に対してどのくらいの幅や高さを持つか指定することができます。

レッスン紹介部分の
レイアウト

レッスンの紹介部分は以下のようなレイアウトになっています。

レッスン紹介部分を
作ろう

レッスン紹介部分を作っていきましょう。
通常、HTMLでは要素同士が重なって表示されることはありません。
しかし、CSSを用いることで要素同士を重ねることができます。
今回は画像アイコンと文字が重なるようにする方法を学びます。

position: absolute;

HTMLの要素同士は通常重なって表示されることはありませんが、position: absolute;を使うと、要素同士を重ねて表示することが出来ます。
サイト全体の左上部分を基準とし、そこからの位置をtopとleftを用いて指定します。また、rightやbottomを併用することも可能です。

基準位置の変更

position: absolute;の基準位置はサイト全体の左上部分ですが、この基準位置は変更することが出来ます。
基準としたい親要素にposition: relative;と指定すると、その要素の左上部分が基準位置となります。

影をつけよう

ボックスに影を付けるためにはbox-shadowプロパティを用います。
以下の図のように「影の位置」と「影の色」を指定します。

cursor

cursorプロパティを用いることでマウスのカーソルが要素に乗ったときのカーソルの形を変えることができます。
タグによってcursorが初期状態で設定されているものもあり、例えば<a>タグは初期状態でpointerが設定されています。

ボタンを押したら
へこむようにしよう

ボタンを押したらへこんで見えるようにしましょう。
ボタンを押したときに以下の処理をすると、へこんで見えるようになります。
・影を消す
・ボタンの位置を影の分だけ下げる

:active

セレクタにactiveを用いることで、要素がクリックされている間だけCSSを適用することができます。
セレクタ:activeというように指定します。

CSSを打ち消そう

box-shadow: none;とすると、影を消すことが出来ます。
このように多くのプロパティはnoneを指定することによって消すことができます。

クリック時に変化をつけよう

position: relative;
による位置の変更

要素の位置を変更する方法を学びましょう。
前回position: relative;はposition: absolute;の基準位置を決めるために使っていましたが、要素の位置を変更するためにも使うことが出来ます。
position: relative;をtopやleftと併用すると、その要素を本来の位置からずらせます。

ボタンをへこませよう

クリック時に、以下の処理をすることによって、ボタンがへこんで見えるようになります。
・box-shadowをnoneにする
・position: relative;とtopによって影の分だけ位置を下げる

画面上に要素を固定する

position: fixed;を使うと、常に要素を画面上の指定した位置に固定させておくことができます。
位置は、top、left、right、bottomを使って指定します。

要素の重なりの順序を
指定する

z-indexプロパティは、要素の重なりの順序を指定する際に使用します。
z-indexは整数値で指定し、値が大きいほど上に表示されます。
z-indexプロパティは必ずpositionプロパティと併用する必要があるので、注意しましょう。

学習お疲れ様でした。

ここで瞑想やマインドフルネスでリフレッシュしてみませんか？瞑想・マインドフルネス

おすすめプログラミング独学本

 

最新情報をチェックしよう！

HTML/CSSの最新記事8件

>プログラミング　独学

プログラミング　独学

本当にプログラミングを学びたい人のためになるブログにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。

プログラミング独学
CTR IMG