More than 1 year has passed since last update.

HTML/CSSの基本

自分用メモ

Last updated at 2023-05-04Posted at 2022-05-07

◆HTMLの基本

HTMLはツリー構造で記述（入れ子の形）

入れ子の例

<html>
|<head>
|| <meta>
|||<title>～（※一列で）
|||</title>
|</head>
|<body>
||<header>
||||<h1>～（※一列で）
||||</h1>
|||　：
||</header>
||　 ：
|</body>
</html>

HTML文書の先頭には「宣言文」が必要。
宣言文はバージョンによって異なり、HTMLのどのバージョンにより作成してるかを宣言する。
※HTML5では大幅に簡略化された（HTML5は「<!DOCTYPE html>」）
タグの形式：「属性="属性値"」を指定する。
入れ子ごとにTabや半角スペースで階層がわかるようにする！（実務では、ソースをいじるのは自分だけじゃないため）
見た目はCSSで整えるため、htmlで見た目はいじらない（意味通りに記述すること）
整える際は、横並び1pxのズレも許容しない（縦のズレは認識しにくいため、10pxも許容することはある）

( ..)φ一口メモ
サイトの横幅はYahoo!を基準にするとよい（Googleの基準に則っているサイトの代表として）

◆「210607.html」解説

■
コメントタグ。画面上に表示されない

■<html>～</html>

全てのhtmlタグ（<～>のこと）は、このhtmlタグの子孫要素（要素＝タグ）
このhtmlタグには属性としてlang属性を付与し、属性値としてどの国の言語で書かれたサイトかを指定する（日本はja）
htmlタグは子要素として<head>と<body>のみを持つことができる！！！！！（頭が上、体が下）

■<head>～</head>
head内では、タイトルを除きブラウザには表示しないものを指定していく。

サイトの定義（meta）
ページタイトル（title）
外部ファイルの読込（link）
CSSの記述（style）※基本はlinkで外部CSSを読込
先に実行しておきたいJavaScript（script）

■<meta>
以下の必要なものについて定義していく

文字コード：定義が必須！！！！！！（ないとtitleも文字化けするので、一行目で）
キーワード：現在不要だが、会社によっては指定している（現在はGoogleが参照していない）
説明文　　：なければ検索エンジンがサイト内文章から作ってくれるが、設定することが多い
著作権情報：設定しないことが大半（画面下に書くだけで済ますことが多い）
SNSとの連携：必要に応じて

【文字コードの指定】

日本語を使用する前に指定しなくてはならない（文字化け対策）
charset属性に属性値として文字コードを指定
現在のwebサイトでは日本語のコードはUTF-8を使用するのが一般的
（例）charset="UTF-8"

【文字コード／SNS以外】
name属性に指定するものを属性値として、

キーワード　name="keywords"
説明文　　　name="discription"
著作権　　　name="copyright"
制作者　　　name="author"
失効日　　　name="expires"
上記に設定する文をcontent属性の属性値として、「content="～"」

<meta name="discription" content="サイトの説明文">

【SNSとの連携】

サンプル

 <!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb# prefix属性値: http://ogp.me/ns/ prefix属性値#">
<!--
     「prefix属性」はsnsシェア用
     「prefix属性値」はtoppageなら「website」、下層ページは「article」
-->
	<meta charset="UTF-8">
	<title>ページタイトル</title>
	<meta name="description" content="ページの説明文">
	<!-- 以下のpropertyはsnsシェア用 -->
	<meta property="og:url" content="ページのURL">
	<!-- http://で始まる絶対パス -->
	<meta property="og:type" content="ページの種類">
	<!-- typeはtoppageならwebsite、下層ページはarticle -->
	<meta property="og:title" content="（サイト名＋）ページのタイトル">
	<meta property="og:description" content="ページの説明文">
	<meta property="og:site_name" content="サイト名">
	<meta property="og:image" content="SNSに出したいサムネイル画像のURL">
	<!-- http://で始まる絶対パス -->
</head>
<body>
</body>
</html>

■<title>～</title>

ページのタイトル（ブラウザのタブに表示）を設定する
設定するときは、どのサイトの、どのページか…をユーザがわかるようにすることが多い
「サイト名-ページ名」、「ページ名-サイト名」の形がよく見られる。

■<body>～</body>

ブラウザに表示する文や画像などを子要素として設定する
JavaScriptはこちらにも内に記述することができる

【見出しタグ】

<h1>～<h6>までの6段階。h1が最大、h6が最小！！！！！
見出しタグでh2～6を使用する場合、1ページにh1は1つのみ、順番を飛ばさず入れ子の関係を守る。
※html5では、W3Cが「見出しは全部h1を使用」を推奨している…が、Googleは「以前のやり方である段階的使用とサイトの評価に差を付けない」と明言している。
見出しタグは文字に関して通常の文字とは違う初期値が設定されている（CSSで変更可能）
※通常の文字が初期値で文字サイズ16px、太さが普通

見出し	サイズ	太さ
h1	通常×2	太字
h2	〃×1.5	〃
h3	〃×1.17	〃
h4	〃×1	〃
h5	〃×0.83	〃
h6	〃×0.75	〃

