HTMLとCSSの基本的なこと

HTML

ウェブサイトに表示される情報です。

css

HTMLに記載された情報を装飾する機能です。

head要素

ウェブサイトの情報や、参照するCSSファイルを記載する部分です。記述した情報は画面上には表示されません。

body要素

画面上に表示したい情報を記載します。
HTMLはタグで囲みます。例えば

記述する内容となります。終了タグには「/」を必ず入れます。

<!DOCTYPE HTML>

HTML文章であることを宣言する要素です。

＜html＞...＜/html＞

HTML文章の始まりと終わりを示す要素です。

＜span＞〜＜span＞

＜span＞～＜/span＞で囲った部分をインライン要素としてグループ化することができるタグです。

＜meta＞

文章に関する情報を指定する時に使用します。charset="UTF-8"は文字コードを指定するもので、この記述が無いと文字化けしてしまいます。
【例】

<meta charset="UTF-8">  #閉じタグはないです

＜title＞...＜/title＞

ウェブサイトのタイトルを記述する場所です。
【例】

<title>Qiita</title>

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Qiita</title>
  </head>
  <body>
  </body>
</html>

上記みたいな感じです。

head要素からCSSを呼ぶ

head要素内に、HTMLとペアになるCSSのファイルを指定します。
【例】

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Qiita<</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  </body>
</html>

上記でstyle.cssを呼び出せるようにしました。
＜link rel="stylesheet"＞でCSSファイルを指定し、hrefには実際のファイル名を記載します。hrefはリンク先の場所を指定します。

body要素の中身の記述

【例】

〜省略〜
 <body>
    <h1>
      おはよう
    </h1>
    <p>
      こんにちは
    </p>
    <b>
      おやすみ
    </b>
  </body>
〜省略〜

上記で記述した文字が出ます。

＜h1＞...＜/h1＞

文章の見出しを指定します。＜h1＞...＜/h1＞で囲むと文字が太く大きく表示されます。h1〜h6まであり、h1が一番大きくh6になるにつれ文字が小さくなります。

＜p＞...＜/p＞

文章の段落を表します。

＜b＞...＜/b＞

文字を太くします。

ブロックレベル要素

ウェブデザインにおける箱となる要素の事をです。＜h1＞...＜/h1＞や＜p＞...＜/p＞はブロックレベル要素です。

インライン要素

主には文字の修飾です。＜b＞...＜/b＞インライン要素です。

cssの記述

基本の形はセレクタ { プロパティ: 値; }となります。
【例】

style.css

p {
  color: red;
}

上記の記述でp要素のこんにちわの色が赤になりました。もしp要素が他にも記述してあったら全ての要素が適応されます。

class属性

要素に対して名前がつけられます。
【例】

<p class="top">
  おはよう
</p>

classセレクタ

class名をセレクタとして使用することができます。記述するときは.クラス名で指定します。
【例】

.top {
  color: red;
}

これでp要素内のclass="top"の色が赤くなります。

id属性とidセレクタ

【例】id属性

<p id="top">
  おはよう
</p>

さっきと違うのはclassがidになっています。
【例】idセレクタ

#top {
  color: red;
}

さっきと違うのは.が#になっています。
classとidの使いはclassは同じクラス名を複数回使えます。idは複数回使えないので、重要なところに使う感じです。