More than 3 years have passed since last update.

ググる！勉強会：HTML、CSS編【第１回】

Last updated at 2020-05-06Posted at 2020-05-06

ググる！勉強会：HTML、CSS編【第１回】

本日は、ググる！勉強会にお越しくださいましてありがとうございます。

本勉強会の目的

「実際にプログラミングしながら、ソフトウェア開発に必要なググり力(Google検索力)を身につけることです。」

第一回では、ここまで作ります。

下の空白部分は、第二回の「JavaScript」編で作ります。

注：本勉強会では、ググり方のテクニックを詳しく取り扱いません。
検索するための考え方を勉強します。

Google検索の詳細については、以下の記事が非常に参考になります。

Webサイトを構成する言語について

HTML

HTMLは、Webページの文書の各部分が、
どのような役割を持っているのかを示す(マークアップする)ための言語です。

例えば、見出し・段落など、
文書の中で各部分が果たしている役割が分かるように目印をつけます。

CSS

CSSとは、HTMLに色や大きさや背景などを加えて見栄えを良くするための言語です。

HTMLタグの説明

これはタグではありませんが、ブラウザにHTMLで書いていることを宣言します。

<!DOCTYPE html>

headタグはhtmlファイルの概要を表します。
headタグ内に内容(文字や画像)を表示させることは出来ません。

<head>
    <title>ググる！勉強会！</title>
</head>

titleタグで、サイトのタブの名前を決められます。

オンラインエディタ「liveweave」を使いコーディング

オンラインエディタ「liveweave」

HTMLで内容を表示させていく！

bodyタグは、実際にWebページに表示される内容を表します。

h1は、大きな見出しを作るためのタグです。
h5まであり、数字が大きくなるごとに大きさが小さくなります。

pタグは、段落を表すタグです。
文章を書くときに使います。

モダンなWebサイトでは、全てにpタグを使い、文章の空白をとり、見やすくするケースが多いです。

htmlタグで全てのタグを囲みます
ブラウザにhtmlで書かれていることを示します。

以上のことを踏まえて、下のHTMLをコピー＆ペーストします。

<!DOCTYPE html>
<html>
<head>
    <title>HTML, CSS and JavaScript demo</title>
</head>
<body>
    <h1>ググる！勉強会！</h1>
    <p>Webページには、様々な技術が使われています。</p>
    <p>この勉強会では、HTML、CSS、JSなどの言語を使い、</p>
    <p>１からWebサイト公開までの工程を体験できます。</p>
</body>
</html>

CSSで背景に色をつけてみます。

Google検索では、
「背景」と「やりたいこと」
を単語に分解して検索します。

【背景】
CSSを使っている

【やりたいこと】
背景に色を付ける

とにかく検索してみましょう

css　背景 色

Material Design Colors
から適当な色を選ぶと目に優しい配色ができます。

HTMLの<p></p>、pタグに色を付けます。


p {
  background-color: #303F9F;
}

しかし、上記の方法で背景に色を付けた場合、
シマシマ模様になってしまいます。

そこで、タグをグループ化する(まとめる)タグ、
divタグを使います。

<body>
    <div>
        <h1>ググる！勉強会！</h1>
        <p>Webページには、様々な技術が使われています。</p>
        <p>この勉強会では、これらの言語を使い、</p>
        <p>１からWebサイト公開までの工程を体験できます。</p>
    </div>
</body>

CSSでcolorは文字の色になります。

div {
  background-color: #303F9F;
  color: white;
}

背景に隙間ができる

検索キーワード

css 背景　隙間

ブラウザがもともと余白を作っているようです。

「リセットCSS」と検索すると、
さらに余白や文字の太さまでをきれいに消すためのテンプレートが出てきます。

body {
  margin: 0;
  padding: 0;
}

文字を中央に寄せたい

検索キーワード

css 文字　中央

text-align: center;を付け加えます。

div {
  background-color: #303F9F;
  color: white;
  text-align: center;
}

タイトルの背景の色を変えたい

先程のようにtext-align:center;
をつけるのですが、ひと工夫必要です。

この場合、タイトルのh1タグに「属性」をつけると簡単です。

CSSには、「class」と「id」という２種類の属性
が存在します。

この属性をHTMLのタグの中に書き込みCSSに認識させます。

「class」は、複数回使えるため、使い回したい要素に適用します。
「id」は、１回しか使えないため、１つだけにしか適用したくない場合に使います。

HTML

<body>
    <div>
        <h1 class="title-class">ググる！勉強会！</h1>
        <p>Webページには、様々な技術が使われています。</p>
        <p>この勉強会では、HTML、CSS、JSなどの言語を使い、</p>
        <p>１からWebサイト公開までの工程を体験できます。</p>
    </div>
</body>

font-sizeで文字の大きさを決められます。

CSS

.title-class {
    text-align: center;
    color: #303F9F;
    font-size: 50px;
    background-color: white;
}

文字を中央にすると同時に、
背景を白色にしてみました。

「class」では、.+クラス名をつけることでCSSが反映されます。

「id」は、#をつけます。

タイトル(文字)の上下の余白を設ける

検索キーワード

css 文字　上下　余白

line-height: 100px;
を使います。

CSS


.title-class {
    line-height: 100px;
    text-align: center;
    color: #303F9F;
    font-size: 50px;
    background-color: white;
}

画像を表示してみる

検索キーワード

html 画像　表示

<img src="https://i.imgur.com/L11kB5t.jpg">


<body>
    <div>
        <h1 class="title-class">ググる！勉強会！</h1>
        <p>Webページには、様々な技術が使われています。</p>
        <p>この勉強会では、HTML、CSS、JSなどの言語を使い、</p>
        <p>１からWebサイト公開までの工程を体験できます。</p>
        <img src="https://i.imgur.com/L11kB5t.jpg">
    </div>
</body>

画像(imgタグ)を直接text-align:center;で中央に寄せることはできません。
そのため、divなどのタグで囲んであげる事で、中央に配置できます。

全体の背景の色を変えたい

検索キーワード

css　全体　背景　色

body {
  margin: 0;
  padding: 0;
  background-color: white;
}

青い背景の高さを指定したい

＝ div要素の高さを指定したい

検索キーワード

css 要素　高さ

div {
  background-color: #303F9F;
  color: white;
  text-align: center;
  height: 500px;
}

高さの単位はpxだけでなく、%や、ブラウザの高さ(ビューポート)の高さに対する割合vhもあります。

全コード

HTML


<!DOCTYPE html>
<html>
<head>
    <title>HTML, CSS and JavaScript demo</title>
</head>
<body>
    <div>
        <h1 class="title-class">ググる！勉強会！</h1>
        <p>Webページには、様々な技術が使われています。</p>
        <p>この勉強会では、HTML、CSS、JSなどの言語を使い、</p>
        <p>１からWebサイト公開までの工程を体験できます。</p>
        <img src="https://i.imgur.com/L11kB5t.jpg">
    </div>
</body>
</html>

CSS


div {
  background-color: #303F9F;
  color: white;
  text-align: center;
  height: 500px;
}

.title-class {
    line-height: 100px;
    text-align: center;
    color: #303F9F;
    font-size: 50px;
    background-color: white;
}

body {
  margin: 0;
  padding: 0;
  background-color: white;
}