【段落タグ】

<p>～</p>：文章の段落を示す。
<br>　　：文章内で改行する。

★文章中の半角スペースについて
htmlは英語が基本のため、単語の区切りとして半角「1個」は空けられる。
2個以上連続の半角スペースは、「 」という制御文字を使用した時のみ可。

★改行について
brを使わなくても、横幅に応じて自動改行はされる。
半角英数の場合、英単語中途改行にならないよう半角スペースまで改行されない。

◆htmlで画像を表示する

■imgタグ

<img src="写真への相対パス" alt="画像のalt">

src属性…htmlファイルから画像ファイルへの相対パス
alt属性…画像のalt。読み上げブラウザや画像非表示設定のブラウザの時はこちらを使用
↑
画像を横並びにすると、スペースがなく、下が揃うようになっている
改行も半角スペースとして扱うため、改行するならタグ内の影響しない箇所

※imgはあくまで画像を表示するだけのものであり、書式上のものではない。見出しや段落、リスト、参考図表などのタグの子要素として使用する
　例）<h1><img～></h1>

注意！！
altが付けられないような飾り画像はimgタグで貼ってはいけない、背景にCSSで貼る
（文章と同格のものがimgタグ！）

■figure＆figcaptionタグ（参考図表）

画像や表などを本文の参考として表示する。参考図表は自動で左に余白（インデント）が入る

<figure>
    <img src="images/thumbnail_kansen_yobou_animal_h.jpg" alt="てあらいうがい">
    <figcaption>
        図表のキャプション（何の参考なのか記載）
    </figcaption>
</figure>

必ずfigureとfigcaptionはセット！

◆リンクの種類と貼り方

■aタグ…href属性（リンク設定）

<a href="遷移先">リンクを設定する文字や画像</a>

リンクには以下の４種類がある。

