Help us understand the problem. What is going on with this article?

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は複数回使えないので、重要なところに使う感じです。

iverson3kobe0824
初学者です。習った学習を復習用で載せます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away