More than 5 years have passed since last update.

HTML・CSSの自分メモ

Last updated at 2017-02-16Posted at 2017-02-16

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

段落

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

JavaScript
Ruby
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の３つのレイアウトに分けてみる。

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の場合はドットが必要、タグの場合はいらない。

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up