外部サイトへのリンク
→移動したいページの絶対パス(http://～)をhref属性に設定
同サイト内の別ページへのリンク
→移動したいページの相対パスをhref属性に設定（絶対パスでもいいが無駄多い）
同ページ内の任意の場所へのリンク
→移動したい任意のタグにid属性="任意のid名"を付け、href属性で"#id名"を指定
※idは同ページ内に同名が禁止、「#」付けない。「page_top」「main_content」などページ構造上からつけるとよい。
メールアドレス（メーラー起動）リンク
→指定したアドレス等が入力状態で、標準設定されているメーラーが起動

href="mailto:メアド?subject=件名&amp;cc=メアド&amp;bcc=メアド&amp;body=本文"
　　　　　　　　　　　　　　￣?でオプション　￣￣つなげるとき&amp;

※<a>は同様、書式とは違う。

【使い方１】←通常はこっち

見出しや段落、リストの一部（もしくは）全体の文字にリンクを設定

例

<p>～<a href="～">～</a>～</p>

【使い方２】←html5より可能となった

複数のタグを内包する形でリンクを設定

例

<a href="～">
　<h1>～</h1>
　<p>～</p>
</a>

( ..)φひとくちメモ
リンクに「target="_blank"」（新規タブ）はセキュリティ弱くなるので多用しない

◆リスト

リストには、以下の３種類が用意されている。

箇条書きリスト
順序付きリスト
定義リスト
「* 」などのリストマーカーはCSSで消すことができる。
ナビゲーションやパンくずリストは横並びでもこのリストを使用する（Googleの評価に関わる）

箇条書きリスト

リスト全体を<ul>～</ul>
各リストを<li>～</li>で囲む

例

<ul>
　<li>～</li>
　<li>～</li>
</ul>

<!--liの中で新たなulを作成（※ulは子要素にliしか持てない）-->
<ul>
　<li>
　　<ul>
　　　<li>～</li>
　　　<li>～</li>
　　</ul>
　</li>
</ul>

順序付きリスト

リスト全体を<ol>～</ol>
各リストを<li>～</li>
※箇条書きの<ul>を<ol>に変えるだけ！

定義リスト

リスト全体を<dl>～</dl>
定義するものを<dt>～</dt>
定義内容を<dd>～</dd>

※以下はすべて許可されている（html5）

1つのdtに複数のdd
複数のdtに一つのdd
dl内にdtのみ
dl内にddのみ

<dl>は子要素にdtとddのみ
<dt>は子要素に文字の一部に指定するタグ（<a><img><br>など）
<dd>は子要素にほぼ全てのタグ

◆文字の一部に指定するタグ

文字の強調

〇重要な語句（単語）※強調

<em>～</em>　　　　：初期で斜体（イタリック体）

〇重要な文章

<strong>～</strong>：初期で太字

見出しや段落などの中で使用。
emはキーワードとして検索で引っ掛かってほしい単語、strongは文章の中で重要な一文に使用

上記の意味通り使う、装飾の目的では使わない

〇装飾目的なら…
※共にhtml4.01の時点で非推奨となっていたが、html5で使用意図を変更して復活

<i>～</i>：斜体。文章の中で人が話した言葉などに使用
<b>～</b>：太字。<em><strong>にするほどではないが、ちょっと目を引きたい程度に他の言葉より大事
<small>～<small>：文字サイズが小さくなる。細目（主にコピーライト）用

引用シリーズ（３つ）

〇引用元

<cite>～</cite>：文中の一部で使用。斜体

<p>～<cite>～</cite>～</p>

〇引用文（文章の一部）

<q>～</q>：言語によって表示は違う。日本語は「～」

<p>～<q>～</q>～</p>

〇引用文（段落ごと）

<blockquote>～</blockquote>：複数の段落可能、インデントされる

<blockquote>
　<p>～</p>
　<p>～</p>
</blockquote>

挿入・削除・変更

<ins>～</ins>：文章を挿入したことを明示。段落などの中で使用、下線が出る
<del>～</del>：一定期間後、削除する予定の文。段落などの中で使用、取り消し線が出る

↑
見た目は同じだが、削除予定の有無で使い分け
↓

<s>～</s>：変更する前の情報を残していることを示す。段落などの中で使用、取り消し線が出る

上付き文字・下付き文字

<sup>～</sup>：上付き文字
<sub>～</sub>：下付き文字

ルビ（対応ブラウザのみ）

<ruby>～</ruby>：ルビを付けたい文字を包み、一文字ずつ後ろに<rt>でルビを指定
※ルビ非対応ブラウザで表示すると、ルビが各文字の後ろに表示される（例：旅りょ券けん）。
　そこで、ルビ対応ブラウザでは見えないルビの<rp>を使用し、（）等を付ける。

<ruby>旅<rp>（</rp><rt>りょ</rt><rp>）</rp>券<rp>（</rp><rt>けん</rt><rp>）</rp></ruby>

<!-- ルビ非対応ブラウザだと、旅（りょ）券（けん）と表示される -->

変化のないタグ（CSS用）

<div>～</div>：複数の段落などを一つの固まりにしてCSSでスタイル変更するのに使用。
※セクションという意味のある固まりではないが、デザイン上固まりで処理したい時。
<span>～</span>：意味を持たず、CSS用で「文字の一部」をスタイル変更するのに使用

区切り線（水平線）

<hr>：初期値では1pxの太さで黒の水平線がブラウザの幅に出力
※html5以前ではセクションがないため<div>を使う

◆セクション系のタグ

html5では、以下２つの作成方法がある。
サイト制作時にどちらで作成するかを決めて、それによりセクション系のタグを使用する。（ページ単位で考えて作られる方が多い）

サイト全体を一つのものとして考える方法
各ページを一つのものとして考える方法

サイト全体を一つのものとして考える方法

<header>～</header>：ウェブサイトもしくはページのヘッダー部分として設定
<nav>～</nav>：ナビゲーション部を指定。<header>内に書くことが多いが、必ずしもそこに書く必要はない。
※サイト内他ページであること。ページ内リンクや外部リンクはnavではない！！
※ヘッダーフッターにnavがある（上下計２つ）は問題ない。
<main>～</main>：メインコンテンツ部を指定
※IEはすべてのバージョンで非対応。ただしmainに対しCSSでdisplayというプロパティに値を設定することでIEでも使用可能となる。
<footer>～</footer>：サイトもしくはページのフッター部を設定。
フッターにはほぼすべてのサイトでコピーライトを記述する。
最近ではナビゲーションや会社情報（社名、住所、TEL）などを記述すケースも増えている。
<article>～</article>：そのセクション内ですべての情報が書かれており、完結しているもの* 記事などに使用。
<aside>～</aside>：そのサイト* ページの内容とは関係ない部分（バナー広告などに使用）
<section>～</section>：他セクション系タグのような意味はないが、サイト構成上セクションとして扱うべき場所。
- メインに<h1>を一つ
- そのうえで、さらに見出しを使用する場合
  　そこは1つのセクションであるべき。

例

<main>
    <h1>～</h1>
    <section>
        <h1>～</h1>
  	    ︙ 
    </section>
    <section>
       ︙

◆htmlにCSSファイルを読み込む！

<link>：rel属性に値としてstylesheet、href属性に値としてcssファイルへのパス（html4.01の場合は、type属性に値としてtext/css）

<link rel="stylesheet" href="パス">

※属性の記述順は自由

◆CSSファイルを作る

拡張子「css」で保存。1行目に文字コード指定を行う（※htmlと揃える！）

@charset "文字コード（UTF-8）";

【基本の書き方】

h1{
  color:red;
}

h1　：何に対して指定するかを、タグ* id名* class名で記述
{}　：{～}の中に指定したいものを記述
color：プロパティ名。〇〇を△△する、の「〇〇」部分
red　：値。〇〇を△△する、の「△△」部分
　　↓
h1見出しの「文字色」を、「赤」くする！（※htmlは文字が基本なので、color＝文字色）

◆CSSを指定する要素等の指定方法

idは「#id名」
複数のタグ等に同じものを設定するときは「,」で繋げる
　例）h1とpに指定 → h1,p{～}
〇〇の"子"要素の△△に設定するときは「>」で繋げる
　例）#col1の子pに指定 → #col1>p{～}
〇〇の"子孫"要素の△△に設定するときは半角スペースで繋げる
　例）navの子ulの子li → nav li{～}

◆文字の装飾

色を指定

■colorプロパティ
以下のいずれかで、値を設定。
今は10進数の指定＋カラーネーム（基本的な色）が主流。（4.01の頃は16進数だった）

10進数指定　：rgb(〇(r),〇(g),〇(b))を各10進数で
16進数指定　：#000000（16進数6桁）
カラーネーム：ネスケ社が設定したカラーネーム

【Webセーフカラー】
全ブラウザ共通で確実に発色する色。rgb各値51の倍数
0　51　102　153　204　255

フォントサイズを指定

■font-sizeプロパティ
以下のいずれかで、値を設定。

px/cm/mm などの絶対単位。基本使わない。
％（※）：親のボックスのサイズに対する倍率←親基準なので、入れ子のリスト等は段々小さくなる
rem：ルート（html）のサイズに対する倍率←htmlのデフォルトが基準なので、入れ子も小さくならない（基本これ）

※親に対するものは、divに80％を指定すると、入れ子で中のpは0.8*0.8で64％になる。

<div>
　<div>
　　<p>～</p>
　</div>
</div>

( ..)φメモ
IE11はrem、それより古いとpx

フォント種類を指定

■font-familyプロパティ
以下３種類の値は、基本設定。

windows用
mac用
汎用（指定したフォント名がない場合に使用）
→sans-serif：ゴシック
→serif　　：明朝

※最近はWebフォント（有料無料いろいろ）を使用するケースも。その場合は指示に従って指定
※macを先に指定（winの）

・Webの文字はピクセルの集合体。小さめの文字で明朝は文字が非常に読みにくい
・Webも紙も、タイトルと本文でフォントを変えることが多い（基本に近い）
・明朝を使う場合、タイトルに明朝・本文にゴシックが普通（Webの例！！紙は逆）

( ..)φメモメモ
・単語の打ち間違いはないか？
・大文字/小文字/全角/半角みなおせ
・他も効かなくなったらタグ閉じ忘れ？
・原因はどこか？ミスったタイミングは？

文字の太さ

■font-weightプロパティ
以下いずれかの値を指定。各フォントで用意されていないと太さは出ない（大半のフォントでnormalとbold二種類が用意）

normal：通常
bold　：太字
※100～900の100単位

注意！！
見た目上の変更用！！（意味があればhtml側で意味通りのタグ使い太くする）

文字のスタイル

■font-styleプロパティ
以下いずれかの値を指定。

normal：通常
itaric：イタリック体（斜体っぽいやつ）

行の高さ（行間）の指定

■line-heightプロパティ
文字サイズより大きい分を文字の上下に割り当てて余白を作る。以下の値を指定。

単位なしで倍率。もしくはpx/%/em/rem等font-sizeで使える各単位

＿〇＿＿　※一番下の段は空白になる
＝あaA＝
￣〇￣￣

※〇に行の高さの余白分
元々下の段は小文字の一部（gp）でしか使わないため、下の方が広く見える

字間の設定

■letter-spacingプロパティ
文字間の隙間のサイズを設定する。以下の値を指定。

文字サイズに使用する単位

文字の飾りの設定

■text-decorationプロパティ
意味のない箇所に下線や取り消し線を付けたり、タグにより付いた飾りを表示上消す。
以下いずれかの値を指定。

none　　　　：消去
underline　：下線
line-through：取り消し線

サイズ変えず小→大文字

■font-variantプロパティ
サイズそのまま、小文字の形状を大文字に（abc→ABC）。以下の値を指定。

small-caps

fontの一括指定

■fontプロパティ

指定グループ１：任意。グループ内で順不同
- font-weight
- font-style
- font-variant
指定グループ２：必須！！！！
- font-size
指定グループ３：任意
- line-height
指定グループ４：必須！！！！
- font-family

※lineだけfontと付かない＝グループ２のおまけの扱いなので、２と３の間は「/」。
　他のプロパティ間は半角スペース。

font:normal normal 3rem/1.5 "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ proN W3","Yu Gothic",游ゴシック,YuGothic,游ゴシック体,Meiryo,メイリオ,sans-serif;

リストに関するスタイル

リストに対して行う場合（文字に関しては他と同様font～等を使用）
リストマーカーに関してのみ、リスト専用のプロパティがある（ul,ol用）
リストのマーカーは、以下の二つの変更が可能となっている
- 形を変える
- 画像にする

リストマーカーの変更

■list-style-typeプロパティ
以下の値を指定。

ul用
- circle（白丸）
- square（四角）
- disc（黒丸）
- none（なし）
ol用
- decimal（数字）
- lower-alpha（小文字アルファベット）
- upper-alpha（大文字アルファベット）
- lower-roman（小文字ローマ数字）
- upper-roman（大文字ローマ数字）

【マーカーだけの色を変えたい】
１．liにcolorでマーカーに設定したい色を指定
２．<li><span>～</span></li>とliの文字全体をspanで囲む
３．上記２のspanにCSSで文字の色をcolorで指定

※基本一括指定

リストマーカーを画像に変更

■list-style-image
以下の値を指定。

url("画像へのパス");

※基本一括指定

リスト一括指定

■list-styleプロパティ
typeもimageも任意。
※list-styleは「ul」「ol」に指定する！！！！

◆classについて

classは、タグに属性として付与することでタグに別名を付けることができるもの。

■idとの違い

id（ユニーク）	class
1ページに同名は1つ！	1ページに同名複数可！
CSSでは「#」で使用	CSSでは「.」で使用
ページ内リンクで使用	使用できない

※classは1つのタグに複数の値を設定できる（idは不可）
　複数設定するには、「class="class名1 class名2……"」と半角スペースで区切って指定
※「（タグ）#～」「（タグ）.～　」のように、タグに続けてid名やclass名を書くと、〇〇（タグ）かつ△△（id名/class名）の指定になる
　例）「span.main-list」：spanであり、かつクラス名main-listであるもの

◆要素のあり方の指定

■displayプロパティ
各要素は必ず何らかの初期値を持っており、それにより以下のような違いがある。

block：セクション、見出し、段落、divなど。
初期値で横幅が画面の端まで担っていて、横幅、高さ、枠線、枠線内外の隙間を持つ
inline：span、em、del、aなど。
初期値で幅も高さも持たず、親要素が持つ高さ等に依存する（他の物の中で使う！）
listitem：liの初期値。
インデントされている。高さ、幅等はblock同様。

◆ボックスモデル

( ..)φメモメモ
ボックスモデルについて
https://nulab.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/

width　：文字の表示領域（横幅）
height ：文字の表示領域（縦幅）
margin ：枠と枠の間（余白）※pとpの間など
padding：文字と枠の間（余白）
boader ：枠（文字の表示領域＋文字と枠の余白）

※それぞれ重ならない。枠の幅＝width＋padding、高さ＝height＋paddingになる。

横幅の指定

■widthプロパティ
以下の値を指定。

％、px等の文字などで使用する単位

※displayがブロックのものは初期値100％（親ボックスのサイズに対しての％）
　通常はpaddingがあるため、実質は親ボックスのwidth－自分の左右のadding

高さの指定

■heightプロパティ
以下の値を指定。

auto：必要な分だけ、という値（初期値）。余程のことがない限りこれ
％、px等の文字などで使用する単位

※変更するのは、サイト内でサイズ固定しスクロールバーを出す（全て見えなくていい）* 背景の画像との兼ね合い等のケースのみ。

枠線の指定

四方が同じ

以下の３つを、ボックスの四方に指定（一括指定もあり）

■border-style：線種

solid：実線
double：二重線（ブラウザにより多少の違い）
dotted：点線　（〃）
dashed：破線　（〃）

■border-color：色

線の色　：指定はcolorプロパティと同じ

■border-width：太さ

線の太さ:指定はpx,％等（px指定が多い）

一括指定（全方向同一の時）

■border：半角スペース区切り、順不同

一番よく使う！！！！

四方別々に指定

以下それぞれの命令で、各部分を指定。
■border-(top )-(style)
.....................(bottom) (color)
.....................(left ) (width)
.....................(right )

一括指定（方角ごと）

■border-(top )
.....................(bottom)
.....................(left )
.....................(right )

間隔の指定

マージン　：ボックス間の間隔
パディング：枠線と文字の間隔

個別指定

■(margin )-(top )
...(padding)(bottom)
.........................(left )
.........................(right )

一括指定

■margin
■padding

一括指定は値の数によって指定場所が決まる

1個　margin:10px　　　　　　　　：4方に10px
2個　margin:10px 20px　　　　　　：上下10px、左右20px
3個　margin:10px 20px 30px　　　：上10px、左右20px、下30px
4個　margin:10px 20px 30px 40px　：上10px、右20px、下30px、左40px

※時計回り、指定されていないものは対角線と一緒。
　上
左□右
　下

注意！！
上下のマージンは重なる（上の行で、下30。下の行で、上30。計60…ではなく、重なって計30）
top/bottomなど使うものは決めて、決めたもののみで一方向に伸ばす！！

画像やテーブルセルの文字（画像）の基準位置

――――――――― ←top/text-top（上合わせ）

―――――――――
        ・ ←middle（センター合わせ）
――――――――― ←baseline

――――――――― ←buttom/text-bottom（下合わせ）

vertical-align:top;など

ボックス横位置の指定

■text-alignプロパティ

left ：左寄せ（デフォルト）
right ：右寄せ
center：中央寄せ

※文字の位置。左寄せ、センターなど

( ..)φメモメモ
Yahoo!のような中央にコンテンツ、左右に余白が出る画面構成のやりかた！！！！

サイト全体を囲むwrapperに、cssで以下を指定

#wrapper{
  width: 1000px;　←表示領域を指定
  margin: 0 auto;　←余白は画面幅-表示領域を自動で左右に割る
}

