HTML5とCSS

2022年10月1日

HTML５とCSSの備忘録。

目次

要素と空要素

要素＝<開始タグ>コンテンツ<終了タグ>

空要素＝締めタグの無いタグ（imgタグ等）

コメントアウト

<!-- HTMLの時 -->
/* CSSの時 */

冒頭のタグ

<!doctype html>（HTML５のドクタイプ宣言）

<html lang="ja">〜</html>（日本語HTML）締めタグはページ最下部

<head>〜</head>（ページ情報（非表示））

head内のタグ（メタ要素＋タイトル等）

<meta charset="UTF-8″>（文字コード（文字化け防止））

<title>〜</title>（サイトのタイトル）

<meta name="description" content="（ページ説明等）">

<meta name="viewport" content="width=device-width,initial-scale=1″>
（レスポンシブ対応。デバイスの横幅に合わせ、倍率は１）

<meta name="keywords" content="〇,△,◆"> （ページ内容のキーワード）

<（リセットCSS）>（各ブラウザのデフォルト設定をリセットするcss）

<link rel="stylesheet" href="〇〇.css">（cssファイル読込）

bodyタグ（headより下の大枠）

<body>〜</body>（本体部分）

bodyタグ内の大枠

<header>〜</header>（ヘッダー。ロゴやナビ（表示））

<main>〜</main>（メイン。又はdivタグでクラス名つけて作ったり）

<footer>〜</footer>（フッター。コピーライト等）

ナビゲーションメニュー

下記を入れ子構造にする。

<nav>〜</nav>（ナビ）

<ul class="main-nav">〜</ul>（リストタグ＋クラス名）

<li>〜</li>（リストアイテムタグ）

<a href="リンク先のアドレス">〜</a>（aタグ）

見出しタグ（h1〜h6）

<h1>〜</h1>（大見出し。１ページに一つ）

・数字順に使用。

pタグ（段落）

<p>〜</p>

・Paragraph（段落）のP

・自動改行

imgタグ（画像挿入）

<img src="画像指定" alt="代替テキスト">〜</>

・ソース属性で画像を指定。オルト属性で画像非表示の際にテキスト表示。

ファイルパス（画像等の場所指定）

同フォルダ内・・・ファイル名（拡張子含む）だけ

同階層の別フォルダ・・・「フォルダ名/ファイル名」

別階層のフォルダ・・・「../フォルダ名/ファイル名」
「../」＝一つ上。二つ上は「../../」

aタグ（リンク）

<a href="リンク先">〜</a>

・エイチレフは、「Hypertext REFerence」の略。

画像でリンク

aタグでimgタグを挟む。

リストタグ（ul(or ol)＋li ）

<ul>〜</ul>（黒丸リスト。Unordered Listの略）

<ol>〜</ol>（番号付きリスト。Ordered Listの略）

<li>〜</li>（List Itemの略）

tableタグ（表）

<table>〜</table>（テーブルの大枠）

<tr>〜</tr>（Table Rowの略。行。各行の枠）

<th>〜</th>（Table Headerの略。見出し、一行目）

<td>〜</td>（Table Dataの略。2行目以降）

例）
<table>
<tr>（行）
<th>〜</th>（見出しの数だけ繰り返す）
</tr>
<tr>
<td>〜</td>（データの数だけ繰り返す）
</tr>
</table>

セルの結合（colspan or rowspan属性）

th又は、tdタグに下記属性を追加。

colspan属性（列方向。列＝カラム(column)。スパン=幅間隔）

rowspan属性（行方向。行＝ロウ）

例）
<th colspan="(結合する列分の数字)">（表示させたい文字）</th>

<td rowspan="(結合する行分の数字)">（表示させたい文字）</td>

formタグ（フォームの大枠)

<form action="●.php" method="post" name="■■">～</form>

action属性…データ送信先
method属性…データの転送方法（get or post等）
name属性…フォーム名

inputタグ（フォーム内の各パーツ）

inputタグ内に各種属性値を入れて使用

<input type="text">（テキスト入力欄）

<iput type="text" placeholder="●●●">（●●●を最初から表示）

text以外の主な1行テキスト欄の属性値
・search（検索時のテキスト）
・email（メールアドレス）
・tel（電話番号）
・url（WebサイトのURL）

ラジオボタン（input type="radio"）

主な属性
・name（ラジオボタン名）
・value（送信される選択肢）
・checked（最初から選択済）

例）
<input type="radio" name="yasai" value="胡瓜">胡瓜
<input type="radio" name="yasai" value="茄子" checked>茄子

〇胡瓜　●茄子（最初から茄子にチェックが入った状態）

チェックボックス（input type="checkbox"）

主な属性はラジオボタンを同様

