CSS
HTML5

2-1.HTML/CSSの武器を学ぼう

More than 1 year has passed since last update.

このセクションでは、第1回講義で作成したサークルのホームページで登場している、HTMLのタグ(<>のこと)とCSSのプロパティ("height"などのこと)について重要なものに絞り、学んでいきましょう。

1.HTMLの重要タグ

1-0.定型文のおさらい

先週学んだ、HTMLを記述するときの"典型文"をおさらいしておきましょう。

homepage.html
<!DOCTYPE html> <!-- この文章がHTML文章であることを伝える要素です。-->
<html lang="ja"><!--言語の指定-->
  <head><!--ページに表示されない情報(サイトの裏側の設定)-->
    <meta charset="utf-8">
    <title></title><!--ブラウザのタブのタイトルを指定-->
    <link rel="stylesheet" href="./stylesheet/homepage.css">
  </head>
  <body><!--ページの見た目を作る部分-->

  </body>
</html>

一応、解説を記述しておきます。詳しく知りたい人は読んでおきましょう。

<!DOCTYPE HTML>
 この文章がHTML文章であることを伝える要素です。

head要素とbody要素
 htmlは主にhead要素とbody要素で構成されています。
 ⑴head要素
 メタ情報と呼ばれるサイト自体に関する情報を定義する部分です。
 つまり、サイトを閲覧する人には見せない裏側の設定です。

 head要素でよく使うものを紹介します。

要素名 使われる場面
title要素 サイトのタイトル名の設定する
link要素 スタイルシートを設定する (.cssのやつ)
script要素 JavaScriptを設定する
meta要素 ページの情報を定義する

特に、link要素内のhref属性については詳細に理解しましょう。
hrefの部分はHTMLから見て、どこにあるCSSを読み込むのかを明記する部分です。
HTMLから見て、どの階層にあるCSSファイルを読み込むのか、を記述することができればOKです。
記述の方法をまとめておくので、理解しましょう。

記述方法 意味
./(ピリオド1つ) 保存されているファイルと同じ場所を表す
../(ピリオド2つ) 1つ上の階層へ移動する
(フォルダ名)/ どのフォルダの中へ移動する(下位の階層へ移動する)

したがって、
./stylesheet/homepage.css
HTMLと同じフォルダから"stylesheet"のフォルダに移動し、"homepage.css"を読み込む

という意味だと理解できましたか?

わかった人は以下の練習問題にチャレンジしてみましょう!

<練習問題>
以下のフォルダ階層のとき、href属性はどのように記述すればいいか答えよ。
(ちなみにHTMLからHTMLを参照することもできます。リンクの時など。)
スクリーンショット 2017-11-25 12.09.22.png

問1 zinbeizame.htmlからfish.htmlを読み込む
問2 nokogiriei.htmlからkurodai.htmlを読み込む

(回答は最下部にあります。回答してから確認しましょう。)

 ⑵body要素
 箱の構成やテキストなど、実際に見た目に大きく反映される部分を定義していきます。
 body要素は数が多いので、具体的な紹介は後ほどしていきます。

③ meta charset="UTF-8"
  meta要素は、文章に関する情報を指定する要素です。
  charsetは文字コードを指定します。
  文字コードとは、コンピュータで各文字に割り当てられるバイト表現のことです。
  文字コードが違うと、文字化けすることもあります。
  文字コードは、UTF-8が主流になっています。

1-1. 再頻出のブロック要素

ブロック要素は言葉の通り、一つのブロック(箱)を形成する要素です。
ブロック要素の中でも再頻出の要素を3つ押さえておきましょう。

要素名 使われる場面
div divタグで囲った部分をブロックレベル要素としてグループ化することができるタグです
h1~h6 見出しを表示する
p 段落を示す要素 (paragraphの略)

※h1~h6は文字の大きさが異なります。h1が最も大きく、h6が最も小さいです。

1-2. "意味を持たせる"ブロック要素