widthのエリア指定

■box-sizingプロパティ
以下いずれかの値を指定。

border-box ：コンテンツ＋パディング＋ボーダーがwidthになる
content-box：コンテンツのみ（デフォルト）

〇:nth-child(n)　　 …ｎに指定したい要素が親要素の何番目の子かを数字で
〇:nth-last-child(n)…ｎに指定したい要素が親要素の後ろから何番目の子かを数字で

背景色の指定

■background-colorプロパティ
背景はボーダーの内側（width+padding）に入る。値はcolorプロパティと同じ

背景画像の指定

■background-imageプロパティ
画像を指定。値は以下

url("画像のパス")

■background-repeatプロパティ
ボックス内に画像をリピートして表示する方法。値は以下

no-repeat：繰り返しなし
repeat-x ：横にのみ繰り返し
repeat-y ：縦にのみ繰り返し
repeat　：全面繰り返し

■background-positionプロパティ
上記でrepeat以外の時に画像を出す位置。値は以下

横…left,center,bottomのキーワードがpx等
縦…top,center,middleのキーワードがpx等
※no-repeatの時は「横縦」の形で指定。例）left top

背景の一括指定

■backgroundプロパティ
background-～のプロパティは全て一括指定可。全プロパティ任意、順不同
指定は各プロパティの値を「半角スペース」で繋げる
※colorとimageの同居も可