送信ボタン

<input type="submit" value="送信">（送信ボタン）
<input type="image" src="images/●●.jpg" alt="送信">（画像の送信ボタン）

その他属性値
・name（ボタン名）

セレクトボックス（selrectタグ+optionタグ）

例）
<select name="brother" multiple>
　　　　<option value="tarou">太郎</option>
　　　　<option value="jirou">次郎</option>
　　　　<option value="saburou" selected>三郎</option>
</select>

selectの属性
・name（セレクトボックス名）
・multiple（複数選択可）
optionの属性
・value（送信される値）
・selected（最初から選択状態）

テキストエリア（textarea）

<textarea name="come" placeholder="●●●"></textarea>

・placeholderで最初から●●●を表示し入力し出すと消える

ラベル（各種フォームのlabelタグ）

例）

<input type="checkbox" name="brother" value="太郎" id="●">
<label for="●">太郎</label>

・id属性とfor属性を関連付けると、ラベルをクリックするだけでチェックボックスを選択可。

CSSの基本

セレクタ{ プロパティ: 値;}

セレクタ＝どこの？

プロパティ＝何を？

値＝どうする？

例）
p {
font-size: 24px;
}

classとid

HTML上でclass指定→CSSで「.（ドット）」はじまり

HTML上でid指定→CSSで「＃（ハッシュ）」はじまり


～HTML～
・クラス(id)名に空白不可で一文字目は英字
・idとaタグでページ内リンク作成可
・idはページ内に1箇所のみ（同名id使用不可）
・classはページ内外に同名複数設置可

・一つのタグにidやclass複数設定可
例）
<h2 class="a b c">太郎</h2>
<h3 id="a" class="b">次郎</h3>

～css～

・同タグにクラスとidがそれぞれ設定した場合はidが優先される

・同クラスで片方だけ設定する時は「タグ名.class名 {}」

レスポンシブwebデザイン

@media (max(or min)-width: 500px) {

(ここに500px未満の時のCSSを入力）

}

単位

px（ピクセル）…画面上の最小単位（絶対値）

％（パーセント）…親要素のサイズが基準（相対値）

rem（レム）…ルート要素のサイズが基準（相対値）

em（エム）･･･親要素のサイズが基準（相対値）

vw･･･ビューポート（ブラウザの表示領域）幅の割合単位
vh･･･上記と同様に高さの割合（viewport hightの略）

フォント系プロパティ（font-famiry ,weight）

font-famiry: “●",○,…;（フォントの種類指定）
　明朝＝縦太横細の線で筆っぽい（ウロコ有）
　ゴシック＝縦横太さ同じ（ウロコ無）

font-weight: ●;（フォントの太さ。bold等）

文章系プロパティ（line-height,text-align）

line-height: ●;（行間）

text-align: 〇;（揃え）
・left（左揃え）
・right（右揃え）
・center（中央揃え）
・justify（両端揃え）

色系プロパティ（color,background)

color: ●;（文字色）

background: 〇;（背景色）

色指定（カラーコード、RGB、名前）

#000000（カラーコード）･･･3桁表記可

rgb(255,255,255)（RGB値)･･･かっこ内の4つ目に透明度指定可(0~1)

black（名前指定）

背景系プロパティ（background~)

background-image: url(●.jpg);（背景画像指定）

background-repeat: ●●;（背景画像の繰り返し）
・repeat（繰り返す）
・repeat-x（横に繰り返す）
・repeat-y（縦に繰り返す
・no-repeat（繰り返さない）

background-size: 数値 or ワード;（背景画像のサイズ）
・cover（埋め尽くすが画像が切れる）
・contain（画像は切れないがサイズにより余白発生）

background-position: 数値 or ワード;（背景画像の表示位置）
例）
50px　100px（左から50、上から100）
left bottom（左下）

width,heightプロパティ

width（ウィドゥス）＝幅

height（ハイト）＝高さ

width: 数値 or auto;（幅。初期値はauto。auto時のMAXは親要素幅）
・heightも同様
・インライン要素（a、span）はサイズ変更不可

余白プロパティ（margin,padding）

margin: 数値 or auto;（外側余白）

padding: 数値 or auto;（内側余白）

・上下左右の個別指定可
margin-top（上）
margin-right（右）
margin-bottom（下）
margin-left（左）

・一括指定可
margin: 上 右 下 左;（４個）
margin: 上 左右 下;（３個）
margin: 上下 左右;（２個）
margin: 全て;（１個）

線プロパティ（border-width,style）

border-width: 数値 or ワード;（線の太さ）
・thin（細い）
・medium（普通）
・thick（太い）
例）4辺の太さ変更可
border-width: 1px 2px 3px 4px;

