HTML・CSS解説辞典
HTML
<title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="robots" content="">
<h1><h2>・・・
<div><span>
<section><aside>
<nav>
<header><footer>
<address>
<main>
<p>
<hr>
<br><wbr>
<em><strong>
<sup><sub>
<ins><del>
<i>
<b>
<u>
<mark>
<abbr>
<q cite="">
<blockquote cite="">
<ruby><rt>
<ul><li>
<ol><li>
<ol reversed>
<ol type="">
<ol start=""><li value="">
<a>
<link rel="icon">
<img src="" alt="" width="" height="">
<details>
<table>
<caption>
<th><td>
HTML目的別
ページのタイトルを付ける
文字のエンコード方式を指定
説明文を設定する
検索エンジンのロボットを制御
見出しを示す
グループ化する
文章をまとめる
見出しやリンクのリストをまとめる
ヘッダやフッターを表す
連絡先を記載する
主なコンテンツを表す
段落を表す
区切り線を入れる
改行する
強調・重要性を示す
テキストを上付き・下付きにしたい
後からテキストを追加・削除
著者の気持ちや専門用語を表す
特別なテキストを表す
テキストにラベル付をする
テキストをハイライトする
略語を表す
短い語句の引用を表す
長い語句の引用を表す
ルビを振る
順不同のリストを作る
序列がついたリストを作る
番号が降順のリストを作成
リストの文頭の表示を変更する
リストの文頭の数値を変更する
リンクを貼る
ファビコン・アイコンを設定する
画像をはる
開閉式のコンテンツを作る
表を作る
表にタイトルや説明をつける
表の見出しのセル・セルを作る
CSS
<link rel="stylesheet" href="">
<style>
< class="">
#{} .{}
@media
:link :visited :any-link
:hover :active
:nth-of-type
:nth-child
font-family:
font-size:
font-weight:
font-style:
line-height:
color:
text-align:
text-decoration-line:
text-decoration-color:
text-decoration-style:
text-decoration-thickness:
text-emphasis-style:
text-emphasis-color:
text-shadow:
caption-side:
background-color:
background-image:
background-repeat:
background-size:
background-attachment:
background-clip:
background-origin:
border-width:
border-style:
border-color:
border-radius:
border-image-source:
width: height:
margin:
padding:
position:
z-index:
float:
clear:
overflow:
object-fit:
visibility:
box-shadow:
list-style-type:
list-style-positiom:
cursor:
transition:
filter:
CSS目的別
外部スタイルシートを読み込む
スタイルシートを埋め込む
classを設定する
classやidにスタイルシートを適応させる
ユーザー環境によってスタイルを変更する
訪問済みリンク・未訪問リンクにスタイルを適用
マウスオーバーやアクティブ化した要素にスタイル適用
指定した要素n番目の要素にスタイルを適用
指定した要素のn番目の子要素にスタイルを適用
フォントを設定する
フォントサイズを設定する
フォントの太さを指定する
フォントスタイルを指定する
行の高さを指定する
文字の色を指定する
文章の揃え位置を指定する
文字に線を引く
文字に引かれた線の色を指定
文字に引かれた線のスタイルを指定
文字に引かれた線の太さを指定
文字に傍点をつけ形を指定する
文字の傍点の色を指定
文字に影を作る
表のキャプションの位置を指定
背景に色を付ける
背景に画像を設定する
背景画像の繰り返し方を指定
背景画像の水平垂直位置を指定
背景画像の表示サイズを指定
ページスクロール時の背景画像の表示方法を指定
背景画像の表示されるエリアを指定
背景画像の表示される基準位置を指定
枠線太さを指定する
枠線のスタイルを指定
枠線の色を指定
枠線の角丸を指定
枠線に画像を指定
ボックスの幅と高さを指定
ボックスのマージンを指定
ボックスのパディングを指定
ボックスの配置方法・配置位置を指定
ボックスの重なり順を指定
ボックスの回り込みを指定
ボックスの回り込みを解除
サイズが指定されているボックスに収まらないコンテンツの表示方法を指定
画像や動画の要素をボックスに合わせる方法を指定
ボックスの可視・不可視を指定
ボックスの影を設定
リストマーカーの種類を指定
リストマーカーの位置を指定
カーソルの形を設定
プロパティを段階的に変化させる
画像や文字を加工する
border-radius:
border-radius:
border-radiusプロパティは枠線の角丸を指定するプロパティです
任意の数値+単位か%値で入力します
任意の数値+単位
%値
数値を空白文字で区切って複数入力することでそれぞれの角によって角丸を変えることもできます
値を一つ入れる
4つの角丸を一括指定
値を二つ入れる
1つ目が左上と右下
2つ目が右上と左下の角丸
値を三つ入れる
1つ目が左上、2つ目が右上と左下
3つ目が右下の角丸
値を四つ入れる
左上、右上、右下、左下の順で角丸が適用
また、角丸の半径を縦横で変化させることもできます
その場合には、「角丸の横の半径」/「角丸の縦の半径」といったように
スラッシュで区切る入力をします
/*↓p要素の枠線のスタイルを指定*/ p {border-radius: 「枠線の角丸」; }
HTML
CSS
HTML
<title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="robots" content="">
<h1><h2>・・・
<div><span>
<section><aside>
<nav>
<header><footer>
<address>
<main>
<p>
<hr>
<br><wbr>
<em><strong>
<sup><sub>
<ins><del>
<i>
<b>
<u>
<mark>
<abbr>
<q cite="">
<blockquote cite="">
<ruby><rt>
<ul><li>
<ol><li>
<ol reversed>
<ol type="">
<ol start=""><li value="">
<a>
<link rel="icon">
<img src="" alt="" width="" height="">
<details>
<table>
<caption>
<th><td>
<th><td>
目的別
ページのタイトルを付ける
文字のエンコード方式を指定
説明文を設定する
検索エンジンのロボットを制御
見出しを示す
グループ化する
文章をまとめる
見出しやリンクのリストをまとめる
ヘッダやフッターを表す
連絡先を記載する
主なコンテンツを表す
段落を表す
区切り線を入れる
改行する
強調・重要性を示す
テキストを上付き・下付きにしたい
後からテキストを追加・削除
著者の気持ちや専門用語を表す
特別なテキストを表す
テキストにラベル付をする
テキストをハイライトする
略語を表す
短い語句の引用を表す
長い語句の引用を表す
ルビを振る
順不同のリストを作る
序列がついたリストを作る
番号が降順のリストを作成
リストの文頭の表示を変更する
リストの文頭の数値を変更する
リンクを貼る
ファビコン・アイコンを設定する
画像をはる
開閉式のコンテンツを作る
表を作る
表にタイトルや説明をつける
表の見出しのセル・セルを作る
CSS
<link rel="stylesheet" href="">
<style>
< class="">
#{} .{}
@media
:link :visited :any-link
:hover :active
:nth-of-type
:nth-child
font-family:
font-size:
font-weight:
font-style:
line-height:
color:
text-align:
text-decoration-line:
text-decoration-color:
text-decoration-style:
text-decoration-thickness:
text-emphasis-style:
text-emphasis-color:
text-shadow:
caption-side:
background-color:
background-image:
background-repeat:
background-size:
background-attachment:
background-clip:
background-origin:
border-width:
border-style:
border-color:
border-radius:
border-image-source:
width: height:
margin:
padding:
position:
z-index:
float:
clear:
overflow:
object-fit:
visibility:
box-shadow:
list-style-type:
list-style-positiom:
cursor:
transition:
filter:
目的別
外部スタイルシートを読み込む
スタイルシートを埋め込む
classを設定する
classやidにスタイルシートを適応させる
ユーザー環境によってスタイルを変更する
訪問済みリンク・未訪問リンクにスタイルを適用
マウスオーバーやアクティブ化した要素にスタイル適用
指定した要素n番目の要素にスタイルを適用
指定した要素のn番目の子要素にスタイルを適用
フォントを設定する
フォントサイズを設定する
フォントの太さを指定する
フォントスタイルを指定する
行の高さを指定する
文字の色を指定する
文章の揃え位置を指定する
文字に線を引く
文字に引かれた線の色を指定
文字に引かれた線のスタイルを指定
文字に引かれた線の太さを指定
文字に傍点をつけ形を指定する
文字の傍点の色を指定
文字に影を作る
表のキャプションの位置を指定
背景に色を付ける
背景に画像を設定する
背景画像の繰り返し方を指定
背景画像の水平垂直位置を指定
背景画像の表示サイズを指定
ページスクロール時の背景画像の表示方法を指定
背景画像の表示されるエリアを指定
背景画像の表示される基準位置を指定
枠線太さを指定する
枠線のスタイルを指定
枠線の色を指定
枠線の角丸を指定
枠線に画像を指定
ボックスの幅と高さを指定
ボックスのマージンを指定
ボックスのパディングを指定
ボックスの配置方法・配置位置を指定
ボックスの重なり順を指定
ボックスの回り込みを指定
ボックスの回り込みを解除
サイズが指定されているボックスに収まらないコンテンツの表示方法を指定
画像や動画の要素をボックスに合わせる方法を指定
ボックスの可視・不可視を指定
ボックスの影を設定
リストマーカーの種類を指定
リストマーカーの位置を指定
カーソルの形を設定
プロパティを段階的に変化させる
画像や文字を加工する