ボックスの回り込み

■floatプロパティ
floatを指定、かつwidthを指定されたボックスは、floatの値のそばに（少し浮いて）移動し、その横のエリアは次のボックスが使えるようになる。値は以下。

left
right
※少し浮いているので、回り込み終了時にclearする必要がある。

★nth-child(　)　…前から数える
★nth-last-child(　)　…後ろから数える

4n　：4の倍数

2n　：偶数
2n-1：奇数

-n+4：1～4番
n+4 ：4番～

( ..)φメモメモ
ほにゃ番目系の指定方法まとめ
https://qiita.com/ituki_b/items/62a752389385de7ba4a2

■display:none;
　非表示（エリアがなくなる）

■値にcalc()を使用
margin widthに使用すると、単位が違うものの計算を行ってくれる

例）width:calc(50%-5px);
　　％でレイアウトしたうえでピクセル分を引くなど

◆pdf：srcset

■vw/vh
　ビューポートに対する比率（0～100）のwidth/height
　￣￣￣↑￣￣
　ブラウザサイズ

■background-sizeプロパティ
背景画像の大きさを指定。

％
contain…縦か横のどちらかが、そのエリアの最大。もう片方は余白あり
cover　…余白なく全体に。縦か横のどちらかははみ出して非表示

 ____________
