Edited at

HTML・CSSの自分メモ

More than 1 year has passed since last update.

Webページを作るときに使用する「HTML」と「CSS」についてのメモ

Qiita上と実際のWebサイトでは出力結果が異なることがあります(見出しとか)。そのうち表示を変えます。

間違っている箇所についてはぜひご指摘頂けると嬉しいです。


HTML

テキストを「タグ」という印で囲むことで、テキストが見出しやリンクなどの意味を持つようになる。

終了タグには「/」を忘れないように!

head要素にはWebページの設定に関する情報を書く

一例


index.html

<head>

<meta charset="utf-8"> <!-- 文字コードの設定 -->
<title>HTML・CSSの自分メモ</title> <!-- ページタイトル -->
<link rel="stylesheet" href="stylesheet.css"> <!-- CSSの読み込み -->
</head>

body要素にはWebページに実際に表示される内容を書く


index.html

<!DOCTYPE html>  <!-- HTMLのバージョンを指定 -->

<html>
<head>
</head>
<body>
</body>
<html>

以下、body要素で主に記述すること


見出し

h1要素が一番大きな見出しで、h6要素が一番小さな見出し


index.html

<h1>Hello World</h1>

<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>

出力結果

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World


段落

h2やpタグで囲んだテキストは改行される


index.html

<p>hello</p>


出力結果

hello


コメント

コメントとして書かれたテキストはブラウザには表示されない


index.html

<!-- コメントだよ -->



リンク

a要素を使う

href属性を追加することでリンク先のURLを指定することが出来る


index.html

<a href="http://qiita.com/">Qiita</a>


出力結果

Qiita


画像の表示

img要素を使う。 終了タグはいらない。

src属性を追加することで画像のリンクを指定することが出来る

幅取るので画像は省略


index.html

<img src="https://~.jpg">



リスト

li要素を使って箇条書きを表現できる。

このとき、ul要素で囲むと黒点、ol要素で囲むと数字で表現される。

また、cssファイルでli要素にlist-styleプロパティを使ってnoneを指定すると、リスト先頭のマークを消すことが出来る。


index.html

<ul>

<li>C</li>
<li>Java</li>
<li>Python</li>
</ul>

<ol>
<li>JavaScript</li>
<li>Ruby</li>
<li>PHP</li>
</ol>


出力結果


  • C

  • Java

  • Python


  1. JavaScript

  2. Ruby

  3. PHP


入力

input要素で1行のテキスト入力を受け取れる 終了タグ不要。

textarea要素で複数行のテキスト入力を受け取れる


index.html

<p>input要素</p>

<input>

<p>textarea要素</p>
<textarea></textarea>



送信ボタン

input要素にtype属性を指定し、type属性にsubmitを指定すると送信ボタンになる (他も追記します)

value属性にボタンに表示されるテキストを指定できる。指定しなかった場合には自動で「送信」となる。


index.html

<input type="submit>  <!-- 「送信」ボタン -->

<input type="
submit value="保存"> <!-- 「保存」ボタン -->


CSS

HTMLとは別のファイルに記述する。

HTMLの各要素に対して細かくレイアウトすることができる。

このとき、対象の要素を「セレクタ」、変更項目を「プロパティ」という。


文字の色を変える

16進数のカラーコードで色を指定する。主要な色なら直接名前で指定できる。


index.html

<h1>赤です</h1>

<p>青です</p>


stylesheet.css

h1 {

color: red;
}
p{
color: #0000ff;
}

出力結果

赤です



青です


コメント


stylesheet.css

/*コメントだよ*/



文字の大きさ

font-sizeプロパティを使う

単位はピクセル


index.html

<h1>Hello</p>

<p>Hello</p>


stylesheet.css

h1 {

font-size: 10px;
}
p {
font-size: 40px;
}


文字のフォント

font-familyプロパティを使う

フォント名にスペースが含まれている場合は「"」でフォント名を囲む


stylesheet.css

h1 {

font-family: YuMincho;
}
p {
font-family: "Lucida Grande";
}


文字の背景色

background-colorプロパティを使う

16進数のカラーコードで色を指定する。主要な色なら直接名前で指定できる。


stylesheet.css

h1 { 

background-color: red;
}
p {
background-color: #0000ff;
}


要素の横幅・高さ

横幅:widthプロパティ、高さ:heightプロパティを使う

単位はピクセル


stylesheet.css

h1 {

width: 500px;
height: 80px;
}
img {
width: 500px;
height: 200px;
}


タグの名前付け

例として、li要素の色をそのまま変えようとすると、全ての選択肢で色が変わってしまう。

それぞれの要素に名前をつけるために class を使う


index.html

<ul>

<li class="redtext">HTML</li>
<li class="redtext">CSS</li>
<li>JavaScript</li>
</ul>


stylesheet.css

.redtext {  /*class名の前にドット(.)を忘れずに!*/

color: red;
}

出力結果


  • HTML

  • CSS

  • JavaScript


リストを横並びにする

floatプロパティを使うと、指定した要素を横並びにできる


index.html

<ul>

<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>


stylesheet.css

li {

float: left; /*左から順に横並び*/
float: right; /*右から順に横並び*/
}


要素の余白

padding: 値px; で、内側の上下左右に余白が追加される

上方向のみなら padding-top:、下方向は padding-bottom、左方向は padding-left、右方向は padding-right。 省略形もある。

margin: 値px; で、外側の上下左右に余白が追加される


stylesheet.css

p {

padding: 20px; /*上下左右*/
padding: 20px 10px 20px 10px; /*左から top,right,bottom,leftの順に余白設定*/
padding: 20px 10px; /*左から top+bottom,right+leftの順に余白設定*/

margin: 20px;
}



枠線(ボーダー)

border: 太さpx 種類 色; で、上下左右に線が追加される

それぞれの方向の指定は余白と同じ記述方法


stylesheet.css

p {

border: 5px solid red; /*赤枠の線で囲まれる*/
border-bottom: 1px solid #333; /*下部に枠線*/
}


ボックスモデル

余白とボーダーの関係

画像は http://creator.aainc.co.jp/archives/5952 より


Webページのレイアウト

要素をグループ化することで、それぞれにレイアウトを割り当てることができる。

例として、header、main、footerの3つのレイアウトに分けてみる。


index.html

<div class="header">

</div>
<div class="main">
</div>
<div class="footer">
</div>


文中の一部にCSSを適用

spanタグで囲むことで、その部分を指定してCSSを適用させることができる


index.html

<p>ここは<span>Qiita</span>です</p>



stylesheet.css

span {

color: red;
}

出力結果

ここはQiitaです


気づいたこと・注意点


  • タグと要素の違い。 要素は「タグと内容を含んだ文章全体のこと」を指す。タグは「要素のはじめと終わりを表現する<>のこと」

  • HTMLの要素には、前後で改行される要素「ブロック要素」(ex: div要素、h1要素)とされない要素「インライン要素」(ex: span要素、a要素)がある。

  • 要素を要素で囲むことを「入れ子」という。囲む方の要素を「親要素」、囲まれる要素を「子要素」と呼ぶ。インデントを忘れないように。

  • css、class名 子要素 {} とすることで、そのclassの要素のみにcssを適用できる

  • css、classの場合はドットが必要、タグの場合はいらない。

どんどん追記していきます!