border-style: ワード;（線の種類）
・none（非表示）
・solid（1本線）
・double（２本線）
・dashed（破線）
・dotted（点線）
・groove（谷型）
・ridge（山型）
・inset（囲まれた部分が凹）
・outset（囲まれた部分が凸）
これもwidth同様に4辺の設定可

border-color: 色指定;（線の色指定、4辺指定可）

上記、width・style・colorはまとめて指定可。
例）
セレクタ　{
border-top: 3px solid black;
}

リストプロパティ系（list-style~）

list-style-type: ●;（リストマーカーの種類）
・none（非表示）
・disc（黒丸）
・circle（白丸）
・square（黒四角）
・decimal（数字）
・decimal-leading-zero（0付き数字）
・lower-roman（小文字ローマ数字）
・upper-roman（大文字ローマ数字）
・cjk-ideographic（漢数字）
・hiragana（ひらがな）
・katakana（カタカナ）
・hiragana-iroha（平仮名いろは）
・katakana-iroha（カナいろは）

list-style-position: ●;（マーカーの位置）
・outside（外側）
・inside（内側）

list-style-image: url(●.png);（マーカーを画像指定）

ブロック要素とインライン要素とインラインブロック

blockinlineinline-block
並び縦横横
幅・高さ指定〇×〇
余白指定〇左右のみ
(paddingは上下可）		〇
配置指定×〇
（親要素で指定）		〇
（親要素で指定）

要素の変更はdisplayで設定。

例）h2をブロック→インライン

h2 {
  display: inline;
}

Flexbox

親要素で下記の設定をすると、子要素が横に並ぶ。

.親要素 {
display: flex;
}

flex-direction: ワード;（配置方向の指定）
・row（初期値。左から右）
・row-reverse（右から左）
・column（上から下）
・column-reverse（下から上）

flex-wrap: ワード;（折返し指定）
・nowrap（初期値。折り返さず1行）
・wrap（上から下へ折り返し複数行）
・wrap-reverse（下から上へ折り返し複数行）

justify-content: ワード;（水平方向の揃え指定）
・flex-start（初期値。左揃え）
・flex-end（右揃え）
・center（中央揃え）
・space-between（両端配置と中は均等）
・space-around（両端含めて均等）

align-items: ワード;（垂直方向の揃え指定）
・stretch（初期値。親要素 or 一番多い子要素の高さに合わせる）
・flex-start（上揃え）
・flex-end（下揃え）
・center（中央揃え）
・baseline（ベースライン揃え）

align-content: ワード;（複数行時の揃え）
・stretch（初期値。親要素の高さに合わせる）
・flex-start（上揃え）
・flex-end（下揃え）
・center（中央揃え）
・space-between（上下の両端配置で残り均等）
・space-around（上下の両端含めて均等）

グリッド（タイル型）

設定方法はFlexboxと同じ。

.親要素 {
display: grid;
}

grid-template-columns: 数値 数値 数値･･･;（列の分だけ幅指定して横並びへ）
・数値以外に「fr」指定可（比率指定。画面幅に合わせて自動伸縮）
「fr」＝比率（fraction)

「ギャップ」＝子要素と子要素との間
gap: 数値;（余白幅指定）

grid-template-rows: 数値;（行の高さ指定。複数行指定可）

例）
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 5px;
grid-template-rows: 300px 300px 300px 300px;
}

figureタグ(フィギュアのタグ)

画像、詩等の為のタグ

例）
<figure>
 <figcaption>画像名等</figcaption>
 <img src="〇〇.jpg" alt="〇〇〇">
</figure>

・figcaption･･･フィギュアのタイトル

transformプロパティ（CSS）

要素の移動・回転・拡大縮小のプロパティ

transform: translate3d(x,y,z);

position:absolute;

絶対値。好きな所に要素の位置を決める事が出来る。

親要素にpositionが設定されていないとbodyを起点とする。親要素をそのままの位置でposition設定する時はrelative。

親要素 {
 position: relative;
}

要素 {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
}

・leftとtopで親の半分、下の行で自分の半分。

marginの全リセット

初期設定のmarginを全部けす時は「＊」

  <style>
    * {
      margin: 0;
    }

max-width

要素の最大値を指定するプロパティ

・max-width:100%は、画像の最大値が親要素のwidth幅100%という意味。

コードの改行に関して

コードの改行も文字と認識。その改行分も幅が発生する為、font-sizeを0にする事によってレイアウトの構成が他の要素のサイズ通りに組める。

ボタンのCSS

divでボタン作成する時によくつかったCSS。

テキスト選択不可
user-select: none;
カーソルをポインターにする
cursor: pointer;

html & css

Posted by ippei