|            |
|------------|←contain
|------------|　横幅に合わせ、上下に余白
|____________|

 ＿＿＿＿＿＿
︙__________︙
|            |
|　 　　　 　|←cover　横幅に合わせ、上下がはみ出す
|____________|
︙          ︙
 ￣￣￣￣￣￣

※以下の組み合わせが一番実用的だが、この組み合わせはiosでバグる（safari等でfixedが効かない）

background-size:cover;
background-attachment:fixed;

( ..)φメモメモ
iOSの固定方法
https://web.runland.co.jp/blog_cate2/post-3558

◆positionでボックスをずらす

※ブラウザ内で表示固定したい時など

■positionプロパティ
ボックスの位置を指定。値は以下＋ズラす位置（top/bottom/left/rightプロパティにpxで指定）

static　…初期値。何もしない（ほぼ使わない）
relative…相対（absoluteとセット、単体で使うことは少ない）
→positionを指定しない時に出る位置からの、ズレる距離を指定。指定しない時に出る予定だった場所は確保される。

余白を維持したい、下のボックスに重ねたい場合。でなければネガティブマージン（マイナス）の方が余白詰めてくれるのでよい

#wrapper>div:nth-child(2){
  position: relative;
  top: 50px;　　←マイナスだと上にずれる
  left: 50px;}

absolute：絶対
→基準ボックス（初期はbody）からの距離を指定。relatibeを指定したボックスは、そのボックスの子孫の基準となる。positionを指定しない時に出るはずだった場所はなくなる。

#wrapper{
  position: relative;　←基準をwrapperにする
}
#wrapper>div:nth-child(2){
  position: absolute;
  top: 50px;
  left: 50px;}

fixed　 …ブラウザ内
→ブラウザの指定位置に表示。スクロールに左右されず、指定位置に表示され続ける

#wrapper>div:nth-child(2){
  position: fixed;
  top: 50px;
  left: auto;　←left:autoで親ボックスの左位置と同じ左位置に
  margin-left: 1000px;}　←そこからマージンでずらしたい位置を指定

※邪魔にならない位置に置く。右下が多い

( ..)φメモメモ
配置はフロート、フレックス。特殊な配置にポジション（ボックスにボックスを重ねる）

ボックスのはみ出し対処

■overflowプロパティ
ボックスサイズを指定し、そのボックスをはみ出した時にどうするかの指定。値は以

visible…はみ出しても表示（初期）
hidden …はみ出した分は非表示
scroll …スクロールバーを出す