上記ブロック要素の中でも、意味を持たせる場合(=他のエンジニアにコードを介して意図を届けたいとき)は、以下のような要素を用います。
ただ、必ず使わなくてはいけない、という訳では無く、あくまで推奨されているにすぎないため、初心者の方は上の3つで代替可能です。
(働きとしては"ただの箱"と同じ意味を持ちます。)

要素名 使われる場面
section 文書やアプリケーションの一部分となる、意味や機能のひとまとまりを表す時
article 要素内容を記事として配信する時
nav ナビゲーション (=ウェブサイト内の他のページへのリンクや、ページ内リンク)を表す時

 

1-3. "装飾"を担当するインライン要素

インライン要素についておさらいすると以下の通りでしたね。
インライン要素:主にブロックレベル要素の内容として用いられる要素で、テキストの装飾を担当します。

よく使われるインライン要素を紹介していきます。

要素名 使われる場面
span 強調する場合
img 画像を挿入する時
a リンクを指定する時に指定します。

要素名と使われる場面を押さえておきましょう。
記述方法は覚えるのでは無く、ググりながら書けるようになれればOKです。

その他細かい要素については、以下を見て少しずつ吸収していけばOKです。
HTML目的別タグ一覧

2.CSSの重要プロパティ

2-0. HTMLとCSSを結びつける"セレクタ"

HTMLとCSSを結びつけるセレクタについて、復習しましょう。
HTMLのどの部分にCSSを適用させるか、は非常に重要な部分です。
その、CSSを適用する対象のことをセレクタと言います。

 p要素に色をつける場合はCSSに以下のように記述することで、P要素が赤くなります。

スクリーンショット 2017-09-03 12.51.19.png;

一般化したものは以下のようになります。
スクリーンショット 2017-09-03 12.49.34.png;

また、セレクタには2種類あります。

idセレクタ:id属性はHTMLの文章の中でid名を一度のみ使うことができます。
classセレクタ:あるhtml要素に対してつける識別子です。

全体の中で1つしかない要素であること明示する場合はidを使いますが、登場頻度はあまり多くないため、
基本的にはclassを利用すると押さえておくと良いでしょう。

2-1."箱のサイズ"を指定するプロパティ

HTMLで作成した箱に対し、サイズを指定するプロパティは以下のwidthとheightです。

プロパティ名 役割
widht
height 高さ

表し方は以下のようになっており、%の指定は、親ボックス(1つ上の階層のボックス)の幅に対する割合、pxはスクリーンの1ピクセルの長さを1pxとした単位を指します。
width: 80%;
width: 100px;

2-2."余白"を指定するプロパティ

HTMLで作成した箱に対し、箱と箱の余白を指定するプロパティは以下のmarginとpaddingです。

プロパティ名 役割
margin 要素間の間隔(=外の箱、隣の箱との間隔)
padding 要素内の余白(wordの余白と同じ意味)

箱の境界線の厚みを示す"border"と合わせて、以下のイメージ図を押さえておくと良いでしょう。

box_model.jpeg

指定する時は、top/bottom/left/rightの四つの辺を指定することもできます。
幅の指定の仕方は下記の表のように表記します。

size-table.png

また、箱そのものを中央揃えしたいときは
margin: 0 auto;
です。これは、左右の値をautoにすることでブロック要素を中央に配置することができます。

箱の中の文字列を中央に揃えたいときは"text-align:center;"で配置できます。
押さえておきましょう。

2-3."横並び"を指定するプロパティ

2-4."配置方法"を指定するプロパティ

2-5."ホバー時"を指定するプロパティ

その他細かいCSSのプロパティについては、以下を見て少しずつ吸収していけばOKです。
CSS目的別プロパティ一覧


<練習問題 解答>
問1 zinbeizame.htmlからfish.htmlを読み込む

../../fish.html

(2階層上なので、../を2つ記述しましょう)

問2 nokogiriei.htmlからkurodai.htmlを読み込む

../tai/kurodai.html

(1階層上にいき、"tai"フォルダに行きましょう)