※スライドショーでポジションとセットになることが多い。

■overflow-y:scroll：スクロール横のみ
■overflow-x:scroll：〃下のみ

◆◇position‐ボックスの重なり対処

■z-indexプロパティ
重なったボックスの重ね順。値は以下（大きい方が上！！）

0～CPUスペック次第

※順序決めるときは動かないrelativeを指定

positionで必須！！！

( ..)φメモメモ
ネガティブマージン（マイナス）設定できるのはマージン、ポジションくらい

◆table

※会社概要やカレンダーなど。

【表作成の基本】
１．表全体を<table>～</table>で囲む
２．表のキャプションを<caption>～</caption>で囲む
３．表の1行を<tr>～</tr>で囲む
４．各セルは、見出し<th>～</th>* 一般セル<td>～</td>で囲む

■必要に応じて、

表のヘッダーになる行を、<thead>～</thead>
表のフッターになる行を、<tfoot>～</tfoot>
上記以外の一般行を、<tbody>～</tbody>
※各複数行まとめて<tbody>など可。

省略可だけど存在はするので、ないとnth childでこんがらがる！！！

( ..)φメモメモ
見出し（th）は縦に並べてもおｋ！（その場合tbodyしか使えない）
と、見出しなしでも問題はない。

セルの結合

<td>や<th>で作成するセルは、エクセルのように連結することができる

colspan属性…colspan="～"で、～個のセルを横に連結
rowspan属性…rowspan="～"で、～このセルを縦に連結

※↑両方使うことも可能
※連携というより、横/縦に、指定の数値分だけセルをまとめて使う！！

枠線の表示

<tr> <tbody> <thead> <tfoot>は、backgroundは指定できるがborderなどは不可。
表に枠線を付けるときは、<table><td><th>にborderを指定し、

＿＿＿＿
|□ □ □|
|□ □ □|
￣￣￣￣

このようになるので、<table>にさらに「border-collapse:collapse」と指定すると、

＿＿＿＿＿
|＿|＿|＿|
|  |  |  |
￣￣￣￣￣

になる。

`<th>`の初期値

以下になっている。<td><th>はvertical-alignで縦位置を指定可能。

font-weight:bold;
text-align:center;

各セルの横幅

表全体のwidthに対し、各セルのwidthを指定しなかったとき、
各セルの横幅は「セル内の文字の量に応じて比率配分」される！！

※文字量の多いセルがあると、そのほかのセルの横幅が1文字分になることも考えられる。
　その場合は、セルにもwidthをしていする。

キャプションの表示位置の指定

■caption-sideプロパティ

top（初期値）
bottom
left
right

◆cssの優先順位

１．タグ内に属性として指定したものは、cssファイルやhtmlの<style>内よりも優先！
２．cssファイルや<style>内のものは、この後に書くポイントの合計の高いものが優先
３．同ポイントのものは、後から読まれた方が上書き指定の形となり有効

※「!important」を付けると最優先！！！！だが、原則使用しない…
　例）color:red !important;

■ポイント
基本として、桁上りは行わない。
（正確には、10の桁13個で130だが、100の桁1個の100が上になる）

タグ　　　… 1p
nth-child … 1p
class　　… 10p　※優先
id　　　　…100p　※最優先！

例）p{ } ←1p
　　main p{ } ←2p
　　#wrapper>main p{ } ←102p

◆入力フォームの作成

フォーム全体を、<form>～</form>で囲む！！！！
この時、formタグに必要な属性がある。

■method属性　←送信方法を指定

post：入力データの送信時、内容をipアドレス等と合わせて送信（見えないように送る）
get ：入力データをURLの後ろにつけて送信（入力したものが見える、字数に制限）
※PHP側でも差が出る。通常はpostが多い（getは検索ワード等）

■action属性

入力データを送信するファイル（PHP等）のパスを指定

1行の入力欄

■<input>
type属性で何を入力する欄かを指定
inputで作成できるのは、以下のものがある。

[　]1行のもの
〇～　〇～　〇～
□～　□～　□～　…の選択するもの
送信等のボタン

■type属性
【[　]の形のもの】

text　　…テキスト入力
password…パスワード入力（入力は*で表示）
tel　　 …電話番号
email　 …メールアドレス（@がないとエラーになる）
url　　 …URL
search　…検索ワード

【選択型】

checkbox…複数選択
radio　 …単一選択

ユーザーは選ぶだけなので、何が選ばれたかをPHPに送る時の値をvalue属性で指定。
※[　]の入力欄でvalueを設定すると、その値が入力された形で表示される。
（既に入力された状態で、変更の際はユーザーが手動で消す必要があるもの）

【ボタン型】

button…汎用（javascriptでよく使用）
submit…送信ボタン
reset …リセットボタン。入力されたものを消去
file　…ファイル送信ボタン。
　　　　　※ファイル送信するときは、<form>に「enctype="multipart/form-data"」の記述必須！

【非表示型】

hidden…入力欄非表示。PHPで確認画面作成の時などに使用

※入力→確認→（ここでもformによる入力データ必要なのでhidden等で行う）→DB処理
　ただの文字はDBに送れないので、hidden＝入力できない状態で表示＆持つ。

■size属性
必須ではないが、入力欄の長さ（半角の文字数）を指定できる。
指定しなかった場合は「20」になる。

■required属性
値はなく、タグ内に「required」と指定すると、必須入力欄になる。

■placeholder属性
これに設定した値は、入力欄に薄いグレー文字で表示され、ユーザが入力開始すると消える。
記入例などに使用。

複数行の入力欄

■<textarea></textarea>
タグ～閉じタグ内は基本的に空。以下はあくまで初期値（ユーザが広げることができる）

cols属性…1行の文字数
rows属性…行数

プルダウン式の選択

※単一選択型。
例）

北海道　←選べる
東北　　←選べない！（グループ名）
- 青森　←選べる
- 秋田　←選べる

■<select>～</select>
全体を囲む。

■<option>～</option>
各選択項目を囲む。以下の値がある。

value属性…送信する値

■<optgroup>～</optgroup>
複数の選択項目（option）をグループ化。以下の値がある。

label属性…グループ名

<select name="food">
<optgroup label="野菜">
  <option label="トマト" value="tomato">トマト</option>
  <option label="なす" value="nasu">なす</option>
  <option label="にんじん" value="ninjin">にんじん</option>
</optgroup>
<optgroup label="果物">
  <option label="ぶどう" value="budou">ぶどう</option>
  <option label="りんご" value="ringo">りんご</option>
  <option label="みかん" value="mikan">みかん</option>
</optgroup>
</select>

value属性まとめ

■選択型（radio/checkbox/select）
PHPに送る値を設定。

■1行入力欄、hidden
初期入力値を設定。

■ボタン（submit/reset/button/file）
ボタンの文字。type="button"は初期値がないので必須。

■name属性
PHPには「このname属性のものに、この値が入力された」という形で送信される。
name属性が設定されていないと、データは送信できない！！
※name属性は、PHP開発者が値を指定するのが一般的。

例）$_POST['(name属性)']

項目名で入力欄にカーソル

項目名をクリックしたら、該当の入力欄にカーソルが出るようにする。

例）名前：[　]の、「名前」をクリックで入力欄にカーソルが出る。

<label for="id属性名">名前：</label>
　　　　　　￣￣￣￣ →↓
<input type="text" id="～" namae="～" size="～">
　　　　　　　　　　　￣￣

フォームの書き方

テーブルなどの中に書くが、子要素で持てるものが限定されるタグには書けないため注意。
（テーブルの場合、以下のようになる）

<form>
  <table>
    <tr>
      <th>名前</th>
      <td><input～></td>
    </tr>

◆疑似クラス

CSSでそれぞれのタイミングでの指定が可能。「:link」と「:visited」は<a>のみ
（書く順番は上から順。順番違うと上書きされて効かなくなる！！！！）

〇:link　 …未訪問リンク
〇:visited…訪問済みリンク
〇:hover　…カーソルが乗った状態
〇:active …クリックの最中（一瞬）

◆色の指定時に不透明度を合わせて指定

rgba(～,～,～,～)

左から

レッドチャンネル（0～255）
グリーンチャンネル（0～255）
ブルーチャンネル（0～255）
アルファチャンネル（0～1）←1が不透明、0が透明

◆ボックスの角を丸くする

■border-radiusプロパティ

【個別指定】
■border-(top )-(left )-radius
....................(bottom)-(right)

【値の書き方】

角に円を当てはめて考え、円の半径を指定する
　※円が正円の時は１つ、楕円の時は２つの値

border-radius:10px;　　 ←四方が半径10pxの正円
border-radius:10px/20px;←横10px、縦20pxの楕円

border-(top   )-(left )-radius:10px;←指定した角が半径10pxの正円
       (bottom) (right)

border-(top   )-(left )-radius:10px/20px;←指定した角が横10px、縦20pxの楕円
       (bottom) (right)

★短縮形（左上、右上、右下、左下の順で、左上を基準に時計回り）

　　　　　　　　　　　　　＿＿＿＿横＿＿＿＿ 　　　＿＿＿＿縦＿＿＿＿
border-radius:5px 15px 25px 35px / 10px 20px 30px 40px;
       　      左上 右上 右下 左下  　 左上 右上 右下 左下

※全部書かない時は、後ろが削られて“対角線上と同じ値”になる
（３つだと、左上* 右上* 右下で左下がないので、右上と同じになる）

★正方形のボックスにborder-radius:50％で正円になる！！！！！！！！

( ..)φ参考メモ
https://www.webcreatorbox.com/tech/border-radius

◆ボックスに影を付ける

ボックスの影が下にできて、指定分だけズレる＆ぼかす。

◆小ネタ（雑談メモ）

■href="javascript:void(0)"
昔（今でもたまに）、のリンク先に設定しているサイトがあった。
これはクリックしても何も起こらず、カーソルを指のマークにするために使用されていた。

今はCSSで「cursol」というプロパティがあるので、使用しない！

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